test(button): migrate to generator (#27293)

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

Button is using legacy test format

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

- Button uses generator test format 
## 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/button/test/basic/button.e2e-legacy.ts

@@ -1,56 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: basic', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/basic`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-diff-${page.getSnapshotSettings()}.png`);
-  });
-  test('should correctly set fill to undefined', async ({ page, skip }) => {
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/ionic-team/ionic-framework/issues/25886',
-    });
-    skip.rtl();
-    skip.mode('ios', 'This behavior does not differ across modes');
-    await page.setContent(`
-      <ion-button fill="outline"></ion-button>
-    `);
-
-    const button = page.locator('ion-button');
-    await expect(button).toHaveClass(/button-outline/);
-
-    await button.evaluate((el: HTMLIonButtonElement) => (el.fill = undefined));
-    await page.waitForChanges();
-
-    await expect(button).toHaveClass(/button-solid/);
-  });
-});
-
-test.describe('button: ripple effect', () => {
-  test('should not have visual regressions', async ({ page, skip }) => {
-    skip.mode('ios', 'Ripple effect is only available in MD mode.');
-
-    await page.goto(`/src/components/button/test/basic?ionic:_testing=false`);
-
-    const button = page.locator('#default');
-
-    await button.scrollIntoViewIfNeeded();
-
-    const boundingBox = await button.boundingBox();
-
-    if (boundingBox) {
-      await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
-      await page.mouse.down();
-    }
-
-    await page.waitForSelector('#default.ion-activated');
-
-    await expect(button).toHaveScreenshot(`button-ripple-effect-${page.getSnapshotSettings()}.png`, {
-      animations: 'disabled',
-    });
-  });
-});

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

@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ config, screenshot, title }) => {
+  test.describe(title('button: basic'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/basic`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-diff`));
+    });
+  });
+});
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ config, title }) => {
+  test.describe(title('button: basic'), () => {
+    test('should correctly set fill to undefined', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/25886',
+      });
+      await page.setContent(
+        `
+        <ion-button fill="outline"></ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+      await expect(button).toHaveClass(/button-outline/);
+
+      await button.evaluate((el: HTMLIonButtonElement) => (el.fill = undefined));
+      await page.waitForChanges();
+
+      await expect(button).toHaveClass(/button-solid/);
+    });
+  });
+});
+
+/**
+ * Ripple effect is only available in MD mode.
+ */
+configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('button: ripple effect'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/basic?ionic:_testing=false`, config);
+
+      const button = page.locator('#default');
+
+      await button.scrollIntoViewIfNeeded();
+
+      const boundingBox = await button.boundingBox();
+
+      if (boundingBox) {
+        await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
+        await page.mouse.down();
+      }
+
+      await page.waitForSelector('#default.ion-activated');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`));
+    });
+  });
+});

core/src/components/button/test/clear/button.e2e-legacy.ts

@@ -1,12 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: clear', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/clear`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-clear-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/button/test/clear/button.e2e.ts

@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, config, screenshot }) => {
+  test.describe(title('button: clear'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/clear`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-clear`));
+    });
+  });
+});

core/src/components/button/test/expand/button.e2e-legacy.ts

@@ -1,13 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: expand', () => {
-  test('should not have visual regressions', async ({ page, skip }) => {
-    skip.rtl('All content takes up the full width, so RTL has no effect.');
-    await page.goto(`/src/components/button/test/expand`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-expand-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/button/test/expand/button.e2e.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * All content takes up the full width, so RTL has no effect.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: expand'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/expand`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-expand`));
+    });
+  });
+});

core/src/components/button/test/form-reference/button.e2e-legacy.ts

