test(radio): migrate e2e tests to playwright (#25643)

core/src/components/radio-group/test/e2e.ts

@@ -1,88 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-/**
- * @param page the E2E page that contains the radio button
- * @param radioButtonId the id of the radio button to focus
- * @returns the checked property of the focused radio button
- */
-const selectRadio = async (page, radioButtonId: string, selectionMethod: 'keyboard' | 'mouse'): Promise<boolean> => {
-  const selector = `ion-radio#${radioButtonId}`;
-  if (selectionMethod === 'keyboard') {
-    await page.focus(selector);
-    await page.keyboard.press('Space');
-  } else if (selectionMethod === 'mouse') {
-    await page.click(selector);
-  }
-
-  await page.waitForChanges();
-
-  const radioGroup = await page.find(`ion-radio#${radioButtonId} >>> input`);
-  const checked = await radioGroup.getProperty('checked');
-  return checked;
-};
-
-describe('radio-group', () => {
-  it('Spacebar should not deselect without allowEmptySelection', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <ion-radio-group value="one" allow-empty-selection="false">
-        <ion-item>
-          <ion-label>One</ion-label>
-          <ion-radio id="one" value="one"></ion-radio>
-        </ion-item>
-      </ion-radio-group>
-    `);
-
-    const checked = await selectRadio(page, 'one', 'keyboard');
-
-    expect(checked).toBe(true);
-  });
-
-  it('Spacebar should deselect with allowEmptySelection', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <ion-radio-group value="one" allow-empty-selection="true">
-        <ion-item>
-          <ion-label>One</ion-label>
-          <ion-radio id="one" value="one"></ion-radio>
-        </ion-item>
-      </ion-radio-group>
-    `);
-
-    const checked = await selectRadio(page, 'one', 'keyboard');
-
-    expect(checked).toBe(false);
-  });
-
-  it('Click should not deselect without allowEmptySelection', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <ion-radio-group value="one" allow-empty-selection="false">
-        <ion-item>
-          <ion-label>One</ion-label>
-          <ion-radio id="one" value="one"></ion-radio>
-        </ion-item>
-      </ion-radio-group>
-    `);
-
-    const checked = await selectRadio(page, 'one', 'mouse');
-
-    expect(checked).toBe(true);
-  });
-
-  it('Click should deselect with allowEmptySelection', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <ion-radio-group value="one" allow-empty-selection="true">
-        <ion-item>
-          <ion-label>One</ion-label>
-          <ion-radio id="one" value="one"></ion-radio>
-        </ion-item>
-      </ion-radio-group>
-    `);
-
-    const checked = await selectRadio(page, 'one', 'mouse');
-
-    expect(checked).toBe(false);
-  });
-});

core/src/components/radio-group/test/radio-group.e2e.ts

