test(card, card-header): migrate to generators (#27299)

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

Card and card header are using the legacy test syntax

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

- Card and card header use generators

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

@@ -1,10 +1,11 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
-test.describe('card: basic', () => {
-  test.describe('card: rendering', () => {
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('card: rendering'), () => {
     test('should not have visual regressions with basic card', async ({ page }) => {
-      await page.setContent(`
+      await page.setContent(
+        `
         <ion-card>
           <ion-card-header>
             <ion-card-title>Card Title</ion-card-title>
@@ -16,20 +17,20 @@ test.describe('card: basic', () => {
             in the woods. Wash your spirit clean.
           </ion-card-content>
         </ion-card>
-      `);
+      `,
+        config
+      );
 
       const card = page.locator('ion-card');
-      await expect(card).toHaveScreenshot(`card-diff-${page.getSnapshotSettings()}.png`);
+      await expect(card).toHaveScreenshot(screenshot(`card-diff`));
     });
   });
-
-  test.describe('card: feature rendering', () => {
-    test.beforeEach(({ skip }) => {
-      skip.rtl();
-    });
-
+});
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('card: feature rendering'), () => {
     test('should not have visual regressions with button cards', async ({ page }) => {
-      await page.setContent(`
+      await page.setContent(
+        `
         <ion-card button="true">
           <ion-card-header>
             <ion-card-title>Card Title</ion-card-title>
@@ -40,35 +41,17 @@ test.describe('card: basic', () => {
             in the woods. Wash your spirit clean.
           </ion-card-content>
         </ion-card>
-      `);
+      `,
+        config
+      );
 
       const card = page.locator('ion-card');
-      await expect(card).toHaveScreenshot(`card-button-${page.getSnapshotSettings()}.png`);
-    });
-
-    test('should not have visual regressions with translucent cards', async ({ page, skip }) => {
-      skip.mode('md', 'Translucent effect is only available in iOS mode.');
-
-      await page.setContent(`
-        <ion-card>
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
-          </div>
-          <ion-card-header translucent="true">
-            <ion-card-title> Title </ion-card-title>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content style="min-height: 20px"></ion-card-content>
-        </ion-card>
-      `);
-
-      const card = page.locator('ion-card');
-      await expect(card).toHaveScreenshot(`card-translucent-${page.getSnapshotSettings()}.png`);
+      await expect(card).toHaveScreenshot(screenshot(`card-button`));
     });
 
     test('should not have visual regressions with disabled card', async ({ page }) => {
-      await page.setContent(`
+      await page.setContent(
+        `
         <ion-card disabled="true">
           <ion-card-header>
             <ion-card-title>Card Title</ion-card-title>
@@ -80,13 +63,16 @@ test.describe('card: basic', () => {
             in the woods. Wash your spirit clean.
           </ion-card-content>
         </ion-card>
-      `);
+      `,
+        config
+      );
 
       const card = page.locator('ion-card');
-      await expect(card).toHaveScreenshot(`card-disabled-${page.getSnapshotSettings()}.png`);
+      await expect(card).toHaveScreenshot(screenshot(`card-disabled`));
     });
     test('should not have visual regressions with color', async ({ page }) => {
-      await page.setContent(`
+      await page.setContent(
+        `
         <ion-card color="danger">
           <ion-card-header>
             <ion-card-title>Card Title</ion-card-title>
@@ -98,13 +84,16 @@ test.describe('card: basic', () => {
             in the woods. Wash your spirit clean.
           </ion-card-content>
         </ion-card>
-      `);
+      `,
+        config
+      );
 
       const card = page.locator('ion-card');
-      await expect(card).toHaveScreenshot(`card-color-${page.getSnapshotSettings()}.png`);
+      await expect(card).toHaveScreenshot(screenshot(`card-color`));
     });
     test('headings should have correct size in card', async ({ page }) => {
-      await page.setContent(`
+      await page.setContent(
+        `
         <ion-card>
           <ion-card-content>
             <h1>Heading 1</h1>
@@ -116,13 +105,16 @@ test.describe('card: basic', () => {
             <p>Paragraph</p>
           </ion-card-content>
         </ion-card>
-      `);
+      `,
+        config
+      );
 
       const card = page.locator('ion-card');
-      await expect(card).toHaveScreenshot(`card-headings-${page.getSnapshotSettings()}.png`);
+      await expect(card).toHaveScreenshot(screenshot(`card-headings`));
     });
     test('should render even without header or content elements', async ({ page }) => {
-      await page.setContent(`
+      await page.setContent(
+        `
         <ion-card>
           <ion-list lines="none">
             <ion-item href="#" class="ion-activated">
@@ -150,10 +142,38 @@ test.describe('card: basic', () => {
             </ion-item>
           </ion-list>
         </ion-card>
-      `);
+      `,
+        config
+      );
+
+      const card = page.locator('ion-card');
+      await expect(card).toHaveScreenshot(screenshot(`card-no-content-or-header`));
+    });
+  });
+});
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('card: translucent'), () => {
+    test('should not have visual regressions with translucent cards', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-card>
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
+          </div>
+          <ion-card-header translucent="true">
+            <ion-card-title> Title </ion-card-title>
+            <ion-card-subtitle> Subtitle </ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content style="min-height: 20px"></ion-card-content>
+        </ion-card>
+      `,
+        config
+      );
 
       const card = page.locator('ion-card');
-      await expect(card).toHaveScreenshot(`card-no-content-or-header-${page.getSnapshotSettings()}.png`);
+      await expect(card).toHaveScreenshot(screenshot(`card-translucent`));
     });
   });
 });