test(item): migrate tests to playwright (#25479)

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

@@ -1,14 +0,0 @@
-import { AxePuppeteer } from '@axe-core/puppeteer';
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item: axe', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/a11y?ionic:_testing=true',
-  });
-
-  const results = await new AxePuppeteer(page)
-    // TODO(FW-404): Re-enable rule once select is updated to avoid nested-interactive
-    .disableRules('nested-interactive')
-    .analyze();
-  expect(results.violations.length).toEqual(0);
-});

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

@@ -0,0 +1,15 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: axe', () => {
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/item/test/a11y`);
+
+    const results = await new AxeBuilder({ page })
+      // TODO(FW-404): Re-enable rule once select is updated to avoid nested-interactive
+      .disableRules('nested-interactive')
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+});

core/src/components/item/test/alignment/e2e.ts

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

core/src/components/item/test/alignment/index.html

@@ -25,10 +25,6 @@
       <ion-content>
         <ion-list>
           <ion-list-header>Leading Icons</ion-list-header>
-          <ion-item>
-            <ion-icon slot="start" name="time"></ion-icon>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-icon slot="start" name="radio-button-off"></ion-icon>
             <ion-input placeholder="Choose Starting Point"></ion-input>
@@ -44,10 +40,6 @@
 
         <ion-list>
           <ion-list-header>Default Labels</ion-list-header>
-          <ion-item>
-            <ion-label>Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label>From</ion-label>
             <ion-input placeholder="Choose Starting Point"></ion-input>
@@ -63,10 +55,6 @@
 
         <ion-list>
           <ion-list-header>Fixed Labels</ion-list-header>
-          <ion-item>
-            <ion-label position="fixed">Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label position="fixed">From</ion-label>
             <ion-input placeholder="Choose Starting Point"></ion-input>
@@ -82,10 +70,6 @@
 
         <ion-list>
           <ion-list-header>Floating Labels</ion-list-header>
-          <ion-item>
-            <ion-label position="floating">Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label position="floating">From</ion-label>
             <ion-input></ion-input>
@@ -101,10 +85,6 @@
 
         <ion-list>
           <ion-list-header>Stacked Labels</ion-list-header>
-          <ion-item>
-            <ion-label position="stacked">Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label position="stacked">From</ion-label>
             <ion-input placeholder="Choose Starting Point"></ion-input>
@@ -120,10 +100,6 @@
 
         <ion-list>
           <ion-list-header>End Labels</ion-list-header>
-          <ion-item>
-            <ion-label slot="end">Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label slot="end">From</ion-label>
             <ion-input placeholder="Choose Starting Point"></ion-input>

core/src/components/item/test/alignment/item.e2e.ts

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

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

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

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

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

core/src/components/item/test/buttons/e2e.ts

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

core/src/components/item/test/buttons/item.e2e.ts

@@ -0,0 +1,18 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: buttons', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    /**
+     * This test validates that in iOS mode the arrow indicators are
+     * added to the end of the ion-item row.
+     *
+     * In MD mode, these arrow indicators are not present.
+     */
+    await page.goto(`/src/components/item/test/buttons`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-buttons-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/item/test/colors/e2e.ts

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

core/src/components/item/test/colors/item.e2e.ts

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

core/src/components/item/test/counter/e2e.ts

@@ -1,96 +0,0 @@
-import type { E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('item: counter', () => {
-  describe('custom formatter', () => {
-    let page: E2EPage;
-
-    beforeEach(async () => {
-      page = await newE2EPage({
-        url: '/src/components/item/test/counter?ionic:_testing=true',
-      });
-    });
-
-    it('should format on load', async () => {
-      const itemCounter = await page.find('#customFormatter >>> .item-counter');
-
-      expect(itemCounter.textContent).toBe('20 characters left');
-    });
-
-    it('should format on input', async () => {
-      const input = await page.find('#customFormatter ion-input');
-
-      await input.click();
-      await input.type('abcde');
-
-      await page.waitForChanges();
-
-      const itemCounter = await page.find('#customFormatter >>> .item-counter');
-
-      expect(itemCounter.textContent).toBe('15 characters left');
-    });
-
-    it('should format after changing the counterFormatter', async () => {
-      let itemCounter = await page.find('#customFormatter >>> .item-counter');
-
-      expect(itemCounter.textContent).toBe('20 characters left');
-
-      await page.$eval('#customFormatter', (el: any) => {
-        el.counterFormatter = () => {
-          return 'test label';
-        };
-      });
-      await page.waitForChanges();
-
-      itemCounter = await page.find('#customFormatter >>> .item-counter');
-
-      expect(itemCounter.textContent).toBe('test label');
-    });
-
-    describe('when an exception occurs', () => {
-      const logs = [];
-
-      beforeEach(async () => {
-        page = await newE2EPage({
-          html: `
-          <ion-item counter="true"">
-            <ion-input maxlength="20" value=""></ion-input>
-          </ion-item>`,
-        });
-
-        page.on('console', (ev) => {
-          if (ev.type() === 'error') {
-            logs.push(ev.text());
-          }
-        });
-
-        const itemCounter = await page.find('ion-item >>> .item-counter');
-
-        expect(itemCounter.textContent).toBe('0 / 20');
-
-        await page.$eval('ion-item', (el: any) => {
-          el.counterFormatter = () => {
-            throw new Error('This is an expected error');
-          };
-        });
-        await page.waitForChanges();
-      });
-
-      it('should default the formatting to length / maxlength', async () => {
-        const input = await page.find('ion-input');
-
-        await input.click();
-        await input.type('abcde');
-
-        const itemCounter = await page.find('ion-item >>> .item-counter');
-
-        expect(itemCounter.textContent).toBe('5 / 20');
-      });
-
-      it('should log an error', () => {
-        expect(logs.length).toBeGreaterThan(0);
-        expect(logs[0]).toMatch('[Ionic Error]: Exception in provided `counterFormatter`.');
-      });
-    });
-  });
-});

core/src/components/item/test/counter/item.e2e.ts

@@ -3,10 +3,50 @@ import { test } from '@utils/test/playwright';
 
 test.describe('item: counter', () => {
   test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/item/test/counter`);
