test(select): migrate tests to playwright (#25268)

core/src/components/select/test/async/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: async', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/async?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/select/test/async/index.html

@@ -44,8 +44,10 @@
           });
 
           select.value = options[0];
+
+          window.dispatchEvent(new CustomEvent('selectValueSet'));
         });
-      }, 5000);
+      }, 1000);
     </script>
   </body>
 </html>

core/src/components/select/test/async/select.e2e.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: async', () => {
+  test('should correctly set the value after a delay', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This is checking internal logic. RTL tests are not needed');
+
+    await page.goto(`/src/components/select/test/async`);
+    const selectValueSet = await page.spyOnEvent('selectValueSet');
+
+    const select = await page.locator('#default');
+
+    await selectValueSet.next();
+
+    expect(select).toHaveJSProperty('value', 'bird');
+  });
+});

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

@@ -1,117 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/basic?ionic:_testing=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  // Gender Alert Select
-  let select = await page.find('#gender');
-
-  // add an event spy to the select
-  const ionDismiss = await select.spyOnEvent('ionDismiss');
-
-  await select.click();
-
-  let alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open gender single select'));
-
-  await alert.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  // Skittles Action Sheet Select
-  select = await page.find('#skittles');
-  await select.click();
-
-  let actionSheet = await page.find('ion-action-sheet');
-  await actionSheet.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open skittles action sheet select'));
-
-  await actionSheet.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  // Custom Alert Select
-  select = await page.find('#customAlertSelect');
-  await select.click();
-
-  alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open custom alert select'));
-
-  await alert.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  // Custom Popover Select
-  select = await page.find('#customPopoverSelect');
-  await select.click();
-
-  let popover = await page.find('ion-popover');
-  await popover.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open custom popover select'));
-
-  // select has no value, so first option should be focused by default
-  const popoverOption1 = await popover.find('.select-interface-option:first-child');
-  expect(popoverOption1).toHaveClass('ion-focused');
-
-  let popoverOption2 = await popover.find('.select-interface-option:nth-child(2)');
-  await popoverOption2.click();
-  await page.waitForTimeout(500);
-
-  await select.click();
-  popover = await page.find('ion-popover');
-  await popover.waitForVisible();
-  await page.waitForTimeout(250);
-
-  popoverOption2 = await popover.find('.select-interface-option:nth-child(2)');
-  expect(popoverOption2).toHaveClass('ion-focused');
-
-  await popover.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  // Custom Action Sheet Select
-  select = await page.find('#customActionSheetSelect');
-  await select.click();
-
-  actionSheet = await page.find('ion-action-sheet');
-  await actionSheet.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open custom action sheet select'));
-
-  await actionSheet.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
-
-test('select:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});

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

@@ -2,14 +2,16 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('select: basic', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/select/test/basic');
+  });
+
   test('should not open multiple alert windows when clicked multiple times', async ({ page }) => {
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/ionic-team/ionic-framework/issues/25126',
     });
 
-    await page.goto('/src/components/select/test/basic');
-
     const select = page.locator('#gender');
 
     await select.evaluate((el: HTMLSelectElement) => {
@@ -28,4 +30,68 @@ test.describe('select: basic', () => {
 
     expect(alerts.length).toBe(1);
   });
+
+  test.describe('select: alert', () => {
+    test('it should open an alert select', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const ionDismiss = await page.spyOnEvent('ionDismiss');
+
+      await page.click('#customAlertSelect');
+
+      await ionAlertDidPresent.next();
+
+      expect(await page.screenshot()).toMatchSnapshot(`select-alert-diff-${page.getSnapshotSettings()}.png`);
+
+      const alert = await page.locator('ion-alert');
+      await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
+
+      await ionDismiss.next();
+    });
+  });
+
+  test.describe('select: action sheet', () => {
+    test('it should open an action sheet select', async ({ page }) => {
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+      const ionDismiss = await page.spyOnEvent('ionDismiss');
+
+      await page.click('#customActionSheetSelect');
+
+      await ionActionSheetDidPresent.next();
+
+      expect(await page.screenshot()).toMatchSnapshot(`select-action-sheet-diff-${page.getSnapshotSettings()}.png`);
+
+      const actionSheet = await page.locator('ion-action-sheet');
+      await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss());
+
+      await ionDismiss.next();
+    });
+  });
+
+  test.describe('select: popover', () => {
+    test('it should open a popover select', async ({ page, browserName }) => {
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const ionDismiss = await page.spyOnEvent('ionDismiss');
+
+      await page.click('#customPopoverSelect');
+
+      await ionPopoverDidPresent.next();
+
+      const popover = await page.locator('ion-popover');
+
+      // TODO(FW-1436)
+      if (browserName !== 'firefox') {
+        // select has no value, so first option should be focused by default
+        const popoverOption1 = await popover.locator('.select-interface-option:first-of-type ion-radio');
+        expect(popoverOption1).toBeFocused();
+      }
+
+      expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+        `select-popover-diff-${page.getSnapshotSettings()}.png`
+      );
+
+      await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
+
+      await ionDismiss.next();
+    });
+  });
 });