@@ -0,0 +1,133 @@
+import { expect } from '@playwright/test';
+import type { Locator } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+test.describe('radio-group', () => {
+  // eslint-disable-next-line no-empty-pattern
+  test.beforeEach(({}, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs RTL logic.');
+  });
+
+  test.describe('radio-group: interaction', () => {
+    let radioFixture: RadioFixture;
+
+    test.beforeEach(({ page }) => {
+      radioFixture = new RadioFixture(page);
+    });
+
+    test('spacebar should not deselect without allowEmptySelection', async ({ page }) => {
+      await page.setContent(`
+        <ion-radio-group value="one" allow-empty-selection="false">
+          <ion-item>
+            <ion-label>One</ion-label>
+            <ion-radio id="one" value="one"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `);
+
+      await radioFixture.checkRadio('keyboard');
+      await radioFixture.expectChecked(true);
+    });
+
+    test('spacebar should deselect with allowEmptySelection', async ({ page }) => {
+      await page.setContent(`
+        <ion-radio-group value="one" allow-empty-selection="true">
+          <ion-item>
+            <ion-label>One</ion-label>
+            <ion-radio id="one" value="one"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `);
+
+      await radioFixture.checkRadio('keyboard');
+      await radioFixture.expectChecked(false);
+    });
+
+    test('click should not deselect without allowEmptySelection', async ({ page }) => {
+      await page.setContent(`
+        <ion-radio-group value="one" allow-empty-selection="false">
+          <ion-item>
+            <ion-label>One</ion-label>
+            <ion-radio id="one" value="one"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `);
+
+      await radioFixture.checkRadio('mouse');
+      await radioFixture.expectChecked(true);
+    });
+
+    test('click should deselect with allowEmptySelection', async ({ page }) => {
+      await page.setContent(`
+        <ion-radio-group value="one" allow-empty-selection="true">
+          <ion-item>
+            <ion-label>One</ion-label>
+            <ion-radio id="one" value="one"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `);
+
+      await radioFixture.checkRadio('mouse');
+      await radioFixture.expectChecked(false);
+    });
+  });
+  test.describe('radio-group: state', () => {
+    test('radio should remain checked after being removed/readded to the dom', async ({ page }) => {
+      await page.goto('/src/components/radio-group/test/search');
+
+      const radioGroup = page.locator('ion-radio-group');
+      const radio = page.locator('ion-radio[value=two]');
+
+      // select radio
+      await radio.click();
+      await expect(radio.locator('input')).toHaveJSProperty('checked', true);
+
+      // filter radio so it is not in DOM
+      await page.fill('ion-searchbar input', 'zero');
+      await page.waitForChanges();
+      expect(radio).toBeHidden();
+
+      // ensure radio group has the same value
+      expect(radioGroup).toHaveJSProperty('value', 'two');
+
+      // clear the search so the radio appears
+      await page.fill('ion-searchbar input', '');
+      await page.waitForChanges();
+
+      // ensure that the new radio instance is still checked
+      await expect(radio.locator('input')).toHaveJSProperty('checked', true);
+    });
+  });
+});
+
+class RadioFixture {
+  readonly page: E2EPage;
+
+  private radio!: Locator;
+
+  constructor(page: E2EPage) {
+    this.page = page;
+  }
+
+  async checkRadio(method: 'keyboard' | 'mouse', selector = 'ion-radio') {
+    const { page } = this;
+    const radio = (this.radio = page.locator(selector));
+
+    if (method === 'keyboard') {
+      await radio.focus();
+      await page.keyboard.press('Space');
+    } else {
+      await radio.click();
+    }
+
+    await page.waitForChanges();
+
+    return radio;
+  }
+
+  async expectChecked(state: boolean) {
+    const { radio } = this;
+    await expect(radio.locator('input')).toHaveJSProperty('checked', state);
+  }
+}

core/src/components/radio-group/test/search/e2e.ts

@@ -1,27 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('radio-group: search', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/radio-group/test/search?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const radioTwo = await page.find('ion-radio[value=two]');
-  await radioTwo.click();
-
-  const value = await page.find('#value');
-  expect(value.textContent).toEqual('Current value: two');
-
-  const searchbar = await page.find('ion-searchbar');
-  await searchbar.click();
-  await page.keyboard.type('zero');
-
-  const valueAgain = await page.find('#value');
-  expect(valueAgain.textContent).toEqual('Current value: two');
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});

core/src/components/radio-group/test/standalone/e2e.ts

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

core/src/components/radio-group/test/standalone/index.html

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Radio Group - Standalone</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/core.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-radio-group value="danger">
-      <ion-radio aria-label="Default"></ion-radio>
-
-      <ion-radio aria-label="Primary" color="primary"></ion-radio>
-      <ion-radio aria-label="Secondary" color="secondary"></ion-radio>
-      <ion-radio aria-label="Tertiary" color="tertiary"></ion-radio>
-      <ion-radio aria-label="Success" color="success"></ion-radio>
-      <ion-radio aria-label="Warning" color="warning"></ion-radio>
-      <ion-radio aria-label="Danger" color="danger" value="danger"></ion-radio>
-      <ion-radio aria-label="Light" color="light"></ion-radio>
-      <ion-radio aria-label="Medium" color="medium"></ion-radio>
-      <ion-radio aria-label="Dark" color="dark"></ion-radio>
-
-      <ion-radio aria-label="Default" disabled></ion-radio>
-      <ion-radio aria-label="Secondary" color="secondary" disabled></ion-radio>
-    </ion-radio-group>
-
-    <p>
-      allow-empty-selection="true":&nbsp;
-      <ion-radio-group allow-empty-selection="true">
-        <ion-radio aria-label="Primary" color="primary" value="1"></ion-radio>
-        <ion-radio aria-label="Secondary" color="secondary" value="2"></ion-radio>
-        <ion-radio aria-label="Tertiary" color="tertiary" value="3"></ion-radio>
-      </ion-radio-group>
-    </p>
-
-    <style>
-      /* to be able to see the radio buttons */
-      .radio-ios {
-        border: 1px solid #dedede;
-        padding: 10px 5px;
-      }
-    </style>
-  </body>
-</html>