+    await page.goto('/src/components/item/test/counter');
 
     await page.setIonViewport();
 
     expect(await page.screenshot()).toMatchSnapshot(`item-counter-diff-${page.getSnapshotSettings()}.png`);
   });
+
+  test.describe('custom formatter', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/item/test/counter');
+    });
+
+    test('should format on load', async ({ page }) => {
+      const itemCounter = page.locator('#customFormatter .item-counter');
+
+      expect(await itemCounter.textContent()).toBe('20 characters left');
+    });
+
+    test('should format on input', async ({ page }) => {
+      const input = page.locator('#customFormatter ion-input');
+
+      await input.click();
+      await input.type('abcde');
+
+      await page.waitForChanges();
+
+      const itemCounter = page.locator('#customFormatter .item-counter');
+
+      expect(await itemCounter.textContent()).toBe('15 characters left');
+    });
+
+    test('should format after changing the counterFormatter', async ({ page }) => {
+      const itemCounter = page.locator('#customFormatter .item-counter');
+
+      expect(await itemCounter.textContent()).toBe('20 characters left');
+
+      await page.$eval('#customFormatter', (el: any) => {
+        el.counterFormatter = () => {
+          return 'test label';
+        };
+      });
+      await page.waitForChanges();
+
+      expect(await itemCounter.textContent()).toBe('test label');
+    });
+  });
 });

core/src/components/item/test/css-variables/e2e.ts

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

core/src/components/item/test/css-variables/item.e2e.ts

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

core/src/components/item/test/disabled/e2e.ts

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

core/src/components/item/test/disabled/item.e2e.ts

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

core/src/components/item/test/dividers/e2e.ts

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

core/src/components/item/test/dividers/item.e2e.ts

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