refactor(elements/ino-control-item): migrate stencil e2e tests to spe…

…c test (#1308)

* split tests

* finish migration of ino-control-item tests

* format:fix

packages/elements/src/components/ino-control-item/ino-control-item.spec.ts

@@ -0,0 +1,71 @@
+import { newSpecPage, SpecPage } from '@stencil/core/testing';
+import { InoControlItem } from './ino-control-item';
+import { Checkbox } from '../ino-checkbox/ino-checkbox';
+import { Radio } from '../ino-radio/ino-radio';
+import { ListItem } from '../ino-list-item/ino-list-item';
+import { List } from '../ino-list/ino-list';
+import { listenForEvent } from '../../util/test-utils';
+
+const INO_CHECKBOX_ITEM = `<ino-list><ino-control-item role="checkbox" text="Some Item"></ino-control-item></ino-list>`;
+const INO_CHECKBOX_ITEM_CHECKED = `<ino-list><ino-control-item role="checkbox" text="Some Item" checked></ino-control-item></ino-list>`;
+const INO_CHECKBOX_ITEM_DISABLED = `<ino-list><ino-control-item role="checkbox" text="Some Item" disabled></ino-control-item></ino-list>`;
+const INO_RADIO_ITEM = `<ino-list><ino-control-item role="radio" text="Some Item"></ino-checkbox-item></ino-list>`;
+const INO_RADIO_ITEM_CHECKED = `<ino-list><ino-control-item role="radio" text="Some Item" checked></ino-control-item></ino-list>`;
+const INO_RADIO_ITEM_DISABLED = `<ino-list><ino-control-item role="radio" text="Some Item" disabled></ino-control-item></ino-list>`;
+
+describe('InoControlItem', () => {
+  let page: SpecPage;
+  let inoControlItem: HTMLInoControlItemElement;
+
+  const setupPage = async (html: string) => {
+    page = await newSpecPage({
+      components: [InoControlItem, List, ListItem, Checkbox, Radio],
+      html,
+    });
+    inoControlItem = page.body.querySelector(
+      'ino-control-item > ino-list-item',
+    );
+  };
+
+  it('should emit checkedChange event when clicked on checkbox with true as detail', async () => {
+    await setupPage(INO_CHECKBOX_ITEM);
+    const { assertEventDetails } = listenForEvent(page, 'checkedChange');
+    inoControlItem.click();
+    assertEventDetails(true);
+  });
+
+  it('should emit checkedChange event when clicked on radio-button with true as detail', async () => {
+    await setupPage(INO_RADIO_ITEM);
+    const { assertEventDetails } = listenForEvent(page, 'checkedChange');
+    inoControlItem.click();
+    assertEventDetails(true);
+  });
+
+  it('should emit checkedChange event with false as detail (radio)', async () => {
+    await setupPage(INO_CHECKBOX_ITEM_CHECKED);
+    const { assertEventDetails } = listenForEvent(page, 'checkedChange');
+    inoControlItem.click();
+    assertEventDetails(false);
+  });
+
+  it('should emit a checkedChange event with true as detail (radio)', async () => {
+    await setupPage(INO_RADIO_ITEM_CHECKED);
+    const { assertEventDetails } = listenForEvent(page, 'checkedChange');
+    inoControlItem.click();
+    assertEventDetails(true);
+  });
+
+  it('should not emit a checkedChange event if checkbox is disabled', async () => {
+    await setupPage(INO_CHECKBOX_ITEM_DISABLED);
+    const { eventSpy } = listenForEvent(page, 'checkedChange');
+    inoControlItem.click();
+    expect(eventSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not emit a checkedChange event if radio-button is disabled', async () => {
+    await setupPage(INO_RADIO_ITEM_DISABLED);
+    const { eventSpy } = listenForEvent(page, 'checkedChange');
+    inoControlItem.click();
+    expect(eventSpy).not.toHaveBeenCalled();
+  });
+});

packages/storybook/src/stories/ino-control-item/ino-control-item.spec.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+import { goToStory } from '../test-utils';
+
+test.describe('ino-control-item', () => {
+  test('should render with checkbox which can be checked', async ({ page }) => {
+    await goToStory(page, ['Structure', 'ino-control-item', 'default']);
+    const checkbox = page.locator('ino-checkbox');
+    const input = checkbox.locator('input[type="checkbox"]');
+    await expect(checkbox).toBeVisible();
+    await expect(input).not.toBeChecked();
+    await checkbox.click();
+    await expect(input).toBeChecked();
+  });
+
+  test('should render with radio which can be checked', async ({ page }) => {
+    await goToStory(page, ['Structure', 'ino-control-item', 'roles']);
+    const radio = page.locator('ino-radio');
+    const input = radio.locator('input[type="radio"]');
+    await expect(radio).toBeVisible();
+    await expect(input).not.toBeChecked();
+    await radio.click();
+    await expect(input).toBeChecked();
+  });
+});