test(accordion): migrate to generator (#27243)

Issue number: N/A

---------

This PR migrates the accordion tests to use the generator
infrastructure.

core/src/components/accordion/test/a11y/accordion.e2e-legacy.ts

@@ -1,44 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('accordion: a11y', () => {
-  test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
-    // TODO(FW-1764): remove skip once issue is resolved
-    skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
-    // TODO (FW-2979)
-    skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
-
-    await page.goto(`/src/components/accordion/test/a11y`);
-    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-
-    const personalInfoHeader = page.locator('ion-accordion:first-child > ion-item');
-    const billingAddressHeader = page.locator('ion-accordion:nth-child(2) > ion-item');
-    const shippingAddressHeader = page.locator('ion-accordion:nth-child(3) > ion-item');
-    const addressInput = page.locator('#address1 input');
-
-    await page.keyboard.press(tabKey);
-    await expect(personalInfoHeader).toBeFocused();
-
-    await page.keyboard.press('ArrowDown');
-    await expect(billingAddressHeader).toBeFocused();
-
-    await page.keyboard.press('ArrowDown');
-    await expect(shippingAddressHeader).toBeFocused();
-
-    await page.keyboard.press('ArrowDown');
-    await expect(personalInfoHeader).toBeFocused();
-
-    await page.keyboard.press('ArrowUp');
-    await expect(shippingAddressHeader).toBeFocused();
-
-    // open Shipping Address accordion and move focus to the input inside it
-    await page.keyboard.press('Enter');
-    await page.waitForChanges();
-    await page.keyboard.press(tabKey);
-    await expect(addressInput).toBeFocused();
-
-    // ensure keyboard interaction doesn't move focus from body
-    await page.keyboard.press('ArrowDown');
-    await expect(addressInput).toBeFocused();
-  });
-});

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

@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ config, title }) => {
+  test.describe(title('accordion: a11y'), () => {
+    test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
+      // TODO(FW-1764): remove skip once issue is resolved
+      skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
+      // TODO (FW-2979)
+      skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
+
+      await page.goto(`/src/components/accordion/test/a11y`, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      const personalInfoHeader = page.locator('ion-accordion:first-child > ion-item');
+      const billingAddressHeader = page.locator('ion-accordion:nth-child(2) > ion-item');
+      const shippingAddressHeader = page.locator('ion-accordion:nth-child(3) > ion-item');
+      const addressInput = page.locator('#address1 input');
+
+      await page.keyboard.press(tabKey);
+      await expect(personalInfoHeader).toBeFocused();
+
+      await page.keyboard.press('ArrowDown');
+      await expect(billingAddressHeader).toBeFocused();
+
+      await page.keyboard.press('ArrowDown');
+      await expect(shippingAddressHeader).toBeFocused();
+
+      await page.keyboard.press('ArrowDown');
+      await expect(personalInfoHeader).toBeFocused();
+
+      await page.keyboard.press('ArrowUp');
+      await expect(shippingAddressHeader).toBeFocused();
+
+      // open Shipping Address accordion and move focus to the input inside it
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      await page.keyboard.press(tabKey);
+      await expect(addressInput).toBeFocused();
+
+      // ensure keyboard interaction doesn't move focus from body
+      await page.keyboard.press('ArrowDown');
+      await expect(addressInput).toBeFocused();
+    });
+  });
+});

core/src/components/accordion/test/accordion.e2e-legacy.ts

@@ -1,56 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('accordion: states', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-    skip.mode('ios');
-  });
-  test('should properly set readonly on child accordions', async ({ page }) => {
-    await page.setContent(`
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `);
-
-    const accordionGroup = page.locator('ion-accordion-group');
-    const accordion = page.locator('ion-accordion');
-
-    await expect(accordion).toHaveJSProperty('readonly', false);
-
-    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-      el.readonly = true;
-    });
-
-    await page.waitForChanges();
-
-    await expect(accordion).toHaveJSProperty('readonly', true);
-  });
-
-  test('should properly set disabled on child accordions', async ({ page }) => {
-    await page.setContent(`
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `);
-
-    const accordionGroup = page.locator('ion-accordion-group');
-    const accordion = page.locator('ion-accordion');
-
-    await expect(accordion).toHaveJSProperty('disabled', false);
-
-    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-      el.disabled = true;
-    });
-
-    await page.waitForChanges();
-
-    await expect(accordion).toHaveJSProperty('disabled', true);
-  });
-});

