test(toggle): migrate to generators (#27390)

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

Toggle tests are using legacy syntax

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

- Toggle tests are using modern syntax


16bb695631

- The basic directory had unused screenshots, so I removed them.


8b2480c391

- The on/off dark mode tests do not vary across directions, so I removed
the RTL checks

## 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/toggle/test/a11y/toggle.e2e-legacy.ts

@@ -1,17 +0,0 @@
-import AxeBuilder from '@axe-core/playwright';
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('toggle: a11y', () => {
-  test.beforeEach(async ({ skip }) => {
-    skip.rtl();
-    skip.mode('md');
-  });
-
-  test('should not have accessibility violations', async ({ page }) => {
-    await page.goto(`/src/components/toggle/test/a11y`);
-
-    const results = await new AxeBuilder({ page }).analyze();
-    expect(results.violations).toEqual([]);
-  });
-});

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

@@ -0,0 +1,14 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('toggle: a11y'), () => {
+    test('should not have accessibility violations', async ({ page }) => {
+      await page.goto(`/src/components/toggle/test/a11y`, config);
+
+      const results = await new AxeBuilder({ page }).analyze();
+      expect(results.violations).toEqual([]);
+    });
+  });
+});

core/src/components/toggle/test/color/toggle.e2e-legacy.ts

@@ -1,25 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('toggle: color', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-  test('should apply color when checked', async ({ page }) => {
-    await page.setContent(`
-      <ion-toggle color="danger" checked="true">Label</ion-toggle>
-    `);
-
-    const toggle = page.locator('ion-toggle');
-    expect(await toggle.screenshot()).toMatchSnapshot(`toggle-color-checked-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should not apply color when unchecked', async ({ page }) => {
-    await page.setContent(`
-      <ion-toggle color="danger">Label</ion-toggle>
-    `);
-
-    const toggle = page.locator('ion-toggle');
-    expect(await toggle.screenshot()).toMatchSnapshot(`toggle-color-unchecked-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/toggle/test/color/toggle.e2e.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: color'), () => {
+    test('should apply color when checked', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toggle color="danger" checked="true">Label</ion-toggle>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-color-checked`));
+    });
+
+    test('should not apply color when unchecked', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toggle color="danger">Label</ion-toggle>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-color-unchecked`));
+    });
+  });
+});

core/src/components/toggle/test/enable-on-off-labels/toggle.e2e-legacy.ts

@@ -1,38 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('toggle: enableOnOffLabels', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(`/src/components/toggle/test/enable-on-off-labels`);
-  });
-
-  test('should not have visual regressions', async ({ page }) => {
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`toggle-on-off-labels-diff-${page.getSnapshotSettings()}.png`);
-  });
-
-  test.describe('dark mode', () => {
-    test('should not have visual regressions', async ({ page }) => {
-      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-      const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-
-      await page.click('#popover-trigger');
-      await ionPopoverDidPresent.next();
-
-      await page.click('#dark-mode');
-
-      await page.evaluate(() => {
-        const popover = document.querySelector('ion-popover');
-        return popover?.dismiss();
-      });
-      await ionPopoverDidDismiss.next();
-
-      await page.waitForChanges();
-
-      await page.setIonViewport();
-
-      await expect(page).toHaveScreenshot(`toggle-on-off-labels-dark-mode-diff-${page.getSnapshotSettings()}.png`);
-    });
-  });
-});

core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts

@@ -0,0 +1,49 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: enableOnOffLabels'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
+    });
+
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-diff`));
+    });
+  });
+});
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: dark mode'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
+    });
+
+    test('should not have visual regressions', async ({ page }) => {
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+
+      await page.click('#popover-trigger');
+      await ionPopoverDidPresent.next();
+
+      await page.click('#dark-mode');
+
+      await page.evaluate(() => {
+        const popover = document.querySelector('ion-popover');
+        return popover?.dismiss();
+      });
+      await ionPopoverDidDismiss.next();
+
+      await page.waitForChanges();
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-dark-mode-diff`));
+    });
+  });
+});

