test(toggle): migrate tests to Playwright (#25394)

core/src/components/toggle/test/basic/e2e.ts

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('toggle:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/toggle/test/basic/index.html

@@ -27,6 +27,11 @@
 
       <ion-content id="content">
         <ion-list>
+          <ion-item>
+            <ion-label>Orange</ion-label>
+            <ion-toggle id="orange" slot="start" name="orange"></ion-toggle>
+          </ion-item>
+
           <ion-item>
             <ion-label>Apple</ion-label>
             <ion-toggle slot="start" name="apple" checked></ion-toggle>
@@ -44,7 +49,7 @@
 
           <ion-item>
             <ion-label>Grape, checked, disabled</ion-label>
-            <ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
+            <ion-toggle slot="start" id="grapeChecked" value="grape" name="grape" checked disabled></ion-toggle>
           </ion-item>
 
           <ion-item>

core/src/components/toggle/test/basic/toggle.e2e.ts

@@ -0,0 +1,95 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: basic', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/basic`);
+  });
+
+  test('should not have visual regressions', async ({ page }) => {
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-diff-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should have proper class and aria role when checked', async ({ page }) => {
+    const toggle = page.locator('#orange');
+
+    expect(toggle).not.toHaveClass(/toggle-checked/);
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(toggle).toHaveClass(/toggle-checked/);
+    expect(toggle).toHaveAttribute('aria-checked', 'true');
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(toggle).not.toHaveClass(/toggle-checked/);
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+  });
+
+  test('should fire change event with detail', async ({ page }) => {
+    const toggle = page.locator('#orange');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(ionChange).toHaveReceivedEventDetail({
+      checked: true,
+      value: 'on',
+    });
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(ionChange).toHaveReceivedEventDetail({
+      checked: false,
+      value: 'on',
+    });
+  });
+
+  test('should fire change event if checked prop is changed directly', async ({ page }) => {
+    const toggle = page.locator('#orange');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    await toggle.evaluate((el: HTMLIonToggleElement) => (el.checked = true));
+    await page.waitForChanges();
+
+    expect(ionChange).toHaveReceivedEvent();
+  });
+
+  test('should pass properties down to hidden input', async ({ page }) => {
+    const toggle = page.locator('#grapeChecked');
+
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveJSProperty('value', 'grape');
+    expect(toggle).toHaveJSProperty('name', 'grape');
+
+    const hiddenInput = page.locator('#grapeChecked input[type=hidden]');
+
+    expect(hiddenInput).toBeDisabled();
+    expect(hiddenInput).toHaveJSProperty('value', 'grape');
+    expect(hiddenInput).toHaveJSProperty('name', 'grape');
+
+    await toggle.evaluate((el: HTMLIonToggleElement) => {
+      el.disabled = false;
+      el.checked = false;
+      el.value = 'new-value';
+      el.name = 'new-name';
+    });
+
+    await page.waitForChanges();
+
+    expect(hiddenInput).not.toBeDisabled();
+    expect(hiddenInput).toHaveJSProperty('name', 'new-name');
+
+    // shouldn't have a value because it's unchecked
+    // note: using toHaveJSProperty to check empty string triggers error for some reason
+    const value = await hiddenInput.evaluate((el: HTMLInputElement) => el.value);
+    expect(value).toBe('');
+  });
+});

core/src/components/toggle/test/e2e.ts

