test(footer): migrate to generators (#27309)

Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- 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. -->

Footer tests us legacy syntax

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

- Footer tests us generator syntax

## 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/footer/test/basic/footer.e2e-legacy.ts

@@ -1,56 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('footer: basic', () => {
-  test.describe('footer: rendering', () => {
-    test('should not have visual regressions with basic footer', async ({ page }) => {
-      await page.setContent(`
-        <ion-footer>
-          <ion-toolbar>
-            <ion-title>Footer - Default</ion-title>
-          </ion-toolbar>
-        </ion-footer>
-      `);
-
-      const footer = page.locator('ion-footer');
-      await expect(footer).toHaveScreenshot(`footer-diff-${page.getSnapshotSettings()}.png`);
-    });
-  });
-
-  test.describe('footer: feature rendering', () => {
-    test.beforeEach(({ skip }) => {
-      skip.rtl();
-    });
-
-    test('should not have visual regressions with no border', async ({ page }) => {
-      await page.setContent(`
-        <ion-footer class="ion-no-border">
-          <ion-toolbar>
-            <ion-title>Footer - No Border</ion-title>
-          </ion-toolbar>
-        </ion-footer>
-      `);
-
-      const footer = page.locator('ion-footer');
-      await expect(footer).toHaveScreenshot(`footer-no-border-diff-${page.getSnapshotSettings()}.png`);
-    });
-
-    test('should not have visual regressions with translucent footer', async ({ page, skip }) => {
-      skip.mode('md', 'Translucent effect is only available in iOS mode.');
-
-      await page.setContent(`
-        <ion-footer translucent="true">
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/footer/test/img.jpg" />
-          </div>
-          <ion-toolbar>
-            <ion-title>Footer - Translucent</ion-title>
-          </ion-toolbar>
-        </ion-footer>
-      `);
-
-      const footer = page.locator('ion-footer');
-      await expect(footer).toHaveScreenshot(`footer-translucent-diff-${page.getSnapshotSettings()}.png`);
-    });
-  });
-});

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

@@ -0,0 +1,73 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('footer: rendering'), () => {
+    test('should not have visual regressions with basic footer', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-footer>
+            <ion-toolbar>
+              <ion-title>Footer - Default</ion-title>
+            </ion-toolbar>
+          </ion-footer>
+        `,
+        config
+      );
+
+      const footer = page.locator('ion-footer');
+      await expect(footer).toHaveScreenshot(screenshot(`footer-diff`));
+    });
+  });
+});
+
+/**
+ * This behavior does not vary
+ * across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('footer: feature rendering'), () => {
+    test('should not have visual regressions with no border', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-footer class="ion-no-border">
+          <ion-toolbar>
+            <ion-title>Footer - No Border</ion-title>
+          </ion-toolbar>
+        </ion-footer>
+      `,
+        config
+      );
+
+      const footer = page.locator('ion-footer');
+      await expect(footer).toHaveScreenshot(screenshot(`footer-no-border-diff`));
+    });
+  });
+});
+
+/**
+ * This behavior only exists on
+ * iOS mode and does not vary across directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('footer: translucent'), () => {
+    test('should not have visual regressions with translucent footer', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-footer translucent="true">
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/footer/test/img.jpg" />
+          </div>
+          <ion-toolbar>
+            <ion-title>Footer - Translucent</ion-title>
+          </ion-toolbar>
+        </ion-footer>
+      `,
+        config
+      );
+
+      const footer = page.locator('ion-footer');
+      await expect(footer).toHaveScreenshot(screenshot(`footer-translucent-diff`));
+    });
+  });
+});

core/src/components/footer/test/fade/footer.e2e-legacy.ts

@@ -1,23 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('footer: fade', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-
-  test('should not have visual regressions with fade footer', async ({ page, skip }) => {
-    skip.mode('md', 'Translucent effect is only available in iOS mode.');
-
-    await page.goto('/src/components/footer/test/fade');
-
-    const footer = page.locator('ion-footer');
-    await expect(footer).toHaveScreenshot(`footer-fade-blurred-diff-${page.getSnapshotSettings()}.png`);
-
-    const content = page.locator('ion-content');
-    await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
-    await page.waitForChanges();
-
-    await expect(footer).toHaveScreenshot(`footer-fade-not-blurred-diff-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/footer/test/fade/footer.e2e.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Fade effect is only available in iOS mode.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('footer: fade'), () => {
+    test('should not have visual regressions with fade footer', async ({ page }) => {
+      await page.goto('/src/components/footer/test/fade', config);
+
+      const footer = page.locator('ion-footer');
+      await expect(footer).toHaveScreenshot(screenshot(`footer-fade-blurred-diff`));
+
+      const content = page.locator('ion-content');
+      await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
+      await page.waitForChanges();
+
+      await expect(footer).toHaveScreenshot(screenshot(`footer-fade-not-blurred-diff`));
+    });
+  });
+});

core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts

@@ -1,30 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('footer: scroll-target', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-
-  /**
-   * This test suite verifies that the fade effect for iOS is working correctly
-   * when the `ion-footer` is using a custom scroll target with the `.ion-content-scroll-host`
-   * selector.
-   */
-  test('should not have visual regressions with custom scroll target footer', async ({ page, skip }) => {
-    skip.mode('md', 'Translucent effect is only available in iOS mode.');
-
-    await page.goto('/src/components/footer/test/scroll-target');
-
-    const footer = page.locator('ion-footer');
-    await expect(footer).toHaveScreenshot(`footer-fade-scroll-target-blurred-diff-${page.getSnapshotSettings()}.png`);
-
-    const scrollTarget = page.locator('#scroll-target');
-    await scrollTarget.evaluate((el: HTMLDivElement) => (el.scrollTop = el.scrollHeight));
-    await page.waitForChanges();
-
-    await expect(footer).toHaveScreenshot(
-      `footer-fade-scroll-target-not-blurred-diff-${page.getSnapshotSettings()}.png`
-    );
-  });
-});