@@ -1,93 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: form', () => {
-  test('should submit the form by id', async ({ page }) => {
-    await page.setContent(`
-      <form id="myForm"></form>
-      <ion-button form="myForm" type="submit">Submit</ion-button>
-    `);
-
-    const submitEvent = await page.spyOnEvent('submit');
-
-    await page.click('ion-button');
-
-    expect(submitEvent).toHaveReceivedEvent();
-  });
-
-  test('should submit the form by reference', async ({ page }) => {
-    await page.setContent(`
-      <form></form>
-      <ion-button type="submit">Submit</ion-button>
-      <script>
-        const form = document.querySelector('form');
-        const button = document.querySelector('ion-button');
-        button.form = form;
-      </script>
-    `);
-
-    const submitEvent = await page.spyOnEvent('submit');
-
-    await page.click('ion-button');
-
-    expect(submitEvent).toHaveReceivedEvent();
-  });
-
-  test('should submit the closest form', async ({ page }) => {
-    await page.setContent(`
-      <form>
-         <ion-button type="submit">Submit</ion-button>
-      </form>
-    `);
-
-    const submitEvent = await page.spyOnEvent('submit');
-
-    await page.click('ion-button');
-
-    expect(submitEvent).toHaveReceivedEvent();
-  });
-
-  test.describe('should throw a warning if the form cannot be found', () => {
-    test('form is a string selector', async ({ page }) => {
-      await page.setContent(`<ion-button type="submit" form="missingForm">Submit</ion-button>`);
-
-      const logs: string[] = [];
-
-      page.on('console', (msg) => {
-        logs.push(msg.text());
-      });
-
-      await page.click('ion-button');
-
-      expect(logs.length).toBe(1);
-      expect(logs[0]).toContain(
-        '[Ionic Warning]: Form with selector: "#missingForm" could not be found. Verify that the id is correct and the form is rendered in the DOM.'
-      );
-    });
-
-    test('form is an element reference', async ({ page }) => {
-      await page.setContent(`
-        <ion-button type="submit">Submit</ion-button>
-        <script>
-          const form = document.querySelector('form');
-          const button = document.querySelector('ion-button');
-
-          button.form = form;
-        </script>
-      `);
-
-      const logs: string[] = [];
-
-      page.on('console', (msg) => {
-        logs.push(msg.text());
-      });
-
-      await page.click('ion-button');
-
-      expect(logs.length).toBe(1);
-      expect(logs[0]).toContain(
-        '[Ionic Warning]: The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'
-      );
-    });
-  });
-});

core/src/components/button/test/form-reference/button.e2e.ts

@@ -0,0 +1,107 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => {
+  test.describe(title('button: form'), () => {
+    test('should submit the form by id', async ({ page }) => {
+      await page.setContent(
+        `
+        <form id="myForm"></form>
+        <ion-button form="myForm" type="submit">Submit</ion-button>
+      `,
+        config
+      );
+
+      const submitEvent = await page.spyOnEvent('submit');
+
+      await page.click('ion-button');
+
+      expect(submitEvent).toHaveReceivedEvent();
+    });
+
+    test('should submit the form by reference', async ({ page }) => {
+      await page.setContent(
+        `
+        <form></form>
+        <ion-button type="submit">Submit</ion-button>
+        <script>
+          const form = document.querySelector('form');
+          const button = document.querySelector('ion-button');
+          button.form = form;
+        </script>
+      `,
+        config
+      );
+
+      const submitEvent = await page.spyOnEvent('submit');
+
+      await page.click('ion-button');
+
+      expect(submitEvent).toHaveReceivedEvent();
+    });
+
+    test('should submit the closest form', async ({ page }) => {
+      await page.setContent(
+        `
+        <form>
+           <ion-button type="submit">Submit</ion-button>
+        </form>
+      `,
+        config
+      );
+
+      const submitEvent = await page.spyOnEvent('submit');
+
+      await page.click('ion-button');
+
+      expect(submitEvent).toHaveReceivedEvent();
+    });
+  });
+
+  test.describe(title('should throw a warning if the form cannot be found'), () => {
+    test('form is a string selector', async ({ page }) => {
+      await page.setContent(`<ion-button type="submit" form="missingForm">Submit</ion-button>`, config);
+
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        logs.push(msg.text());
+      });
+
+      await page.click('ion-button');
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: Form with selector: "#missingForm" could not be found. Verify that the id is correct and the form is rendered in the DOM.'
+      );
+    });
+
+    test('form is an element reference', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button type="submit">Submit</ion-button>
+        <script>
+          const form = document.querySelector('form');
+          const button = document.querySelector('ion-button');
+
+          button.form = form;
+        </script>
+      `,
+        config
+      );
+
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        logs.push(msg.text());
+      });
+
+      await page.click('ion-button');
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'
+      );
+    });
+  });
+});

core/src/components/button/test/icon/button.e2e-legacy.ts

@@ -1,12 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: icon', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/icon`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-icon-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/button/test/icon/button.e2e.ts

@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: icon'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/icon`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-icon`));
+    });
+  });
+});

