test(item): migrate tests to playwright

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