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

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: `<ino-switch></ino-switch>`,
+    });
+    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();
+  });
+});

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);
+  });
+});