@@ -1,154 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('toggle', () => {
-  it('should create standalone, unchecked by default', async () => {
-    // create a new e2e test page
-    const page = await newE2EPage();
-
-    // set the page content
-    await page.setContent(`
-      <ion-toggle class="some-class"></ion-toggle>
-    `);
-
-    // add an event spy to the page
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    // find the elemnt in the page
-    const toggle = await page.find('ion-toggle');
-
-    // check it has the expected css classes
-    expect(toggle).toHaveClass('some-class');
-    expect(toggle).toHaveClass('hydrated');
-
-    // toggle should not have checked css
-    expect(toggle).not.toHaveClass('toggle-checked');
-
-    // set checked property
-    toggle.setProperty('checked', true);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // make sure the property was updated
-    const checkedValue1 = await toggle.getProperty('checked');
-    expect(checkedValue1).toBe(true);
-
-    // toggle should have checked css
-    expect(toggle).toHaveClass('toggle-checked');
-
-    // make sure we received the correct event detail
-    expect(ionChange).toHaveReceivedEventDetail({
-      checked: true,
-      value: 'on',
-    });
-
-    // set unchecked
-    toggle.setProperty('checked', false);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // make sure the property was updated
-    const checkedValue2 = await toggle.getProperty('checked');
-    expect(checkedValue2).toBe(false);
-
-    // toggle should not be checked
-    expect(toggle).not.toHaveClass('toggle-checked');
-
-    // we should have received the event two times now
-    expect(ionChange).toHaveReceivedEventTimes(2);
-
-    // make sure we received the correct event detail
-    expect(ionChange).toHaveReceivedEventDetail({
-      checked: false,
-      value: 'on',
-    });
-  });
-
-  it('should create standalone, checked by default', async () => {
-    const page = await newE2EPage({
-      html: `
-      <ion-toggle checked></ion-toggle>
-    `,
-    });
-
-    // find the elemnt in the page
-    const toggle = await page.find('ion-toggle');
-
-    // spy on the ionChange event
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    // check aria
-    expect(toggle).toEqualAttribute('aria-checked', 'true');
-
-    // find the hidden input in the light dom
-    const hiddenInput = await page.find('ion-toggle input[type=hidden]');
-
-    // hidden input property should have value
-    expect(hiddenInput).toEqualAttribute('value', 'on');
-
-    // hidden in put should have aux-input class
-    expect(hiddenInput).toHaveClass('aux-input');
-
-    // set checked true again, no actual change
-    toggle.setProperty('checked', true);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // shouldn't have fired the ionChange event cuz it didn't change
-    expect(ionChange).not.toHaveReceivedEvent();
-
-    // uncheck
-    toggle.setProperty('checked', false);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // toggle should not be checked
-    const checkedValue2 = await toggle.getProperty('checked');
-    expect(checkedValue2).toBe(false);
-
-    // hidden input property should no value
-    expect(toggle).toEqualAttribute('aria-checked', 'false');
-
-    expect(ionChange).toHaveReceivedEventTimes(1);
-
-    expect(ionChange).toHaveReceivedEventDetail({
-      checked: false,
-      value: 'on',
-    });
-  });
-
-  it('should pass properties down to hidden input', async () => {
-    const page = await newE2EPage({
-      html: `
-      <ion-toggle disabled checked value="coding" name="primary"></ion-toggle>
-    `,
-    });
-
-    const toggle = await page.find('ion-toggle');
-
-    expect(await toggle.getProperty('disabled')).toBe(true);
-    expect(await toggle.getProperty('checked')).toBe(true);
-    expect(await toggle.getProperty('value')).toBe('coding');
-    expect(await toggle.getProperty('name')).toBe('primary');
-
-    const hiddenInput = await page.find('ion-toggle input[type=hidden]');
-
-    expect(await hiddenInput.getProperty('disabled')).toBe(true);
-    expect(await hiddenInput.getProperty('value')).toBe('coding');
-    expect(await hiddenInput.getProperty('name')).toBe('primary');
-
-    toggle.setProperty('disabled', false);
-    toggle.setProperty('checked', false);
-    toggle.setProperty('value', 'design');
-    toggle.setProperty('name', 'secondary');
-
-    await page.waitForChanges();
-
-    expect(await hiddenInput.getProperty('disabled')).toBe(false);
-    expect(await hiddenInput.getProperty('value')).toBe('');
-    expect(await hiddenInput.getProperty('name')).toBe('secondary');
-  });
-});

core/src/components/toggle/test/rtl/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: RTL', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/rtl?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/toggle/test/rtl/index.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Toggle - RTL</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Toggle - RTL</ion-title>
-          <ion-buttons slot="primary">
-            <ion-toggle aria-label="Toggle"></ion-toggle>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-list>
-          <ion-item>
-            <ion-label>Toggle</ion-label>
-            <ion-toggle dir="rtl" slot="start" name="item-1" checked></ion-toggle>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>

core/src/components/toggle/test/sizes/e2e.ts

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: sizes', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/sizes?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('toggle:rtl: sizes', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/sizes?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/toggle/test/sizes/toggle.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: sizes', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/sizes`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-sizes-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/toggle/test/standalone/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/toggle/test/standalone/toggle.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: standalone', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/standalone`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-standalone-diff-${page.getSnapshotSettings()}.png`);
+  });
+});