Merge remote-tracking branch 'origin/main' into chore/sync-with-main-5-3

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

@@ -1,56 +1,65 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, 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`);
+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 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',
+      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.ts

@@ -1,12 +1,14 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, 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`);
+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 page.setIonViewport();
 
-    await expect(page).toHaveScreenshot(`button-clear-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`button-clear`));
+    });
   });
 });

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

@@ -1,13 +1,17 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, 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`);
+/**
+ * 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 page.setIonViewport();
 
-    await expect(page).toHaveScreenshot(`button-expand-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`button-expand`));
+    });
   });
 });

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

@@ -1,55 +1,66 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, 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>
-    `);
+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');
+      const submitEvent = await page.spyOnEvent('submit');
 
-    await page.click('ion-button');
+      await page.click('ion-button');
 
-    expect(submitEvent).toHaveReceivedEvent();
+      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('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.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>`);
+      await page.setContent(`<ion-button type="submit" form="missingForm">Submit</ion-button>`, config);
 
       const logs: string[] = [];
 
@@ -66,7 +77,8 @@ test.describe('button: form', () => {
     });
 
     test('form is an element reference', async ({ page }) => {
-      await page.setContent(`
+      await page.setContent(
+        `
         <ion-button type="submit">Submit</ion-button>
         <script>
           const form = document.querySelector('form');
@@ -74,7 +86,9 @@ test.describe('button: form', () => {
 
           button.form = form;
         </script>
-      `);
+      `,
+        config
+      );
 
       const logs: string[] = [];
 

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

@@ -1,12 +1,14 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, 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`);
+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 page.setIonViewport();
 
-    await expect(page).toHaveScreenshot(`button-icon-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`button-icon`));
+    });
   });
 });

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

@@ -1,12 +1,14 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, 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`);
+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 page.setIonViewport();
 
-    await expect(page).toHaveScreenshot(`button-outline-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`button-outline`));
+    });
   });
 });

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

@@ -1,13 +1,17 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, 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`);
+/**
+ * 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 page.setIonViewport();
 
-    await expect(page).toHaveScreenshot(`button-round-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`button-round`));
+    });
   });
 });

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

@@ -1,50 +1,62 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, 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>
-      `);
+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(`button-size-small-in-buttons-${page.getSnapshotSettings()}.png`);
+      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>
-      `);
+      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(`button-size-large-in-buttons-${page.getSnapshotSettings()}.png`);
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-large-in-buttons`));
     });
   });
 });

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

@@ -1,55 +1,66 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
 /**
  * Clear buttons have special font-weight
  * styles which is why we make sure
  * to capture the clear button here.
  */
-test.describe('button: strong', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-  test('should render strong button', async ({ page }) => {
-    await page.setContent(`
-      <ion-button fill="solid" strong="true">Button</ion-button>
-    `);
-
-    const wrapper = page.locator('ion-button');
-
-    await expect(wrapper).toHaveScreenshot(`button-strong-${page.getSnapshotSettings()}.png`);
-  });
-  test('should render strong clear button', async ({ page }) => {
-    await page.setContent(`
-      <ion-button fill="clear" strong="true">Button</ion-button>
-    `);
-
-    const wrapper = page.locator('ion-button');
-
-    await expect(wrapper).toHaveScreenshot(`button-clear-strong-${page.getSnapshotSettings()}.png`);
-  });
-  test.describe('in ion-buttons', () => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: strong'), () => {
     test('should render strong button', async ({ page }) => {
-      await page.setContent(`
-        <ion-buttons>
-          <ion-button strong="true" fill="solid">Button</ion-button>
-        </ion-buttons>
-      `);
+      await page.setContent(
+        `
+         <ion-button fill="solid" strong="true">Button</ion-button>
+       `,
+        config
+      );
 
       const wrapper = page.locator('ion-button');
 
-      await expect(wrapper).toHaveScreenshot(`button-strong-in-buttons-${page.getSnapshotSettings()}.png`);
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-strong`));
     });
     test('should render strong clear button', async ({ page }) => {
-      await page.setContent(`
-        <ion-buttons>
-          <ion-button strong="true" fill="clear">Button</ion-button>
-        </ion-buttons>
-      `);
+      await page.setContent(
+        `
+         <ion-button fill="clear" strong="true">Button</ion-button>
+       `,
+        config
+      );
 
       const wrapper = page.locator('ion-button');
 
-      await expect(wrapper).toHaveScreenshot(`button-clear-strong-in-buttons-${page.getSnapshotSettings()}.png`);
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-clear-strong`));
+    });
+  });
+  test.describe(title('in ion-buttons'), () => {
+    test('should render strong button', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-buttons>
+            <ion-button strong="true" fill="solid">Button</ion-button>
+          </ion-buttons>
+        `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-strong-in-buttons`));
+    });
+    test('should render strong clear button', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-buttons>
+            <ion-button strong="true" fill="clear">Button</ion-button>
+          </ion-buttons>
+        `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-clear-strong-in-buttons`));
     });
   });
 });