test(toast): migrate tests to playwright (#25751)

core/src/components/toast/test/a11y/toast.e2e.ts

@@ -0,0 +1,42 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toast: a11y', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This test does not check LTR vs RTL layouts');
+    await page.goto(`/src/components/toast/test/a11y`);
+  });
+  test('should not have any axe violations with polite toasts', async ({ page }) => {
+    const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+
+    const politeButton = page.locator('#polite');
+    await politeButton.click();
+
+    await ionToastDidPresent.next();
+
+    /**
+     * IonToast overlays the entire screen, so
+     * Axe will be unable to verify color contrast
+     * on elements under the toast.
+     */
+    const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+    expect(results.violations).toEqual([]);
+  });
+  test('should not have any axe violations with assertive toasts', async ({ page }) => {
+    const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+
+    const politeButton = page.locator('#assertive');
+    await politeButton.click();
+
+    await ionToastDidPresent.next();
+
+    /**
+     * IonToast overlays the entire screen, so
+     * Axe will be unable to verify color contrast
+     * on elements under the toast.
+     */
+    const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+    expect(results.violations).toEqual([]);
+  });
+});

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

@@ -67,7 +67,7 @@
         <ion-button
           expand="block"
           id="two-line-toast"
-          onclick="openToast({message: 'Two-line message\nwith action.', buttons: ['Action'] })"
+          onclick="openToast({message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in elit varius, maximus sem in, bibendum justo.', buttons: ['Action'] })"
         >
           Long Message
         </ion-button>

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

@@ -0,0 +1,136 @@
+import { expect } from '@playwright/test';
+import type { Locator, TestInfo } from '@playwright/test';
+import type { E2EPage, EventSpy } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
+
+class ToastFixture {
+  readonly page: E2EPage;
+  readonly testInfo: TestInfo;
+
+  private ionToastDidPresent!: EventSpy;
+
+  constructor(page: E2EPage, testInfo: TestInfo) {
+    this.page = page;
+    this.testInfo = testInfo;
+  }
+
+  async goto() {
+    const { page } = this;
+    await page.goto(`/src/components/toast/test/basic`);
+    this.ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+  }
+
+  async openToast(selector: string) {
+    const { page, ionToastDidPresent } = this;
+    const button = page.locator(selector);
+    await button.click();
+
+    await ionToastDidPresent.next();
+
+    return {
+      toast: page.locator('ion-toast'),
+      container: page.locator('ion-toast .toast-container'),
+    };
+  }
+
+  async screenshot(screenshotModifier: string, el?: Locator) {
+    const { page } = this;
+
+    const reference = el !== undefined ? el : page;
+    expect(await reference.screenshot()).toMatchSnapshot(
+      `toast-${screenshotModifier}-${page.getSnapshotSettings()}.png`
+    );
+  }
+
+  skipRTL(testRef: typeof test, reason = 'This functionality does not have RTL-specific behaviors.') {
+    const { testInfo } = this;
+    testRef.skip(testInfo.project.metadata.rtl === true, reason);
+  }
+
+  skipMode(testRef: typeof test, mode: string, reason: string) {
+    const { testInfo } = this;
+    testRef.skip(testInfo.project.metadata.mode === mode, reason);
+  }
+}
+
+test.describe('toast: rendering', () => {
+  let toastFixture: ToastFixture;
+  test.beforeEach(async ({ page }, testInfo) => {
+    toastFixture = new ToastFixture(page, testInfo);
+    await toastFixture.goto();
+  });
+
+  test.describe('toast: position', () => {
+    test.beforeEach(() => {
+      toastFixture.skipRTL(test);
+    });
+    test('should render toast at the top', async () => {
+      await toastFixture.openToast('#show-top-toast');
+      await toastFixture.screenshot('top');
+    });
+    test('should render toast at the middle', async () => {
+      await toastFixture.openToast('#show-middle-toast');
+      await toastFixture.screenshot('middle');
+    });
+    test('should render toast at the bottom', async () => {
+      await toastFixture.openToast('#show-bottom-toast');
+      await toastFixture.screenshot('bottom');
+    });
+  });
+
+  test('should set buttons correctly', async () => {
+    const { container } = await toastFixture.openToast('#custom-action-buttons-toast');
+    await toastFixture.screenshot('buttons', container);
+  });
+
+  test('should set start/end positioning correctly', async () => {
+    const { container } = await toastFixture.openToast('#toast-start-and-end');
+    await toastFixture.screenshot('start-end', container);
+  });
+
+  test('should wrap text correctly', async () => {
+    toastFixture.skipRTL(test);
+    const { container } = await toastFixture.openToast('#two-line-toast');
+    await toastFixture.screenshot('text', container);
+  });
+
+  test('should set color correctly', async () => {
+    toastFixture.skipRTL(test);
+    const { container } = await toastFixture.openToast('#color-toast');
+    await toastFixture.screenshot('color', container);
+  });
+
+  test('should set translucency correctly', async () => {
+    toastFixture.skipRTL(test);
+    toastFixture.skipMode(test, 'md', 'Translucency only works on iOS');
+
+    const { container } = await toastFixture.openToast('#translucent-toast');
+    await toastFixture.screenshot('translucent', container);
+  });
+});
+
+test.describe('toast: properties', () => {
+  let toastFixture: ToastFixture;
+  test.beforeEach(async ({ page }, testInfo) => {
+    toastFixture = new ToastFixture(page, testInfo);
+
+    toastFixture.skipMode(test, 'md', 'This functionality has no mode specific logic.');
+    toastFixture.skipRTL(test);
+
+    await toastFixture.goto();
+  });
+  test('should correctly set htmlAttributes', async () => {
+    const { toast } = await toastFixture.openToast('#show-bottom-toast');
+    await expect(toast).toHaveAttribute('data-testid', 'basic-toast');
+  });
+
+  test('should correctly set custom html', async () => {
+    const { toast } = await toastFixture.openToast('#toast-html');
+    await expect(toast.locator('ion-button')).toBeVisible();
+  });
+
+  test('should correctly set custom class', async () => {
+    const { toast } = await toastFixture.openToast('#custom-class-toast');
+    await expect(toast).toHaveClass(/my-custom-class/);
+  });
+});