core/src/components/footer/test/scroll-target/footer.e2e.ts

@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Translucent effect is only available in iOS mode.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('footer: scroll-target'), () => {
+    /**
+     * This test suite verifies that the fade effect for iOS is working correctly
+     * when the `ion-footer` is using a custom scroll target with the `.ion-content-scroll-host`
+     * selector.
+     */
+    test('should not have visual regressions with custom scroll target footer', async ({ page }) => {
+      await page.goto('/src/components/footer/test/scroll-target', config);
+
+      const footer = page.locator('ion-footer');
+      await expect(footer).toHaveScreenshot(screenshot(`footer-fade-scroll-target-blurred-diff`));
+
+      const scrollTarget = page.locator('#scroll-target');
+      await scrollTarget.evaluate((el: HTMLDivElement) => (el.scrollTop = el.scrollHeight));
+      await page.waitForChanges();
+
+      await expect(footer).toHaveScreenshot(screenshot(`footer-fade-scroll-target-not-blurred-diff`));
+    });
+  });
+});

core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts

@@ -1,13 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('footer: with tabs', () => {
-  test('should not have extra padding when near a tab bar', async ({ page }, testInfo) => {
-    test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
-
-    await page.goto('/src/components/footer/test/with-tabs');
-
-    const footer = page.locator('[tab="tab-one"] ion-footer');
-    await expect(footer).toHaveScreenshot(`footer-with-tabs-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/footer/test/with-tabs/footer.e2e.ts

@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This does not test LTR vs. RTL layout.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('footer: with tabs'), () => {
+    test('should not have extra padding when near a tab bar', async ({ page }) => {
+      await page.goto('/src/components/footer/test/with-tabs', config);
+
+      const footer = page.locator('[tab="tab-one"] ion-footer');
+      await expect(footer).toHaveScreenshot(screenshot(`footer-with-tabs`));
+    });
+  });
+});