core/src/components/radio/test/a11y/e2e.ts

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

core/src/components/radio/test/a11y/index.html

@@ -23,35 +23,11 @@
       </ion-header>
 
       <ion-content id="content" class="outer-content">
-        <div class="native-radio-group">
-          <p>Select a maintenance drone (native):</p>
-
-          <div>
-            <input type="radio" id="huey" name="drone" value="huey" checked />
-            <label for="huey">Huey</label>
-          </div>
-
-          <div>
-            <input type="radio" id="dewey" name="drone" value="dewey" />
-            <label for="dewey">Dewey</label>
-          </div>
-
-          <div>
-            <input type="radio" id="fooey" value="fooey" disabled />
-            <label for="fooey">Fooey</label>
-          </div>
-
-          <div>
-            <input type="radio" id="louie" name="drone" value="louie" />
-            <label for="louie">Louie</label>
-          </div>
-        </div>
-
         <ion-list>
           <ion-list-header>
             <ion-label> Select a maintenance drone: </ion-label>
           </ion-list-header>
-          <ion-radio-group value="huey">
+          <ion-radio-group id="first-group" value="huey">
             <ion-item>
               <ion-label>Huey</ion-label>
               <ion-radio slot="start" value="huey"></ion-radio>
@@ -75,7 +51,7 @@
         </ion-list>
 
         <ion-list>
-          <ion-radio-group value="huey">
+          <ion-radio-group id="second-group" value="huey">
             <ion-item>
               <ion-label>Huey</ion-label>
               <ion-radio slot="start" value="huey" color="danger"></ion-radio>

core/src/components/radio/test/a11y/radio.e2e.ts

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('radio: a11y', () => {
+  // eslint-disable-next-line no-empty-pattern
+  test.beforeEach(({}, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs RTL logic.');
+  });
+  test('tabbing should switch between radio groups', async ({ page, browserName }) => {
+    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+    await page.goto(`/src/components/radio/test/a11y`);
+
+    const firstGroupRadios = page.locator('#first-group ion-radio');
+    const secondGroupRadios = page.locator('#second-group ion-radio');
+
+    await page.keyboard.press(tabKey);
+    await expect(firstGroupRadios.nth(0)).toBeFocused();
+
+    await page.keyboard.press(tabKey);
+    await expect(secondGroupRadios.nth(0)).toBeFocused();
+
+    await page.keyboard.press(`Shift+${tabKey}`);
+    await expect(firstGroupRadios.nth(0)).toBeFocused();
+  });
+  test('using arrow keys should move between enabled radios within group', async ({ page, browserName }) => {
+    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+    await page.goto(`/src/components/radio/test/a11y`);
+
+    const firstGroupRadios = page.locator('#first-group ion-radio');
+
+    await page.keyboard.press(tabKey);
+    await expect(firstGroupRadios.nth(0)).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(firstGroupRadios.nth(1)).toBeFocused();
+
+    // firstGroupRadios.nth(2) is disabled so it should not receive focus.
+    await page.keyboard.press('ArrowDown');
+    await expect(firstGroupRadios.nth(3)).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(firstGroupRadios.nth(0)).toBeFocused();
+
+    await page.keyboard.press('ArrowUp');
+    await expect(firstGroupRadios.nth(3)).toBeFocused();
+  });
+});

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

