test(loading): migrate loading tests to playwright (#25258)

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

@@ -1,114 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { testLoading } 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('loading: focus trap', async () => {
-  const page = await newE2EPage({ url: '/src/components/loading/test/basic?ionic:_testing=true' });
-
-  await page.click('#html-content-loading');
-  await page.waitForSelector('#html-content-loading');
-
-  const loading = await page.find('ion-loading');
-
-  expect(loading).not.toBe(null);
-  await loading.waitForVisible();
-
-  await page.keyboard.press('Tab');
-
-  const activeElementText = await getActiveElementText(page);
-  expect(activeElementText).toEqual('Click impatiently to load faster');
-
-  await page.keyboard.down('Shift');
-  await page.keyboard.press('Tab');
-  await page.keyboard.up('Shift');
-
-  const activeElementTextTwo = await getActiveElementText(page);
-  expect(activeElementTextTwo).toEqual('Click impatiently to load faster');
-
-  await page.keyboard.press('Tab');
-
-  const activeElementTextThree = await getActiveElementText(page);
-  expect(activeElementTextThree).toEqual('Click impatiently to load faster');
-});
-
-test('loading: basic', async () => {
-  await testLoading(DIRECTORY, '#basic-loading');
-});
-
-test('loading: long content basic', async () => {
-  await testLoading(DIRECTORY, '#long-content-loading');
-});
-
-test('loading: no spinner basic', async () => {
-  await testLoading(DIRECTORY, '#no-spinner-loading');
-});
-
-test('loading: translucent basic', async () => {
-  await testLoading(DIRECTORY, '#translucent-loading');
-});
-
-test('loading: custom class basic', async () => {
-  await testLoading(DIRECTORY, '#custom-class-loading');
-});
-
-test('loading: backdrop standalone', async () => {
-  await testLoading(DIRECTORY, '#backdrop-loading');
-});
-
-test('loading: html content basic', async () => {
-  await testLoading(DIRECTORY, '#html-content-loading');
-});
-
-/**
- * RTL Tests
- */
-
-test('loading:rtl: basic basic', async () => {
-  await testLoading(DIRECTORY, '#basic-loading', true);
-});
-
-test('loading:rtl: long content basic', async () => {
-  await testLoading(DIRECTORY, '#long-content-loading', true);
-});
-
-test('loading:rtl: no spinner basic', async () => {
-  await testLoading(DIRECTORY, '#no-spinner-loading', true);
-});
-
-test('loading:rtl: translucent basic', async () => {
-  await testLoading(DIRECTORY, '#translucent-loading', true);
-});
-
-test('loading:rtl: custom class basic', async () => {
-  await testLoading(DIRECTORY, '#custom-class-loading', true);
-});
-
-test('loading:rtl: backdrop standalone', async () => {
-  await testLoading(DIRECTORY, '#backdrop-loading', true);
-});
-
-test('loading:rtl: html content basic', async () => {
-  await testLoading(DIRECTORY, '#html-content-loading', true);
-});
-
-test('loading: htmlAttributes', async () => {
-  const page = await newE2EPage({ url: '/src/components/loading/test/basic?ionic:_testing=true' });
-
-  await page.click('#basic-loading');
-  await page.waitForSelector('#basic-loading');
-
-  const alert = await page.find('ion-loading');
-
-  expect(alert).not.toBe(null);
-  await alert.waitForVisible();
-
-  const attribute = await page.evaluate(() => document.querySelector('ion-loading').getAttribute('data-testid'));
-
-  expect(attribute).toEqual('basic-loading');
-});

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

@@ -0,0 +1,93 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
+
+test.describe('loading: basic', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/loading/test/basic');
+  });
+  test.describe('loading: visual regression tests', () => {
+    const runVisualTest = async (page: E2EPage, selector: string, screenshotModifier: string) => {
+      const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+      const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidPresent');
+
+      await page.click(selector);
+
+      await ionLoadingDidPresent.next();
+
+      expect(await page.screenshot()).toMatchSnapshot(
+        `loading-${screenshotModifier}-diff-${page.getSnapshotSettings()}.png`
+      );
+
+      const loading = await page.locator('ion-loading');
+      await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss());
+
+      await ionLoadingDidDismiss.next();
+
+      expect(loading).toBeHidden();
+    };
+    test('should open a basic loader', async ({ page }) => {
+      await runVisualTest(page, '#basic-loading', 'basic');
+    });
+    test('should open a loader with long text', async ({ page }) => {
+      await runVisualTest(page, '#long-content-loading', 'long-content');
+    });
+    test('should open a loader with no spinner', async ({ page }) => {
+      await runVisualTest(page, '#no-spinner-loading', 'no-spinner');
+    });
+    test('should open a translucent loader', async ({ page }) => {
+      await runVisualTest(page, '#translucent-loading', 'translucent');
+    });
+    test('should open a loader with a custom class', async ({ page }) => {
+      await runVisualTest(page, '#no-spinner-loading', 'no-spinner');
+    });
+    test('should open a loader with html content', async ({ page }) => {
+      await runVisualTest(page, '#html-content-loading', 'html-content');
+    });
+  });
+  test.describe('loading: html attributes', () => {
+    test('it should pass html attributes to the loader', async ({ page }) => {
+      const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+
+      await page.click('#basic-loading');
+
+      await ionLoadingDidPresent.next();
+
+      const loading = await page.locator('ion-loading');
+      expect(loading).toHaveAttribute('data-testid', 'basic-loading');
+    });
+  });
+  test.describe('loading: focus trapping', () => {
+    test('it should trap focus in the loader', async ({ page, browserName }) => {
+      const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+
+      await page.click('#html-content-loading');
+
+      await ionLoadingDidPresent.next();
+
+      const button = await page.locator('ion-loading ion-button');
+
+      if (browserName === 'webkit') {
+        await page.keyboard.down('Alt');
+      }
+
+      await page.keyboard.press('Tab');
+
+      expect(button).toBeFocused();
+
+      await page.keyboard.down('Shift');
+      await page.keyboard.press('Tab');
+      await page.keyboard.up('Shift');
+
+      expect(button).toBeFocused();
+
+      await page.keyboard.press('Tab');
+
+      if (browserName === 'webkit') {
+        await page.keyboard.up('Alt');
+      }
+
+      expect(button).toBeFocused();
+    });
+  });
+});

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

@@ -1,23 +0,0 @@
-import { testLoading } from '../test.utils';
-
-const DIRECTORY = 'standalone';
-
-test('loading: basic standalone', async () => {
-  await testLoading(DIRECTORY, '#basic-loading');
-});
-
-test('loading: long content standalone', async () => {
-  await testLoading(DIRECTORY, '#long-content-loading');
-});
-
-test('loading: no spinner standalone', async () => {
-  await testLoading(DIRECTORY, '#no-spinner-loading');
-});
-
-test('loading: translucent standalone', async () => {
-  await testLoading(DIRECTORY, '#translucent-loading');
-});
-
-test('loading: custom class standalone', async () => {
-  await testLoading(DIRECTORY, '#custom-class-loading');
-});

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

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('loading: standalone', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/loading/test/standalone');
+  });
+  test('should open a basic loader', async ({ page }) => {
+    const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+    const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidPresent');
+
+    await page.click('#basic-loading');
+
+    await ionLoadingDidPresent.next();
+
+    expect(await page.screenshot()).toMatchSnapshot(`loading-standalone-diff-${page.getSnapshotSettings()}.png`);
+
+    const loading = await page.locator('ion-loading');
+    await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss());
+
+    await ionLoadingDidDismiss.next();
+
+    expect(loading).toBeHidden();
+  });
+});