Skip to content

Commit

Permalink
✅ add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
jakobe committed Nov 21, 2024
1 parent aa07d3c commit c03d9e4
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 27 deletions.
75 changes: 48 additions & 27 deletions libs/designsystem/item/src/item.component.integration.spec.ts
Original file line number Diff line number Diff line change
@@ -1,30 +1,33 @@
import { createHostFactory, SpectatorHost } from '@ngneat/spectator';

import { CheckboxComponent } from '@kirbydesign/designsystem/checkbox';
import { RadioModule } from '@kirbydesign/designsystem/radio';
import { ToggleComponent } from '@kirbydesign/designsystem/toggle';
import { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';

import { TestHelper } from '@kirbydesign/designsystem/testing';

import { ItemComponent } from './item.component';
import { LabelComponent } from '.';

const { fontWeight } = DesignTokenHelper;

describe('ItemComponent with LabelComponent', () => {
describe('ItemComponent', () => {
let ionItem: HTMLElement;

let spectator: SpectatorHost<ItemComponent>;
const createHost = createHostFactory({
component: ItemComponent,
imports: [TestHelper.ionicModuleForTest],
imports: [TestHelper.ionicModuleForTest, CheckboxComponent, RadioModule, ToggleComponent],
declarations: [LabelComponent],
});

describe('selectable and selected', () => {
let labelElements: Element[];
describe('with kirby-label', () => {
describe('selectable and selected', () => {
let labelElements: Element[];

beforeEach(async () => {
spectator = createHost(
`
beforeEach(async () => {
spectator = createHost(
`
<kirby-item selectable="true" selected="true">
<kirby-label>
<h3>Title</h3>
Expand All @@ -36,28 +39,46 @@ describe('ItemComponent with LabelComponent', () => {
</kirby-label>
</kirby-item>
`
);
ionItem = spectator.queryHost('ion-label');
await TestHelper.whenReady(ionItem);
labelElements = spectator.queryAll(
'ion-item ion-label > :is(h1, h2, h3, h4, h5, h6, p, data)'
);
});
);
ionItem = spectator.queryHost('ion-label');
await TestHelper.whenReady(ionItem);
labelElements = spectator.queryAll(
'ion-item ion-label > :is(h1, h2, h3, h4, h5, h6, p, data)'
);
});

it('should render general header, data and paragraph elements with correct font-weight', () => {
labelElements
.filter((e) => !e.attributes.getNamedItem('detail'))
.forEach((e) => {
expect(e).toHaveComputedStyle({ 'font-weight': fontWeight('bold') });
});
});

it('should render general header, data and paragraph elements with correct font-weight', () => {
labelElements
.filter((e) => !e.attributes.getNamedItem('detail'))
.forEach((e) => {
expect(e).toHaveComputedStyle({ 'font-weight': fontWeight('bold') });
});
it('should render detail data and paragraph elements with correct font-weight', () => {
labelElements
.filter((e) => !!e.attributes.getNamedItem('detail'))
.forEach((e) => {
expect(e).toHaveComputedStyle({ 'font-weight': fontWeight('normal') });
});
});
});
});

describe('when configured with selectable="true" and nested interactive element', () => {
const nestedInteractiveElements = ['kirby-checkbox', 'kirby-radio', 'kirby-toggle'];
nestedInteractiveElements.forEach((element) => {
it(`should not render native button when has nested ${element}`, async () => {
spectator = createHost(`<kirby-item selectable="true">
<${element}></${element}>
</kirby-item>
`);
ionItem = spectator.queryHost('ion-item');
await TestHelper.whenReady(ionItem);

it('should render detail data and paragraph elements with correct font-weight', () => {
labelElements
.filter((e) => !!e.attributes.getNamedItem('detail'))
.forEach((e) => {
expect(e).toHaveComputedStyle({ 'font-weight': fontWeight('normal') });
});
const nativePart = ionItem.shadowRoot.querySelector('[part="native"]');
expect(nativePart.tagName).not.toEqual('BUTTON');
});
});
});
});
28 changes: 28 additions & 0 deletions libs/designsystem/item/src/item.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ describe('ItemComponent', () => {
});
});

it('should not render a native button by default', async () => {
const ionItem = spectator.queryHost('ion-item');
await TestHelper.whenReady(ionItem);

const nativePart = ionItem.shadowRoot.querySelector('[part="native"]');
expect(nativePart.tagName).not.toEqual('BUTTON');
});

describe('when configured with size', () => {
describe('and size = xs', () => {
it('should have correct item height and padding', () => {
Expand Down Expand Up @@ -228,4 +236,24 @@ describe('ItemComponent', () => {
expect(spectator.element).toHaveComputedStyle({ 'pointer-events': 'none' });
});
});

describe('when configured with selectable', () => {
it('should not render a native button when selectable="false"', async () => {
spectator.setInput('selectable', false);
const ionItem = spectator.queryHost('ion-item');
await TestHelper.whenReady(ionItem);

const nativePart = ionItem.shadowRoot.querySelector('[part="native"]');
expect(nativePart.tagName).not.toEqual('BUTTON');
});

it('should render a native button when selectable="true"', async () => {
spectator.setInput('selectable', true);
const ionItem = spectator.queryHost('ion-item');
await TestHelper.whenReady(ionItem);

const nativePart = ionItem.shadowRoot.querySelector('[part="native"]');
expect(nativePart.tagName).toEqual('BUTTON');
});
});
});

0 comments on commit c03d9e4

Please sign in to comment.