test(picker-column): migrate tests to playwright (#25303)

core/src/components/picker-column/test/standalone/e2e.ts

@@ -1,19 +0,0 @@
-import { testPickerColumn } from '../test.utils';
-
-const TEST_TYPE = 'standalone';
-
-test('picker-column: standalone', async () => {
-  await testPickerColumn(TEST_TYPE, '#single-column-button');
-});
-
-test('picker-column:multi-column standalone', async () => {
-  await testPickerColumn(TEST_TYPE, '#multiple-column-button');
-});
-
-test('picker-column:rtl: standalone', async () => {
-  await testPickerColumn(TEST_TYPE, '#single-column-button', true);
-});
-
-test('picker-column:multi-column:rtl standalone', async () => {
-  await testPickerColumn(TEST_TYPE, '#multiple-column-button', true);
-});

core/src/components/picker-column/test/standalone/picker-column.e2e.ts

@@ -0,0 +1,19 @@
+import { test } from '@utils/test/playwright';
+
+import { testPickerColumn } from '../test.utils';
+
+test.describe('picker-column', () => {
+  test.describe('single column', () => {
+    test('should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/picker-column/test/standalone');
+      await testPickerColumn(page, '#single-column-button', 'single');
+    });
+  });
+
+  test.describe('multiple columns', () => {
+    test('should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/picker-column/test/standalone');
+      await testPickerColumn(page, '#multiple-column-button', 'multiple');
+    });
+  });
+});

core/src/components/picker-column/test/test.utils.ts

@@ -1,54 +1,45 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { dragElementBy, generateE2EUrl, listenForEvent, waitForFunctionTestContext } from '@utils/test';
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { dragElementBy } from '@utils/test/playwright';
 
-export const testPickerColumn = async (type: string, selector: string, rtl = false) => {
-  try {
-    const pageUrl = generateE2EUrl('picker-column', type, rtl);
+/**
+ * Visual regression tests for picker-column.
+ * @param page - The page to run the tests on.
+ * @param buttonSelector - The selector for the button that opens the picker.
+ * @param description - The description to amend to the screenshot names (typically 'single' or 'multiple').
+ */
+export async function testPickerColumn(page: E2EPage, buttonSelector: string, description: string) {
+  const ionPickerDidPresentSpy = await page.spyOnEvent('ionPickerDidPresent');
 
-    const page = await newE2EPage({
-      url: pageUrl,
+  await page.click(buttonSelector);
+  await ionPickerDidPresentSpy.next();
+
+  await page.waitForTimeout(100);
+
+  expect(await page.screenshot()).toMatchSnapshot(
+    `picker-${description}-column-initial-${page.getSnapshotSettings()}.png`
+  );
+
+  const columns = page.locator('.picker-opt-selected');
+  const spy = await page.spyOnEvent('ionPickerColChange');
+
+  const screenshots = [];
+
+  for (let i = 0; i < (await columns.count()); i++) {
+    const column = columns.nth(i);
+
+    await dragElementBy(column, page, 0, -100);
+    await spy.next();
+
+    await page.waitForTimeout(100);
+
+    screenshots.push({
+      name: `picker-${description}-column-diff-${i}-${page.getSnapshotSettings()}.png`,
+      screenshot: await page.screenshot(),
     });
-
-    const screenshotCompares = [];
-
-    const openButton = await page.find(selector);
-    await openButton.click();
-    await page.waitForTimeout(250);
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    // Setup counter
-    let colChangeCounter: any;
-
-    // Expose an event callback method
-    const COL_CHANGE = 'onIonPickerColChange';
-    await page.exposeFunction(COL_CHANGE, () => {
-      colChangeCounter.count += 1;
-    });
-
-    const columns = await page.$$('ion-picker-column');
-    for (const column of Array.from(columns)) {
-      colChangeCounter = { count: 0 };
-
-      // Attach a listener to element with a callback
-      await listenForEvent(page, 'ionPickerColChange', column, COL_CHANGE);
-
-      // Simulate a column drag
-      await dragElementBy(column, page, 0, 100);
-
-      // Wait for ionPickerColChange event to be emitted once
-      await waitForFunctionTestContext(
-        (payload: any) => {
-          return payload.colChangeCounter.count === 1;
-        },
-        { colChangeCounter }
-      );
-    }
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  } catch (err) {
-    throw err;
   }
-};
+
+  for (const screenshot of screenshots) {
+    expect(screenshot.screenshot).toMatchSnapshot(screenshot.name);
+  }
+}