@@ -1,27 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('radio: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/radio/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-
-  const groupedRadio = await page.find('#groupedRadio');
-  await groupedRadio.click();
-  expect(groupedRadio).toHaveClass('radio-checked');
-
-  const ungroupedRadio = await page.find('#ungroupedRadio');
-  await ungroupedRadio.click();
-  expect(ungroupedRadio).toHaveClass('radio-checked');
-});
-
-test('radio:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/radio/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -0,0 +1,140 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('radio: rendering', () => {
+  test('should correctly render an unchecked radio group', async ({ page }) => {
+    await page.setContent(`
+      <ion-radio-group>
+        <ion-item>
+          <ion-label>Pepperoni</ion-label>
+          <ion-radio slot="start" value="pepperoni"></ion-radio>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Sausage</ion-label>
+          <ion-radio slot="start" value="sausage"></ion-radio>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Pineapple</ion-label>
+          <ion-radio slot="start" value="pineapple"></ion-radio>
+        </ion-item>
+      </ion-radio-group>
+    `);
+
+    const radioGroup = page.locator('ion-radio-group');
+    expect(await radioGroup.screenshot()).toMatchSnapshot(`radio-group-unchecked-${page.getSnapshotSettings()}.png`);
+  });
+  test('should correctly render a checked radio group', async ({ page }) => {
+    await page.setContent(`
+      <ion-radio-group value="sausage">
+        <ion-item>
+          <ion-label>Pepperoni</ion-label>
+          <ion-radio slot="start" value="pepperoni"></ion-radio>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Sausage</ion-label>
+          <ion-radio slot="start" value="sausage"></ion-radio>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Pineapple</ion-label>
+          <ion-radio slot="start" value="pineapple"></ion-radio>
+        </ion-item>
+      </ion-radio-group>
+    `);
+
+    const radioGroup = page.locator('ion-radio-group');
+    expect(await radioGroup.screenshot()).toMatchSnapshot(`radio-group-checked-${page.getSnapshotSettings()}.png`);
+  });
+  test('should allow shadow parts to be styled', async ({ page }) => {
+    await page.setContent(`
+      <ion-radio-group value="sausage">
+        <ion-item>
+          <ion-label>Pepperoni</ion-label>
+          <ion-radio slot="start" value="pepperoni"></ion-radio>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Sausage</ion-label>
+          <ion-radio slot="start" value="sausage"></ion-radio>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Pineapple</ion-label>
+          <ion-radio slot="start" value="pineapple"></ion-radio>
+        </ion-item>
+      </ion-radio-group>
+
+      <style>
+        ion-radio::part(container) {
+          background: rgba(255, 0, 0, 0.3);
+          border-color: darkred;
+        }
+
+        ion-radio::part(mark) {
+          background: hotpink;
+        }
+      </style>
+    `);
+
+    const radioGroup = page.locator('ion-radio-group');
+    expect(await radioGroup.screenshot()).toMatchSnapshot(`radio-group-part-${page.getSnapshotSettings()}.png`);
+  });
+  test('should apply color correctly', async ({ page }) => {
+    await page.setContent(`
+      <ion-radio slot="start" value="pepperoni" color="success"></ion-radio>
+    `);
+
+    const radio = page.locator('ion-radio');
+    await radio.click();
+    await page.waitForChanges();
+    expect(await radio.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `radio-color-${page.getSnapshotSettings()}.png`
+    );
+  });
+});
+
+test.describe('radio: interaction', () => {
+  // eslint-disable-next-line no-empty-pattern
+  test.beforeEach(({}, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs RTL logic.');
+  });
+  test('radio should be checked when activated', async ({ page }) => {
+    await page.setContent(`
+      <ion-radio-group>
+        <ion-item>
+          <ion-label>Pepperoni</ion-label>
+          <ion-radio slot="start" value="pepperoni"></ion-radio>
+        </ion-item>
+      </ion-radio-group>
+    `);
+
+    const radio = page.locator('ion-radio');
+    const radioGroup = page.locator('ion-radio-group');
+
+    await expect(radio.locator('input')).toHaveJSProperty('checked', false);
+    await expect(radioGroup).toHaveJSProperty('value', undefined);
+
+    await radio.click();
+    await page.waitForChanges();
+
+    await expect(radio.locator('input')).toHaveJSProperty('checked', true);
+    await expect(radioGroup).toHaveJSProperty('value', 'pepperoni');
+  });
+  test('radio should be checked when activated even without a radio group', async ({ page }) => {
+    await page.setContent(`
+      <ion-radio slot="start" value="pepperoni"></ion-radio>
+    `);
+
+    const radio = page.locator('ion-radio');
+
+    await expect(radio.locator('input')).toHaveJSProperty('checked', false);
+
+    await radio.click();
+    await page.waitForChanges();
+
+    await expect(radio.locator('input')).toHaveJSProperty('checked', true);
+  });
+});

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

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

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

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