test(loading): remove redundant tests (#27430)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There were several redundant tests I missed during the initial generator
pass.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->


b8a3df049e

- Moved the `htmlAttributes` e2e test to a spec test


fb3f96840c

- Removed the HTML content screenshot test. HTML content is already
tested in `test/loading.spec.ts`.


fc7c166e0e

- Removed the per-direction checks on the non-basic tests as these
behaviors do not vary across directions. The basic test still has
per-direction checks
- Also removed the per-mode check on the translucent test since this
feature is available on iOS only


8524b6c9d6

- The isOpen tests are testing that you can open/close the modal by
triggering the `isOpen` property. I combined the two tests into 1 test
since they are doing the same thing: Checking that the modal opens when
`isOpen` is `true` and closes when `isOpen` is false. This also avoids
the 500ms timeout of the 2nd test which should speed up execution.


f6dac8b47c

- Removed the "standalone" screenshot in favor of just checking that the
overlay is visible. Rendering of the contents of the overlay are not
dependent on `ion-app` being present.


a2d6289101

- The `runVisualTests` util in `test/basic` was checking that every
loading instance could also dismiss. This is only needed for the basic
test, so I removed this logic from the shared util and add it just to
the basic test.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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();
     });
   });