test(picker): migrate to Playwright (#26282)

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

@@ -1,29 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('picker: basic', () => {
-  it('should match existing screenshots', async () => {
-    const page = await newE2EPage({
-      url: '/src/components/picker/test/basic?ionic:_testing=true',
-    });
-
-    const compares = [];
-
-    await page.click('#basic');
-
-    await page.waitForEvent('ionPickerDidPresent');
-
-    compares.push(await page.compareScreenshot('picker initial state'));
-
-    await page.click('ion-picker .save-btn');
-
-    await page.click('#basic');
-
-    await page.waitForEvent('ionPickerDidPresent');
-
-    compares.push(await page.compareScreenshot('picker opened with selected value'));
-
-    for (const compare of compares) {
-      expect(compare).toMatchScreenshot();
-    }
-  });
-});

core/src/components/picker/test/basic/index.html

@@ -103,7 +103,6 @@
             {
               text: 'Cancel',
               role: 'cancel',
-              handler: () => console.log('Clicked Cancel!'),
             },
             {
               text: 'Save',
@@ -113,12 +112,6 @@
                 selectedIndex = options.findIndex((opt) => opt.value === v);
               },
             },
-            {
-              text: 'Log',
-              handler: (val) => {
-                return false;
-              },
-            },
           ],
           columns: [
             {

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

@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('picker: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto('/src/components/picker/test/basic');
+    const didPresent = await page.spyOnEvent('ionPickerDidPresent');
+    const didDismiss = await page.spyOnEvent('ionPickerDidDismiss');
+
+    await page.click('#basic');
+    await didPresent.next();
+    await page.waitForChanges();
+
+    expect(await page.screenshot()).toMatchSnapshot(`picker-basic-${page.getSnapshotSettings()}.png`);
+
+    await page.click('.picker-opt:nth-child(2)');
+    await page.click('ion-picker .save-btn');
+    await didDismiss.next();
+
+    await page.click('#basic');
+    await didPresent.next();
+    await page.waitForChanges();
+
+    expect(await page.screenshot()).toMatchSnapshot(`picker-value-selected-${page.getSnapshotSettings()}.png`);
+  });
+});