core/src/components/toggle/test/item/label.e2e-legacy.ts

@@ -1,37 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('toggle: item', () => {
-  test('should render correctly in list', async ({ page }) => {
-    await page.setContent(`
-      <ion-list>
-        <ion-item>
-          <ion-toggle>Enable Notifications</ion-toggle>
-        </ion-item>
-      </ion-list>
-    `);
-    const list = page.locator('ion-list');
-    expect(await list.screenshot()).toMatchSnapshot(`toggle-list-${page.getSnapshotSettings()}.png`);
-  });
-  test('should render correctly in inset list', async ({ page }) => {
-    await page.setContent(`
-      <ion-list inset="true">
-        <ion-item>
-          <ion-toggle>Enable Notifications</ion-toggle>
-        </ion-item>
-      </ion-list>
-    `);
-    const list = page.locator('ion-list');
-    expect(await list.screenshot()).toMatchSnapshot(`toggle-inset-list-${page.getSnapshotSettings()}.png`);
-  });
-  test('label should have correct contrast when used in an item', async ({ page, skip }) => {
-    skip.rtl();
-    await page.setContent(`
-      <ion-item color="primary">
-        <ion-toggle>Enable Notifications</ion-toggle>
-      </ion-item>
-    `);
-    const item = page.locator('ion-item');
-    expect(await item.screenshot()).toMatchSnapshot(`toggle-item-color-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/toggle/test/item/label.e2e.ts

@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: item'), () => {
+    test('should render correctly in list', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-list>
+          <ion-item>
+            <ion-toggle>Enable Notifications</ion-toggle>
+          </ion-item>
+        </ion-list>
+      `,
+        config
+      );
+      const list = page.locator('ion-list');
+      expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-list`));
+    });
+    test('should render correctly in inset list', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-list inset="true">
+          <ion-item>
+            <ion-toggle>Enable Notifications</ion-toggle>
+          </ion-item>
+        </ion-list>
+      `,
+        config
+      );
+      const list = page.locator('ion-list');
+      expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-inset-list`));
+    });
+  });
+});
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: item color contrast'), () => {
+    test('label should have correct contrast when used in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item color="primary">
+          <ion-toggle>Enable Notifications</ion-toggle>
+        </ion-item>
+      `,
+        config
+      );
+      const item = page.locator('ion-item');
+      expect(await item.screenshot()).toMatchSnapshot(screenshot(`toggle-item-color`));
+    });
+  });
+});

core/src/components/toggle/test/label/toggle.e2e-legacy.ts