core/src/components/accordion/test/accordion.e2e.ts

@@ -0,0 +1,49 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: states'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+    });
+    test('should properly set readonly on child accordions', async ({ page }) => {
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('readonly', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.readonly = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('readonly', true);
+    });
+
+    test('should properly set disabled on child accordions', async ({ page }) => {
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('disabled', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.disabled = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('disabled', true);
+    });
+  });
+});

core/src/components/accordion/test/basic/accordion.e2e-legacy.ts

@@ -1,74 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('accordion: basic', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/accordion/test/basic`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`accordion-basic-${page.getSnapshotSettings()}.png`);
-  });
-});
-
-test.describe('accordion: ionChange', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-  test('should fire ionChange when interacting with accordions', async ({ page }) => {
-    await page.setContent(`
-      <ion-accordion-group value="second">
-        <ion-accordion value="first">
-          <button slot="header">Header</button>
-          <div slot="content">First Content</div>
-        </ion-accordion>
-        <ion-accordion value="second">
-          <button slot="header">Header</button>
-          <div slot="content">Second Content</div>
-        </ion-accordion>
-        <ion-accordion value="third">
-          <button slot="header">Header</button>
-          <div slot="content">Third Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `);
-
-    const ionChange = await page.spyOnEvent('ionChange');
-    const accordionHeaders = page.locator('button[slot="header"]');
-
-    await accordionHeaders.nth(0).click();
-    await expect(ionChange).toHaveReceivedEventDetail({ value: 'first' });
-
-    await accordionHeaders.nth(1).click();
-    await expect(ionChange).toHaveReceivedEventDetail({ value: 'second' });
-
-    await accordionHeaders.nth(2).click();
-    await expect(ionChange).toHaveReceivedEventDetail({ value: 'third' });
-  });
-
-  test('should not fire when programmatically setting a valid value', async ({ page }) => {
-    await page.setContent(`
-      <ion-accordion-group>
-        <ion-accordion value="first">
-          <button slot="header">Header</button>
-          <div slot="content">First Content</div>
-        </ion-accordion>
-        <ion-accordion value="second">
-          <button slot="header">Header</button>
-          <div slot="content">Second Content</div>
-        </ion-accordion>
-        <ion-accordion value="third">
-          <button slot="header">Header</button>
-          <div slot="content">Third Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-
-    `);
-
-    const ionChange = await page.spyOnEvent('ionChange');
-    const accordionGroup = page.locator('ion-accordion-group');
-
-    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => (el.value = 'second'));
-    await expect(ionChange).not.toHaveReceivedEvent();
-  });
-});

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

@@ -0,0 +1,60 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: basic'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/basic`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot('accordion-basic'));
+    });
+  });
+});
+configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: ionChange'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group>
+        <ion-accordion value="first">
+          <button slot="header">Header</button>
+          <div slot="content">First Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <button slot="header">Header</button>
+          <div slot="content">Second Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <button slot="header">Header</button>
+          <div slot="content">Third Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+    });
+    test('should fire ionChange when interacting with accordions', async ({ page }) => {
+      const ionChange = await page.spyOnEvent('ionChange');
+      const accordionHeaders = page.locator('button[slot="header"]');
+
+      await accordionHeaders.nth(0).click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'first' });
+
+      await accordionHeaders.nth(1).click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'second' });
+
+      await accordionHeaders.nth(2).click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'third' });
+    });
+
+    test('should not fire when programmatically setting a valid value', async ({ page }) => {
+      const ionChange = await page.spyOnEvent('ionChange');
+      const accordionGroup = page.locator('ion-accordion-group');
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => (el.value = 'second'));
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
+  });
+});

