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

Author: sean-perkins

core/src/components/item/test/a11y/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/a11y/item.e2e.ts

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