From 11ac034175952c88112047b2da71021163f59862 Mon Sep 17 00:00:00 2001 From: Benjamin Pagelsdorf Date: Fri, 5 Apr 2024 10:32:18 +0200 Subject: [PATCH] refactor(elements/ino-switch): migrate stencil e2e tests to playwright (#1356) Part of #1258 ## Proposed Changes - migrate existing stencil e2e tests to jest spec tests - add some playwright tests --- .../components/ino-switch/ino-switch.e2e.ts | 54 ----------------- .../components/ino-switch/ino-switch.spec.ts | 58 +++++++++++++++++++ .../src/stories/ino-switch/ino-switch.spec.ts | 24 ++++++++ 3 files changed, 82 insertions(+), 54 deletions(-) delete mode 100644 packages/elements/src/components/ino-switch/ino-switch.e2e.ts create mode 100644 packages/elements/src/components/ino-switch/ino-switch.spec.ts create mode 100644 packages/storybook/src/stories/ino-switch/ino-switch.spec.ts diff --git a/packages/elements/src/components/ino-switch/ino-switch.e2e.ts b/packages/elements/src/components/ino-switch/ino-switch.e2e.ts deleted file mode 100644 index a36456ff25..0000000000 --- a/packages/elements/src/components/ino-switch/ino-switch.e2e.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { setupPageWithContent } from '../../util/e2etests-setup'; -import { E2EElement, E2EPage } from '@stencil/core/testing'; - -describe('InoSwitch', () => { - let page: E2EPage; - let inoSwitch: E2EElement; - - beforeEach(async () => { - page = await setupPageWithContent(``); - inoSwitch = await page.find('ino-switch'); - }); - - it('should fire checkedChange event on click', async () => { - const checkedChange = await page.spyOnEvent('checkedChange'); - expect(checkedChange).not.toHaveReceivedEvent(); - await inoSwitch.click(); - await page.waitForChanges(); - expect(checkedChange).toHaveReceivedEvent(); - }); - - it('should fire checkedChange event with true if the checked property is not set', async () => { - const checkedChange = await page.spyOnEvent('checkedChange'); - await inoSwitch.click(); - await page.waitForChanges(); - expect(checkedChange).toHaveReceivedEventDetail(true); - }); - - it('should fire checkedChange event with true if the checked property is set to false', async () => { - const checkedChange = await page.spyOnEvent('checkedChange'); - inoSwitch.setAttribute('checked', false); - await page.waitForChanges(); - await inoSwitch.click(); - await page.waitForChanges(); - expect(checkedChange).toHaveReceivedEventDetail(true); - }); - - it('should fire checkedChange event with false if the checked property is set to true', async () => { - const checkedChange = await page.spyOnEvent('checkedChange'); - inoSwitch.setAttribute('checked', true); - await page.waitForChanges(); - await inoSwitch.click(); - await page.waitForChanges(); - expect(checkedChange).toHaveReceivedEventDetail(false); - }); - - it('should not fire a checkedChange event if disabled is true', async () => { - const checkedChange = await page.spyOnEvent('checkedChange'); - inoSwitch.setAttribute('disabled', 'true'); - await page.waitForChanges(); - await inoSwitch.click(); - await page.waitForChanges(); - expect(checkedChange).not.toHaveReceivedEvent(); - }); -}); diff --git a/packages/elements/src/components/ino-switch/ino-switch.spec.ts b/packages/elements/src/components/ino-switch/ino-switch.spec.ts new file mode 100644 index 0000000000..28f404745e --- /dev/null +++ b/packages/elements/src/components/ino-switch/ino-switch.spec.ts @@ -0,0 +1,58 @@ +import { newSpecPage, SpecPage } from '@stencil/core/testing'; +import { Switch } from './ino-switch'; +import { listenForEvent } from '../../util/test-utils'; + +describe('InoSwitch', () => { + let page: SpecPage; + let inoSwitch: HTMLInoSwitchElement; + + beforeEach(async () => { + page = await newSpecPage({ + components: [Switch], + html: ``, + }); + inoSwitch = page.body.querySelector('ino-switch'); + }); + + it('should fire checkedChange event on click', async () => { + const { eventSpy } = listenForEvent(page, 'checkedChange'); + expect(eventSpy).not.toHaveBeenCalled(); + inoSwitch.click(); + await page.waitForChanges(); + expect(eventSpy).toHaveBeenCalled(); + }); + + it('should fire checkedChange event with true if the checked property is not set', async () => { + const { assertEventDetails } = listenForEvent(page, 'checkedChange'); + inoSwitch.click(); + await page.waitForChanges(); + assertEventDetails(true); + }); + + it('should fire checkedChange event with true if the checked property is set to false', async () => { + const { assertEventDetails } = listenForEvent(page, 'checkedChange'); + inoSwitch.setAttribute('checked', 'false'); + await page.waitForChanges(); + inoSwitch.click(); + await page.waitForChanges(); + assertEventDetails(true); + }); + + it('should fire checkedChange event with false if the checked property is set to true', async () => { + const { assertEventDetails } = listenForEvent(page, 'checkedChange'); + inoSwitch.setAttribute('checked', 'true'); + await page.waitForChanges(); + inoSwitch.click(); + await page.waitForChanges(); + assertEventDetails(false); + }); + + it('should not fire a checkedChange event if disabled is true', async () => { + const { eventSpy } = listenForEvent(page, 'checkedChange'); + inoSwitch.setAttribute('disabled', 'true'); + await page.waitForChanges(); + inoSwitch.click(); + await page.waitForChanges(); + expect(eventSpy).not.toHaveBeenCalled(); + }); +}); diff --git a/packages/storybook/src/stories/ino-switch/ino-switch.spec.ts b/packages/storybook/src/stories/ino-switch/ino-switch.spec.ts new file mode 100644 index 0000000000..db56bd0137 --- /dev/null +++ b/packages/storybook/src/stories/ino-switch/ino-switch.spec.ts @@ -0,0 +1,24 @@ +import { expect, test } from '@playwright/test'; +import { goToStory } from '../test-utils'; + +test.describe('ino-switch', () => { + test('should be checked', async ({ page }) => { + await goToStory(page, ['Input', 'ino-switch', 'default']); + const inoSwitch = page.locator('ino-switch'); + const input = inoSwitch.locator('input[type=hidden]'); + + await expect(input).toHaveJSProperty('checked', false); + await inoSwitch.click(); + await expect(input).toHaveJSProperty('checked', true); + }); + + test('should be stay unchecked if disabled', async ({ page }) => { + await goToStory(page, ['Input', 'ino-switch', 'disabled']); + const inoSwitch = page.locator('ino-switch'); + const input = inoSwitch.locator('input[type=hidden]'); + + await expect(input).toHaveJSProperty('checked', false); + await inoSwitch.click(); + await expect(input).toHaveJSProperty('checked', false); + }); +});