core/src/components/accordion/test/multiple/accordion.e2e-legacy.ts

@@ -1,32 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('accordion: multiple', () => {
-  test('should update value and visually expand items', async ({ page, skip }) => {
-    skip.rtl();
-
-    await page.goto(`/src/components/accordion/test/multiple`);
-    const accordionGroup = page.locator('ion-accordion-group');
-    const diningHeader = page.locator('ion-accordion[value="dining"] ion-item[slot="header"]');
-    const attractionsHeader = page.locator('ion-accordion[value="attractions"] ion-item[slot="header"]');
-
-    await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
-
-    await expect(accordionGroup).toHaveScreenshot(`accordion-one-open-${page.getSnapshotSettings()}.png`);
-
-    await diningHeader.click();
-    await page.waitForChanges();
-
-    await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
-
-    await expect(accordionGroup).toHaveScreenshot(`accordion-two-open-${page.getSnapshotSettings()}.png`);
-
-    await diningHeader.click();
-    await attractionsHeader.click();
-    await page.waitForChanges();
-
-    await expect(accordionGroup).toHaveJSProperty('value', []);
-
-    await expect(accordionGroup).toHaveScreenshot(`accordion-zero-open-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/accordion/test/multiple/accordion.e2e.ts

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: multiple'), () => {
+    test('should update value and visually expand items', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/multiple`, config);
+      const accordionGroup = page.locator('ion-accordion-group');
+      const diningHeader = page.locator('ion-accordion[value="dining"] ion-item[slot="header"]');
+      const attractionsHeader = page.locator('ion-accordion[value="attractions"] ion-item[slot="header"]');
+
+      await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
+
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-one-open'));
+
+      await diningHeader.click();
+      await page.waitForChanges();
+
+      await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
+
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-two-open'));
+
+      await diningHeader.click();
+      await attractionsHeader.click();
+      await page.waitForChanges();
+
+      await expect(accordionGroup).toHaveJSProperty('value', []);
+
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-zero-open'));
+    });
+  });
+});

core/src/components/accordion/test/nested/accordion.e2e-legacy.ts

@@ -1,28 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('accordion: nested', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-
-    await page.goto(`/src/components/accordion/test/nested`);
-  });
-
-  test('parent and child should not be disabled', async ({ page }) => {
-    const enabledGroup = page.locator('ion-accordion-group#enabled');
-
-    await expect(enabledGroup).toHaveScreenshot(`accordion-nested-enabled-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('parent should not be disabled when only child is disabled', async ({ page }) => {
-    const nestedDisabledGroup = page.locator('ion-accordion-group#nested-disabled');
-
-    await expect(nestedDisabledGroup).toHaveScreenshot(`accordion-child-disabled-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('parent and child should be disabled when parent is disabled', async ({ page }) => {
-    const parentDisabledGroup = page.locator('ion-accordion-group#parent-disabled');
-
-    await expect(parentDisabledGroup).toHaveScreenshot(`accordion-parent-disabled-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/accordion/test/nested/accordion.e2e.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: nested'), () => {
+    test('parent and child should not be disabled', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/nested`, config);
+
+      const enabledGroup = page.locator('ion-accordion-group#enabled');
+
+      await expect(enabledGroup).toHaveScreenshot(screenshot('accordion-nested-enabled'));
+    });
+
+    test('parent should not be disabled when only child is disabled', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/nested`, config);
+
+      const nestedDisabledGroup = page.locator('ion-accordion-group#nested-disabled');
+
+      await expect(nestedDisabledGroup).toHaveScreenshot(screenshot('accordion-child-disabled'));
+    });
+
+    test('parent and child should be disabled when parent is disabled', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/nested`, config);
+
+      const parentDisabledGroup = page.locator('ion-accordion-group#parent-disabled');
+
+      await expect(parentDisabledGroup).toHaveScreenshot(screenshot('accordion-parent-disabled'));
+    });
+  });
+});

core/src/components/accordion/test/standalone/accordion.e2e-legacy.ts

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

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

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