core/src/components/button/test/outline/button.e2e-legacy.ts

@@ -1,12 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: outline', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/outline`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-outline-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/button/test/outline/button.e2e.ts

@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: outline'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/outline`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-outline`));
+    });
+  });
+});

core/src/components/button/test/round/button.e2e-legacy.ts

@@ -1,13 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: round', () => {
-  test('should not have visual regressions', async ({ page, skip }) => {
-    skip.rtl('All content takes up the full width, so RTL has no effect.');
-    await page.goto(`/src/components/button/test/round`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-round-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/button/test/round/button.e2e.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * All content takes up the full width, so RTL has no effect.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: round'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/round`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-round`));
+    });
+  });
+});

core/src/components/button/test/size/button.e2e-legacy.ts

@@ -1,50 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: size', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-  test('should render small buttons', async ({ page }) => {
-    await page.setContent(`
-      <ion-button size="small" fill="solid">Small Button</ion-button>
-    `);
-
-    const wrapper = page.locator('ion-button');
-
-    await expect(wrapper).toHaveScreenshot(`button-size-small-${page.getSnapshotSettings()}.png`);
-  });
-  test('should render large buttons', async ({ page }) => {
-    await page.setContent(`
-      <ion-button size="large" fill="solid">Large Button</ion-button>
-    `);
-
-    const wrapper = page.locator('ion-button');
-
-    await expect(wrapper).toHaveScreenshot(`button-size-large-${page.getSnapshotSettings()}.png`);
-  });
-  test.describe('in ion-buttons', () => {
-    test('should render small button', async ({ page }) => {
-      await page.setContent(`
-        <ion-buttons>
-          <ion-button size="small" fill="solid">Small Button</ion-button>
-        </ion-buttons>
-      `);
-
-      const wrapper = page.locator('ion-button');
-
-      await expect(wrapper).toHaveScreenshot(`button-size-small-in-buttons-${page.getSnapshotSettings()}.png`);
-    });
-    test('should render large button', async ({ page }) => {
-      await page.setContent(`
-        <ion-buttons>
-          <ion-button size="large" fill="solid">Large Button</ion-button>
-        </ion-buttons>
-      `);
-
-      const wrapper = page.locator('ion-button');
-
-      await expect(wrapper).toHaveScreenshot(`button-size-large-in-buttons-${page.getSnapshotSettings()}.png`);
-    });
-  });
-});

core/src/components/button/test/size/button.e2e.ts

@@ -0,0 +1,62 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: size'), () => {
+    test('should render small buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button size="small" fill="solid">Small Button</ion-button>
+      `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-small`));
+    });
+    test('should render large buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button size="large" fill="solid">Large Button</ion-button>
+      `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-large`));
+    });
+  });
+
+  test.describe(title('in ion-buttons'), () => {
+    test('should render small button', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-buttons>
+        <ion-button size="small" fill="solid">Small Button</ion-button>
+      </ion-buttons>
+    `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-small-in-buttons`));
+    });
+    test('should render large button', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-buttons>
+        <ion-button size="large" fill="solid">Large Button</ion-button>
+      </ion-buttons>
+    `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-large-in-buttons`));
+    });
+  });
+});