chore(): sync with main

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

@@ -1,70 +1,69 @@
 import { expect } from '@playwright/test';
-import type { E2EPage } from '@utils/test/playwright';
+import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
 import { configs, test } from '@utils/test/playwright';
 
+const runVisualTest = async (page: E2EPage, selector: string, screenshot: ScreenshotFn, screenshotModifier: string) => {
+  const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+
+  await page.click(selector);
+
+  await ionLoadingDidPresent.next();
+
+  await expect(page).toHaveScreenshot(screenshot(`loading-${screenshotModifier}-diff`));
+};
+
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('loading: basic'), () => {
-    test.beforeEach(async ({ page }) => {
+    test('should open a basic loader', async ({ page }) => {
       await page.goto('/src/components/loading/test/basic', config);
-    });
-    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');
+      const loading = page.locator('ion-loading');
+      const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidPresent');
 
-        await page.click(selector);
+      await runVisualTest(page, '#basic-loading', screenshot, 'basic');
 
-        await ionLoadingDidPresent.next();
+      await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss());
 
-        await expect(page).toHaveScreenshot(screenshot(`loading-${screenshotModifier}-diff`));
+      await ionLoadingDidDismiss.next();
 
-        const loading = page.locator('ion-loading');
-        await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss());
-
-        await ionLoadingDidDismiss.next();
-
-        await 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, '#custom-class-loading', 'custom-class');
-      });
-      test('should open a loader with html content', async ({ page }) => {
-        await runVisualTest(page, '#html-content-loading', 'html-content');
-      });
+      await expect(loading).toBeHidden();
     });
   });
 });
 
 /**
- * These behaviors do not vary across modes/directions
+ * These behaviors do not vary across directions.
  */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('loading: html attributes'), () => {
-    test('it should pass html attributes to the loader', async ({ page }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('loading: variants rendering'), () => {
+    test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/loading/test/basic', config);
-
-      const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-
-      await page.click('#basic-loading');
-
-      await ionLoadingDidPresent.next();
-
-      const loading = page.locator('ion-loading');
-      await expect(loading).toHaveAttribute('data-testid', 'basic-loading');
+    });
+    test('should open a loader with long text', async ({ page }) => {
+      await runVisualTest(page, '#long-content-loading', screenshot, 'long-content');
+    });
+    test('should open a loader with no spinner', async ({ page }) => {
+      await runVisualTest(page, '#no-spinner-loading', screenshot, 'no-spinner');
+    });
+    test('should open a loader with a custom class', async ({ page }) => {
+      await runVisualTest(page, '#custom-class-loading', screenshot, 'custom-class');
     });
   });
+});
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * Translucency is only available on iOS.
+   */
+  test.describe(title('loading: translucent rendering'), () => {
+    test('should open a translucent loader', async ({ page }) => {
+      await page.goto('/src/components/loading/test/basic', config);
+      await runVisualTest(page, '#translucent-loading', screenshot, 'translucent');
+    });
+  });
+
+  /**
+   * These behaviors do not vary across modes/directions
+   */
   test.describe(title('loading: focus trapping'), () => {
     test('it should trap focus in the loader', async ({ page, browserName }) => {
       await page.goto('/src/components/loading/test/basic', config);

core/src/components/loading/test/basic/loading.spec.tsx

@@ -0,0 +1,17 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Loading } from '../../loading';
+
+describe('loading: htmlAttributes inheritance', () => {
+  it('should correctly inherit attributes on host', async () => {
+    const page = await newSpecPage({
+      components: [Loading],
+      template: () => <ion-loading htmlAttributes={{ 'data-testid': 'basic-loading' }}></ion-loading>,
+    });
+
+    const loading = page.body.querySelector('ion-loading');
+
+    await expect(loading.getAttribute('data-testid')).toBe('basic-loading');
+  });
+});

core/src/components/loading/test/is-open/loading.e2e.ts

@@ -6,29 +6,19 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('loading: isOpen'), () => {
-    test.beforeEach(async ({ page }) => {
+    test('should open and close the loading indicator', async ({ page }) => {
       await page.goto('/src/components/loading/test/is-open', config);
-    });
 
-    test('should open the loading indicator', async ({ page }) => {
       const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+      const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidDismiss');
       const loading = page.locator('ion-loading');
 
       await page.click('#default');
 
       await ionLoadingDidPresent.next();
       await expect(loading).toBeVisible();
-    });
 
-    test('should open the loading indicator then close after a timeout', async ({ page }) => {
-      const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-      const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidDismiss');
-      const loading = page.locator('ion-loading');
-
-      await page.click('#timeout');
-
-      await ionLoadingDidPresent.next();
-      await expect(loading).toBeVisible();
+      await loading.evaluate((el: HTMLIonLoadingElement) => (el.isOpen = false));
 
       await ionLoadingDidDismiss.next();
       await expect(loading).toBeHidden();

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

@@ -1,26 +1,23 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, config }) => {
   test.describe(title('loading: standalone'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/src/components/loading/test/standalone', config);
-    });
     test('should open a basic loader', async ({ page }) => {
+      await page.goto('/src/components/loading/test/standalone', config);
+
       const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
       const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidPresent');
+      const loading = page.locator('ion-loading');
 
       await page.click('#basic-loading');
 
       await ionLoadingDidPresent.next();
+      await expect(loading).toBeVisible();
 
-      await expect(page).toHaveScreenshot(screenshot(`loading-standalone-diff`));
-
-      const loading = page.locator('ion-loading');
       await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss());
 
       await ionLoadingDidDismiss.next();
-
       await expect(loading).toBeHidden();
     });
   });