core/src/components/select/test/compare-with/e2e.ts

@@ -1,36 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: compareWith', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/compare-with?ionic:_testing=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  const selectMultiple = await page.find('#multiple');
-  await selectMultiple.click();
-
-  let alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open select[multiple] with option selected'));
-
-  await alert.callMethod('dismiss');
-
-  const selectSingle = await page.find('#single');
-  await selectSingle.click();
-
-  alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open select with option selected'));
-
-  await alert.callMethod('dismiss');
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});

core/src/components/select/test/compare-with/select.e2e.ts

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: compare-with', () => {
+  test('should correctly set value when using compareWith property', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This is checking internal logic. RTL tests are not needed');
+
+    await page.goto('/src/components/select/test/compare-with');
+
+    const multipleSelect = await page.locator('#multiple');
+    const singleSelect = await page.locator('#single');
+
+    expect(multipleSelect).toHaveJSProperty('value', [
+      {
+        label: 'selected by default',
+        value: '1',
+      },
+    ]);
+    expect(singleSelect).toHaveJSProperty('value', {
+      label: 'selected by default',
+      value: '1',
+    });
+  });
+});

core/src/components/select/test/custom/custom.e2e.ts

@@ -0,0 +1,10 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: custom', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/select/test/custom`);
+
+    expect(await page.screenshot()).toMatchSnapshot(`select-custom-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/select/test/custom/e2e.ts

@@ -1,27 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: custom', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/custom?ionic:_testing=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
-
-test('select:rtl: custom', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/custom?ionic:_testing=true&rtl=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});

core/src/components/select/test/label/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-it('select: label', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/label?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/select/test/multiple-value/e2e.ts

@@ -1,20 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: multiple-value', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/multiple-value?ionic:_testing=true',
-  });
-
-  let compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-
-  const select = await page.find('#toppings');
-  await select.click();
-
-  const alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compare = await page.compareScreenshot('should open toppings multiple select');
-  expect(compare).toMatchScreenshot();
-});

core/src/components/select/test/single-value/e2e.ts

@@ -1,20 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: single-value', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/single-value?ionic:_testing=true',
-  });
-
-  let compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-
-  const select = await page.find('#gender');
-  await select.click();
-
-  const alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compare = await page.compareScreenshot('should open gender single select');
-  expect(compare).toMatchScreenshot();
-});

core/src/components/select/test/single-value/select.e2e.ts

@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: single-value', () => {
+  test('should open single value select', async ({ page }) => {
+    await page.goto(`/src/components/select/test/single-value`);
+
+    const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+    await page.click('#gender');
+
+    await ionAlertDidPresent.next();
+
+    expect(await page.screenshot()).toMatchSnapshot(`select-single-value-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/select/test/spec/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: spec', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/spec?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/select/test/spec/select.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: spec', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/select/test/spec`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`select-spec-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/select/test/standalone/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/select/test/standalone/select.e2e.ts

@@ -0,0 +1,18 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('select: standalone', () => {
+  test('should open an overlay without ion-app', async ({ page }) => {
+    await page.goto(`/src/components/select/test/standalone`);
+    const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+    const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+
+    await page.click('#gender');
+
+    await ionAlertDidPresent.next();
+
+    const alert = await page.locator('ion-alert');
+    await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
+
+    await ionAlertDidDismiss.next();
+  });
+});