@@ -1,120 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-/**
- * By default ion-toggle only takes up
- * as much space as it needs. Justification is
- * used for when the toggle takes up the full
- * line (such as in an ion-item). As a result,
- * we set the width of the toggle so we can
- * see the justification results.
- */
-test.describe('toggle: label', () => {
-  test.describe('toggle: start placement', () => {
-    test('should render a start justification with label in the start position', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-toggle label-placement="start" justify="start" style="width: 200px">Label</ion-toggle>
-      `);
-
-      const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(
-        `toggle-label-start-justify-start-${page.getSnapshotSettings()}.png`
-      );
-    });
-    test('should render an end justification with label in the start position', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-toggle label-placement="start" justify="end" style="width: 200px">Label</ion-toggle>
-      `);
-
-      const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(
-        `toggle-label-start-justify-end-${page.getSnapshotSettings()}.png`
-      );
-    });
-    test('should render a space between justification with label in the start position', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-toggle label-placement="start" justify="space-between" style="width: 200px">Label</ion-toggle>
-      `);
-
-      const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(
-        `toggle-label-start-justify-space-between-${page.getSnapshotSettings()}.png`
-      );
-    });
-  });
-
-  test.describe('toggle: end placement', () => {
-    test('should render a start justification with label in the end position', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-toggle label-placement="end" justify="start" style="width: 200px">Label</ion-toggle>
-      `);
-
-      const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(
-        `toggle-label-end-justify-start-${page.getSnapshotSettings()}.png`
-      );
-    });
-    test('should render an end justification with label in the end position', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-toggle label-placement="end" justify="end" style="width: 200px">Label</ion-toggle>
-      `);
-
-      const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(
-        `toggle-label-end-justify-end-${page.getSnapshotSettings()}.png`
-      );
-    });
-    test('should render a space between justification with label in the end position', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-toggle label-placement="end" justify="space-between" style="width: 200px">Label</ion-toggle>
-      `);
-
-      const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(
-        `toggle-label-end-justify-space-between-${page.getSnapshotSettings()}.png`
-      );
-    });
-  });
-
-  test.describe('toggle: fixed placement', () => {
-    test('should render a start justification with label in the fixed position', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-toggle label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-toggle>
-      `);
-
-      const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(
-        `toggle-label-fixed-justify-start-${page.getSnapshotSettings()}.png`
-      );
-    });
-    test('should render an end justification with label in the fixed position', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-toggle label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-toggle>
-      `);
-
-      const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(
-        `toggle-label-fixed-justify-end-${page.getSnapshotSettings()}.png`
-      );
-    });
-    test('should render a space between justification with label in the fixed position', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-toggle label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-toggle>
-      `);
-
-      const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(
-        `toggle-label-fixed-justify-space-between-${page.getSnapshotSettings()}.png`
-      );
-    });
-  });
-});

core/src/components/toggle/test/label/toggle.e2e.ts

@@ -0,0 +1,129 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * By default ion-toggle only takes up
+ * as much space as it needs. Justification is
+ * used for when the toggle takes up the full
+ * line (such as in an ion-item). As a result,
+ * we set the width of the toggle so we can
+ * see the justification results.
+ */
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: start placement'), () => {
+    test('should render a start justification with label in the start position', async ({ page }) => {
+      await page.setContent(
+        `
+
+         <ion-toggle label-placement="start" justify="start" style="width: 200px">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-start-justify-start`));
+    });
+    test('should render an end justification with label in the start position', async ({ page }) => {
+      await page.setContent(
+        `
+
+         <ion-toggle label-placement="start" justify="end" style="width: 200px">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-start-justify-end`));
+    });
+    test('should render a space between justification with label in the start position', async ({ page }) => {
+      await page.setContent(
+        `
+
+         <ion-toggle label-placement="start" justify="space-between" style="width: 200px">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-start-justify-space-between`));
+    });
+  });
+
+  test.describe(title('toggle: end placement'), () => {
+    test('should render a start justification with label in the end position', async ({ page }) => {
+      await page.setContent(
+        `
+
+         <ion-toggle label-placement="end" justify="start" style="width: 200px">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-end-justify-start`));
+    });
+    test('should render an end justification with label in the end position', async ({ page }) => {
+      await page.setContent(
+        `
+
+         <ion-toggle label-placement="end" justify="end" style="width: 200px">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-end-justify-end`));
+    });
+    test('should render a space between justification with label in the end position', async ({ page }) => {
+      await page.setContent(
+        `
+
+         <ion-toggle label-placement="end" justify="space-between" style="width: 200px">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-end-justify-space-between`));
+    });
+  });
+
+  test.describe(title('toggle: fixed placement'), () => {
+    test('should render a start justification with label in the fixed position', async ({ page }) => {
+      await page.setContent(
+        `
+
+         <ion-toggle label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-fixed-justify-start`));
+    });
+    test('should render an end justification with label in the fixed position', async ({ page }) => {
+      await page.setContent(
+        `
+
+         <ion-toggle label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-fixed-justify-end`));
+    });
+    test('should render a space between justification with label in the fixed position', async ({ page }) => {
+      await page.setContent(
+        `
+
+         <ion-toggle label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-fixed-justify-space-between`));
+    });
+  });
+});