test(action-sheet): migrate to playwright (#25523)

core/src/components/action-sheet/test/basic/action-sheet.e2e.ts

@@ -0,0 +1,151 @@
+import { expect } from '@playwright/test';
+import type { Locator } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+test.describe('action sheet: basic', () => {
+  let actionSheetFixture: ActionSheetFixture;
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/src/components/action-sheet/test/basic`);
+    actionSheetFixture = new ActionSheetFixture(page);
+  });
+  test.describe('action sheet: data', () => {
+    test('should return data', async ({ page }, testInfo) => {
+      test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
+      const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+
+      await actionSheetFixture.open('#buttonData');
+
+      const buttonOption = page.locator('ion-action-sheet button#option');
+      await buttonOption.click();
+
+      await ionActionSheetDidDismiss.next();
+      expect(ionActionSheetDidDismiss).toHaveReceivedEventDetail({ data: { type: '1' } });
+    });
+    test('should return cancel button data', async ({ page }, testInfo) => {
+      test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
+      const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+
+      await actionSheetFixture.open('#buttonData');
+
+      const buttonOption = page.locator('ion-action-sheet button.action-sheet-cancel');
+      await buttonOption.click();
+
+      await ionActionSheetDidDismiss.next();
+      expect(ionActionSheetDidDismiss).toHaveReceivedEventDetail({ data: { type: 'cancel' }, role: 'cancel' });
+    });
+  });
+  test.describe('action sheet: attributes', () => {
+    test('should set htmlAttributes', async ({ page }, testInfo) => {
+      test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
+      await actionSheetFixture.open('#basic');
+
+      const actionSheet = page.locator('ion-action-sheet');
+      expect(actionSheet).toHaveAttribute('data-testid', 'basic-action-sheet');
+    });
+  });
+  test.describe('action sheet: variants', () => {
+    test('should open basic action sheet', async () => {
+      await actionSheetFixture.open('#basic');
+      await actionSheetFixture.screenshot('basic');
+
+      /**
+       * We want to test that the dismiss method
+       * actually works, but we do not need to test
+       * it every time. As a result, we only
+       * call dismiss in this test.
+       */
+      await actionSheetFixture.dismiss();
+    });
+    test('should open cancel only action sheet', async () => {
+      await actionSheetFixture.open('#cancelOnly');
+      await actionSheetFixture.screenshot('cancel-only');
+    });
+    test('should open custom action sheet', async () => {
+      await actionSheetFixture.open('#custom');
+      await actionSheetFixture.screenshot('custom');
+    });
+    test('should open scrollable action sheet', async () => {
+      await actionSheetFixture.open('#scrollableOptions');
+      await actionSheetFixture.screenshot('scrollable-options');
+    });
+    test('should open scrollable action sheet without cancel', async () => {
+      await actionSheetFixture.open('#scrollWithoutCancel');
+      await actionSheetFixture.screenshot('scroll-without-cancel');
+    });
+    test('should open custom backdrop action sheet', async ({ page }, testInfo) => {
+      test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
+      await actionSheetFixture.open('#customBackdrop');
+
+      const backdrop = page.locator('ion-action-sheet ion-backdrop');
+      expect(backdrop).toHaveCSS('opacity', '1');
+    });
+    test('should open alert from action sheet', async ({ page }, testInfo) => {
+      test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      await actionSheetFixture.open('#alertFromActionSheet');
+
+      await page.locator('#open-alert').click();
+
+      await ionAlertDidPresent.next();
+    });
+    test('should not dismiss action sheet when backdropDismiss: false', async ({ page }, testInfo) => {
+      test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
+      await actionSheetFixture.open('#noBackdropDismiss');
+
+      const actionSheet = page.locator('ion-action-sheet');
+      await actionSheet.locator('ion-backdrop').click();
+
+      expect(actionSheet).toBeVisible();
+    });
+  });
+  test.describe('action sheet: focus trap', () => {
+    test('it should trap focus in action sheet', async ({ page, browserName }, testInfo) => {
+      test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await actionSheetFixture.open('#basic');
+      const buttons = page.locator('ion-action-sheet button');
+
+      await page.keyboard.press(tabKey);
+      await expect(buttons.nth(0)).toBeFocused();
+
+      await page.keyboard.press(`Shift+${tabKey}`);
+      await expect(buttons.nth(4)).toBeFocused();
+
+      await page.keyboard.press(tabKey);
+      await expect(buttons.nth(0)).toBeFocused();
+    });
+  });
+});
+
+class ActionSheetFixture {
+  readonly page: E2EPage;
+
+  private actionSheet!: Locator;
+
+  constructor(page: E2EPage) {
+    this.page = page;
+  }
+
+  async open(selector: string) {
+    const ionActionSheetDidPresent = await this.page.spyOnEvent('ionActionSheetDidPresent');
+    await this.page.locator(selector).click();
+    await ionActionSheetDidPresent.next();
+    this.actionSheet = this.page.locator('ion-action-sheet');
+    expect(this.actionSheet).toBeVisible();
+  }
+
+  async dismiss() {
+    const ionActionSheetDidDismiss = await this.page.spyOnEvent('ionActionSheetDidDismiss');
+    await this.actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss());
+    await ionActionSheetDidDismiss.next();
+    expect(this.actionSheet).not.toBeVisible();
+  }
+
+  async screenshot(modifier: string) {
+    expect(await this.actionSheet.screenshot()).toMatchSnapshot(
+      `action-sheet-${modifier}-diff-${this.page.getSnapshotSettings()}.png`
+    );
+  }
+}

core/src/components/action-sheet/test/basic/e2e.ts

@@ -1,164 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { testActionSheet, testActionSheetAlert, testActionSheetBackdrop } from '../test.utils';
-
-const DIRECTORY = 'basic';
-const getActiveElementText = async (page) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return page.evaluate((el) => el?.textContent, activeElement);
-};
-
-test('action-sheet: data', async () => {
-  const page = await newE2EPage({ url: '/src/components/action-sheet/test/basic?ionic:_testing=true' });
-  const didDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
-
-  await page.click('#buttonData');
-  await page.waitForSelector('#buttonData');
-
-  const actionSheet = await page.find('ion-action-sheet');
-  await actionSheet.waitForVisible();
-
-  const button = await actionSheet.find('button#option');
-  await button.click();
-
-  expect(didDismiss).toHaveReceivedEventDetail({ data: { type: '1' } });
-});
-
-test('action-sheet: data cancel', async () => {
-  const page = await newE2EPage({ url: '/src/components/action-sheet/test/basic?ionic:_testing=true' });
-  const didDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
-
-  await page.click('#buttonData');
-  await page.waitForSelector('#buttonData');
-
-  const actionSheet = await page.find('ion-action-sheet');
-  await actionSheet.waitForVisible();
-
-  const button = await actionSheet.find('button.action-sheet-cancel');
-  await button.click();
-
-  expect(didDismiss).toHaveReceivedEventDetail({ data: { type: 'cancel' }, role: 'cancel' });
-});
-
-test('action-sheet: focus trap', async () => {
-  const page = await newE2EPage({ url: '/src/components/action-sheet/test/basic?ionic:_testing=true' });
-
-  await page.click('#basic');
-  await page.waitForSelector('#basic');
-
-  const actionSheet = await page.find('ion-action-sheet');
-
-  expect(actionSheet).not.toBe(null);
-  await actionSheet.waitForVisible();
-
-  await page.keyboard.press('Tab');
-
-  const activeElementText = await getActiveElementText(page);
-  expect(activeElementText).toEqual('Delete');
-
-  await page.keyboard.down('Shift');
-  await page.keyboard.press('Tab');
-  await page.keyboard.up('Shift');
-
-  const activeElementTextTwo = await getActiveElementText(page);
-  expect(activeElementTextTwo).toEqual('Cancel');
-
-  await page.keyboard.press('Tab');
-
-  const activeElementTextThree = await getActiveElementText(page);
-  expect(activeElementTextThree).toEqual('Delete');
-});
-
-test('action-sheet: basic', async () => {
-  await testActionSheet(DIRECTORY, '#basic');
-});
-
-test('action-sheet: basic, alert from action sheet', async () => {
-  await testActionSheet(DIRECTORY, '#alertFromActionSheet', false, testActionSheetAlert);
-});
-
-test('action-sheet: basic, cancel only', async () => {
-  await testActionSheet(DIRECTORY, '#cancelOnly');
-});
-
-test('action-sheet: basic, custom', async () => {
-  await testActionSheet(DIRECTORY, '#custom');
-});
-
-test('action-sheet: basic, icons', async () => {
-  await testActionSheet(DIRECTORY, '#icons');
-});
-
-test('action-sheet: basic, no backdrop dismiss', async () => {
-  await testActionSheet(DIRECTORY, '#noBackdropDismiss', false, testActionSheetBackdrop);
-});
-
-test('action-sheet: basic, scrollable options', async () => {
-  await testActionSheet(DIRECTORY, '#scrollableOptions');
-});
-
-test('action-sheet: basic, scroll without cancel', async () => {
-  await testActionSheet(DIRECTORY, '#scrollWithoutCancel');
-});
-
-test('action-sheet: basic, custom backdrop', async () => {
-  await testActionSheet(DIRECTORY, '#customBackdrop');
-});
-
-/**
- * RTL Tests
- */
-
-test('action-sheet:rtl: basic', async () => {
-  await testActionSheet(DIRECTORY, '#basic', true);
-});
-
-test('action-sheet:rtl: basic, alert from action sheet', async () => {
-  await testActionSheet(DIRECTORY, '#alertFromActionSheet', true, testActionSheetAlert);
-});
-
-test('action-sheet:rtl: basic, cancel only', async () => {
-  await testActionSheet(DIRECTORY, '#cancelOnly', true);
-});
-
-test('action-sheet:rtl: basic, custom', async () => {
-  await testActionSheet(DIRECTORY, '#custom', true);
-});
-
-test('action-sheet:rtl: basic, icons', async () => {
-  await testActionSheet(DIRECTORY, '#icons', true);
-});
-
-test('action-sheet:rtl: basic, no backdrop dismiss', async () => {
-  await testActionSheet(DIRECTORY, '#noBackdropDismiss', true, testActionSheetBackdrop);
-});
-
-test('action-sheet:rtl: basic, scrollable options', async () => {
-  await testActionSheet(DIRECTORY, '#scrollableOptions', true);
-});
-
-test('action-sheet:rtl: basic, scroll without cancel', async () => {
-  await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
-});
-
-test('action-sheet:rtl: basic, custom backdrop', async () => {
-  await testActionSheet(DIRECTORY, '#customBackdrop', true);
-});
-
-// Attributes
-
-test('action-sheet: htmlAttributes', async () => {
-  const page = await newE2EPage({ url: '/src/components/action-sheet/test/basic?ionic:_testing=true' });
-
-  await page.click('#basic');
-  await page.waitForSelector('#basic');
-
-  const toast = await page.find('ion-action-sheet');
-
-  expect(toast).not.toBe(null);
-  await toast.waitForVisible();
-
-  const attribute = await page.evaluate(() => document.querySelector('ion-action-sheet').getAttribute('data-testid'));
-
-  expect(attribute).toEqual('basic-action-sheet');
-});

core/src/components/action-sheet/test/basic/index.html

@@ -139,6 +139,7 @@
           buttons: [
             {
               text: 'Open Alert',
+              id: 'open-alert',
               handler: async () => {
                 const alert = Object.assign(document.createElement('ion-alert'), {
                   header: 'Alert from Action Sheet',

core/src/components/action-sheet/test/spec/e2e.ts

@@ -1,7 +0,0 @@
-import { testActionSheet } from '../test.utils';
-
-const DIRECTORY = 'spec';
-
-test('action-sheet: spec', async () => {
-  await testActionSheet(DIRECTORY, '#spec');
-});

core/src/components/action-sheet/test/spec/index.html

@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Action Sheet - Spec</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-  <script type="module">
-    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
-    window.actionSheetController = actionSheetController;
-  </script>
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Action Sheet - Spec</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding">
-        <ion-button expand="block" id="spec" onclick="presentSpec()">Spec</ion-button>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      window.addEventListener('ionActionSheetDidDismiss', function (e) {
-        console.log('didDismiss', e);
-      });
-
-      async function presentSpec() {
-        const mode = Ionic.mode;
-        const actionSheet = await actionSheetController.create({
-          header: 'Open in',
-          buttons: [
-            {
-              text: 'Item 1',
-              icon: 'share',
-              handler: () => {
-                console.log('Share clicked');
-              },
-            },
-            {
-              text: 'Item 2',
-              icon: 'link',
-              handler: () => {
-                console.log('Play clicked');
-              },
-            },
-            {
-              text: 'Item 3',
-              icon: mode === 'md' ? 'create' : null,
-              handler: () => {
-                console.log('Favorite clicked');
-              },
-            },
-            {
-              text: 'Item 4',
-              icon: mode === 'md' ? 'trash' : null,
-              handler: () => {
-                console.log('Cancel clicked');
-              },
-            },
-            {
-              text: 'Item 5',
-              icon: mode === 'md' ? 'copy' : null,
-              handler: () => {
-                console.log('Cancel clicked');
-              },
-            },
-          ],
-        });
-        await actionSheet.present();
-      }
-    </script>
-  </body>
-</html>

core/src/components/action-sheet/test/test.utils.ts

@@ -1,73 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { generateE2EUrl } from '@utils/test';
-
-export const testActionSheet = async (
-  type: string,
-  selector: string,
-  rtl = false,
-  afterScreenshotHook?: (...args: any[]) => void
-) => {
-  try {
-    const pageUrl = generateE2EUrl('action-sheet', type, rtl);
-
-    const page = await newE2EPage({
-      url: pageUrl,
-    });
-
-    const screenshotCompares = [];
-
-    const presentBtn = await page.find(selector);
-    await presentBtn.click();
-
-    let actionSheet = await page.find('ion-action-sheet');
-    await actionSheet.waitForVisible();
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    if (afterScreenshotHook) {
-      await afterScreenshotHook(page, screenshotCompares, actionSheet);
-    }
-
-    await actionSheet.callMethod('dismiss');
-    await actionSheet.waitForNotVisible();
-
-    screenshotCompares.push(await page.compareScreenshot('dismiss'));
-
-    actionSheet = await page.find('ion-action-sheet');
-    expect(actionSheet).toBe(null);
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  } catch (err) {
-    throw err;
-  }
-};
-
-export const testActionSheetBackdrop = async (page: any, screenshotCompares: any, actionSheet: any) => {
-  try {
-    const backdrop = await page.find('ion-backdrop');
-    await backdrop.click();
-
-    screenshotCompares.push(await page.compareScreenshot(`dismiss backdrop`));
-
-    const isVisible = await actionSheet.isVisible();
-    expect(isVisible).toBe(true);
-  } catch (err) {
-    throw err;
-  }
-};
-
-export const testActionSheetAlert = async (page: any, screenshotCompares: any) => {
-  const openAlertBtn = await page.find({ text: 'Open Alert' });
-  await openAlertBtn.click();
-
-  const alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  screenshotCompares.push(await page.compareScreenshot(`alert open`));
-
-  const alertOkayBtn = await page.find({ contains: 'Okay' });
-  await alertOkayBtn.click();
-};

core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts

@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('action sheet: translucent', () => {
+  test('should not have visual regressions', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.mode === 'md', 'Translucent effect is only active on iOS mode');
+    test.skip(
+      testInfo.project.metadata.rtl === true,
+      'This tests how the component is painted, not layout. RTL tests are not needed here'
+    );
+
+    await page.goto(`/src/components/action-sheet/test/translucent`);
+
+    const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+    const basic = page.locator('#basic');
+    await basic.click();
+
+    await ionActionSheetDidPresent.next();
+
+    const actionSheet = page.locator('ion-action-sheet');
+    expect(await actionSheet.screenshot()).toMatchSnapshot(
+      `action-sheet-translucent-${page.getSnapshotSettings()}.png`
+    );
+  });
+});

core/src/components/action-sheet/test/translucent/e2e.ts

@@ -1,7 +0,0 @@
-import { testActionSheet } from '../test.utils';
-
-const DIRECTORY = 'translucent';
-
-test('action-sheet: translucent', async () => {
-  await testActionSheet(DIRECTORY, '#basic');
-});