test(picker-internal): screenshot and a11y (axe) (#25150)

Author: sean-perkins

core/package-lock.json

@@ -31,6 +31,7 @@
     "loader/"
   ],
   "dependencies": {
+    "@axe-core/playwright": "^4.4.2",
     "@stencil/core": "^2.14.2",
     "ionicons": "^6.0.0",
     "tslib": "^2.1.0"

core/package.json

@@ -0,0 +1,13 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('picker-internal: a11y', () => {
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/picker-internal/test/a11y`);
+
+    const results = await new AxeBuilder({ page }).analyze();
+
+    expect(results.violations).toEqual([]);
+  });
+});

core/src/components/picker-internal/test/a11y/e2e.ts

@@ -0,0 +1,56 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+const isMobileSafariLinux = (userAgent?: string) => {
+  return userAgent?.includes('Linux') === true && userAgent?.includes('Mobile Safari') === true;
+};
+
+test.describe('picker-internal', () => {
+  test('inline pickers should not have visual regression', async ({ page }) => {
+    await page.goto(`/src/components/picker-internal/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+      `picker-internal-inline-diff-${page.getSnapshotSettings()}.png`
+    );
+  });
+
+  test.describe('within overlay:', () => {
+    // TODO (FW-1397): Remove this test.skip when the issue is fixed.
+    test.skip(
+      ({ userAgent }) => isMobileSafariLinux(userAgent),
+      'Mobile Safari on Linux renders the selected option incorrectly'
+    );
+
+    test('popover: should not have visual regression', async ({ page }) => {
+      await page.goto(`/src/components/picker-internal/test/basic`);
+
+      await page.setIonViewport();
+
+      await page.click('#popover');
+
+      await page.spyOnEvent('ionPopoverDidPresent');
+      await page.waitForChanges();
+
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+        `picker-internal-popover-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+
+    test('modal: should not have visual regression', async ({ page }) => {
+      await page.goto(`/src/components/picker-internal/test/basic`);
+
+      await page.setIonViewport();
+
+      await page.click('#modal');
+
+      await page.spyOnEvent('ionModalDidPresent');
+      await page.waitForChanges();
+
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+        `picker-internal-modal-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+});