From d419387ad32d3dd29377762f77b846f5e7a67591 Mon Sep 17 00:00:00 2001 From: Benjamin Pagelsdorf Date: Tue, 12 Mar 2024 14:23:45 +0100 Subject: [PATCH] refactor(elements/ino-control-item): migrate stencil e2e tests to spec test (#1308) * split tests * finish migration of ino-control-item tests * format:fix --- .../ino-control-item/ino-control-item.e2e.ts | 100 ------------------ .../ino-control-item/ino-control-item.spec.ts | 71 +++++++++++++ .../ino-control-item/ino-control-item.spec.ts | 24 +++++ 3 files changed, 95 insertions(+), 100 deletions(-) delete mode 100644 packages/elements/src/components/ino-control-item/ino-control-item.e2e.ts create mode 100644 packages/elements/src/components/ino-control-item/ino-control-item.spec.ts create mode 100644 packages/storybook/src/stories/ino-control-item/ino-control-item.spec.ts diff --git a/packages/elements/src/components/ino-control-item/ino-control-item.e2e.ts b/packages/elements/src/components/ino-control-item/ino-control-item.e2e.ts deleted file mode 100644 index 41b4810b47..0000000000 --- a/packages/elements/src/components/ino-control-item/ino-control-item.e2e.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { setupPageWithContent } from '../../util/e2etests-setup'; - -const INO_CHECKBOX_ITEM = ``; -const INO_CHECKBOX_ITEM_CHECKED = ``; -const INO_CHECKBOX_ITEM_DISABLED = ``; -const INO_RADIO_ITEM = ``; -const INO_RADIO_ITEM_CHECKED = ``; -const INO_RADIO_ITEM_DISABLED = ``; - -describe('InoControlItem', () => { - describe('Properties', () => { - it('should render with an unchecked checkbox', async () => { - const page = await setupPageWithContent(INO_CHECKBOX_ITEM); - const input = await page.find('ino-checkbox'); - expect(input).toBeDefined(); - const checked = await input.getProperty('checked'); - expect(checked).toBeFalsy(); - }); - - it('should render with an unchecked radio-button', async () => { - const page = await setupPageWithContent(INO_RADIO_ITEM); - const input = await page.find('ino-radio'); - expect(input).toBeDefined(); - const checked = await input.getProperty('checked'); - expect(checked).toBeFalsy(); - }); - - it('should render with checked checkbox', async () => { - const page = await setupPageWithContent(INO_CHECKBOX_ITEM_CHECKED); - const input = await page.find('ino-checkbox'); - const checked = await input.getProperty('checked'); - expect(checked).toBeTruthy(); - }); - - it('should render with checked radio-button', async () => { - const page = await setupPageWithContent(INO_RADIO_ITEM_CHECKED); - const input = await page.find('ino-radio'); - const checked = await input.getProperty('checked'); - expect(checked).toBeTruthy(); - }); - }); - - describe('Events', () => { - it('should emit checkedChange event when clicked on checkbox with true as detail', async () => { - const page = await setupPageWithContent(INO_CHECKBOX_ITEM); - - const clickSpy = await page.spyOnEvent('checkedChange'); - const inoControlItem = await page.find('ino-control-item'); - await inoControlItem.click(); - expect(clickSpy).toHaveReceivedEventTimes(1); - expect(clickSpy).toHaveReceivedEventDetail(true); - }); - - it('should emit checkedChange event when clicked on radio-button with true as detail', async () => { - const page = await setupPageWithContent(INO_RADIO_ITEM); - - const clickSpy = await page.spyOnEvent('checkedChange'); - const inoControlItem = await page.find('ino-control-item'); - await inoControlItem.click(); - expect(clickSpy).toHaveReceivedEventTimes(1); - expect(clickSpy).toHaveReceivedEventDetail(true); - }); - - it('should emit checkedChange event with false as detail (radio)', async () => { - const page = await setupPageWithContent(INO_CHECKBOX_ITEM_CHECKED); - - const clickSpy = await page.spyOnEvent('checkedChange'); - const inoControlItem = await page.find('ino-control-item'); - await inoControlItem.click(); - expect(clickSpy).toHaveReceivedEventDetail(false); - }); - - it('should emit a checkedChange event with true as detail (radio)', async () => { - const page = await setupPageWithContent(INO_RADIO_ITEM_CHECKED); - - const clickSpy = await page.spyOnEvent('checkedChange'); - const inoControlItem = await page.find('ino-control-item'); - await inoControlItem.click(); - expect(clickSpy).toHaveReceivedEventDetail(true); - }); - - it('should not emit a checkedChange event if checkbox is disabled', async () => { - const page = await setupPageWithContent(INO_CHECKBOX_ITEM_DISABLED); - - const clickSpy = await page.spyOnEvent('checkedChange'); - const inoControlItem = await page.find('ino-control-item'); - await inoControlItem.click(); - expect(clickSpy).not.toHaveReceivedEvent(); - }); - - it('should not emit a checkedChange event if radio-button is disabled', async () => { - const page = await setupPageWithContent(INO_RADIO_ITEM_DISABLED); - - const clickSpy = await page.spyOnEvent('checkedChange'); - const inoControlItem = await page.find('ino-control-item'); - await inoControlItem.click(); - expect(clickSpy).not.toHaveReceivedEvent(); - }); - }); -}); diff --git a/packages/elements/src/components/ino-control-item/ino-control-item.spec.ts b/packages/elements/src/components/ino-control-item/ino-control-item.spec.ts new file mode 100644 index 0000000000..5a8aa3209f --- /dev/null +++ b/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 = ``; +const INO_CHECKBOX_ITEM_CHECKED = ``; +const INO_CHECKBOX_ITEM_DISABLED = ``; +const INO_RADIO_ITEM = ``; +const INO_RADIO_ITEM_CHECKED = ``; +const INO_RADIO_ITEM_DISABLED = ``; + +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(); + }); +}); diff --git a/packages/storybook/src/stories/ino-control-item/ino-control-item.spec.ts b/packages/storybook/src/stories/ino-control-item/ino-control-item.spec.ts new file mode 100644 index 0000000000..6de394c964 --- /dev/null +++ b/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(); + }); +});