test(header): migrate to playwright (#26112)

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

@@ -0,0 +1,34 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: a11y', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+    skip.mode('md');
+  });
+
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/header/test/a11y`);
+
+    const headers = page.locator('ion-header');
+    await expect(headers.first()).toHaveAttribute('role', 'banner');
+    await expect(headers.last()).toHaveAttribute('role', 'none');
+
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+
+  test('should allow for custom role', async ({ page }) => {
+    /**
+     * Note: This example should not be used in production.
+     * This only serves to check that `role` can be customized.
+     */
+    await page.setContent(`
+      <ion-header role="heading"></ion-header>
+    `);
+    const header = page.locator('ion-header');
+
+    await expect(header).toHaveAttribute('role', 'heading');
+  });
+});

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

@@ -0,0 +1,78 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: basic', () => {
+  test.describe('header: rendering', () => {
+    test('should not have visual regressions with basic header', async ({ page }) => {
+      await page.setContent(`
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Header - Default</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(`header-diff-${page.getSnapshotSettings()}.png`);
+    });
+  });
+
+  test.describe('header: feature rendering', () => {
+    test.beforeEach(({ skip }) => {
+      skip.rtl();
+    });
+
+    test('should not have visual regressions with no border', async ({ page }) => {
+      await page.setContent(`
+        <ion-header class="ion-no-border">
+          <ion-toolbar>
+            <ion-title>Header - No Border</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(`header-no-border-diff-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with translucent header', async ({ page, skip }) => {
+      skip.mode('md', 'Translucent effect is only available in iOS mode.');
+      skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.');
+
+      await page.setContent(`
+        <ion-header translucent="true">
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/header/test/img.jpg" />
+          </div>
+          <ion-toolbar>
+            <ion-title>Header - Translucent</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(`header-translucent-diff-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with translucent header with color', async ({ page, skip }) => {
+      skip.mode('md', 'Translucent effect is only available in iOS mode.');
+      skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.');
+
+      await page.setContent(`
+        <ion-header translucent="true">
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/header/test/img.jpg" />
+          </div>
+          <ion-toolbar color="tertiary">
+            <ion-title>Header - Translucent</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(
+        `header-translucent-color-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+});

core/src/components/header/test/basic/index.html

@@ -15,20 +15,13 @@
   </head>
   <body>
     <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Header</ion-title>
+        </ion-toolbar>
+      </ion-header>
       <ion-content>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Header - Default</ion-title>
-          </ion-toolbar>
-        </ion-header>
-
-        <br />
-
-        <ion-header class="ion-no-border">
-          <ion-toolbar>
-            <ion-title>Header - No Border</ion-title>
-          </ion-toolbar>
-        </ion-header>
+        <h1>Content</h1>
       </ion-content>
     </ion-app>
   </body>

core/src/components/header/test/condense/header.e2e.ts

@@ -7,24 +7,37 @@ test.describe('header: condense', () => {
     skip.rtl();
 
     await page.goto('/src/components/header/test/condense');
-    const header = page.locator('#collapsibleHeader');
+    const largeTitleHeader = page.locator('#largeTitleHeader');
+    const smallTitleHeader = page.locator('#smallTitleHeader');
     const content = page.locator('ion-content');
 
-    await expect(header).toHaveAttribute('aria-hidden', 'true');
+    await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
 
-    await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom());
-    await page.waitForChanges();
+    expect(await largeTitleHeader.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-condense-large-title-initial-diff-${page.getSnapshotSettings()}.png`
+    );
+
+    await content.evaluate(async (el: HTMLIonContentElement) => {
+      await el.scrollToBottom();
+    });
+    await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive');
+
+    expect(await smallTitleHeader.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-condense-large-title-collapsed-diff-${page.getSnapshotSettings()}.png`
+    );
 
     /**
      * Playwright can't do .not.toHaveAttribute() because a value is expected,
      * and toHaveAttribute can't accept a value of type null.
      */
-    const ariaHidden = await header.getAttribute('aria-hidden');
+    const ariaHidden = await smallTitleHeader.getAttribute('aria-hidden');
     expect(ariaHidden).toBeNull();
 
-    await content.evaluate((el: HTMLIonContentElement) => el.scrollToTop());
-    await page.waitForChanges();
+    await content.evaluate(async (el: HTMLIonContentElement) => {
+      await el.scrollToTop();
+    });
+    await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive');
 
-    await expect(header).toHaveAttribute('aria-hidden', 'true');
+    await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
   });
 });

core/src/components/header/test/condense/index.html

@@ -12,79 +12,74 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-
-      .grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 10px;
-      }
-
-      .grid-item {
-        height: 200px;
-      }
-    </style>
   </head>
 
   <body>
     <ion-app>
       <div class="ion-page">
-        <ion-header translucent="true" id="collapsibleHeader">
+        <ion-header translucent="true" id="smallTitleHeader">
+          <div style="position: absolute; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(180deg)" src="/src/components/header/test/img.jpg" />
+          </div>
           <ion-toolbar>
-            <ion-title>Mailboxes</ion-title>
+            <ion-title>Header</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content fullscreen="true">
-          <ion-header collapse="condense">
+          <ion-header collapse="condense" id="largeTitleHeader">
             <ion-toolbar>
-              <ion-title size="large">Mailboxes</ion-title>
+              <ion-title size="large">Header</ion-title>
             </ion-toolbar>
           </ion-header>
-          <div class="grid ion-padding">
-            <div class="grid-item red"></div>
-            <div class="grid-item green"></div>
-            <div class="grid-item blue"></div>
-            <div class="grid-item yellow"></div>
-            <div class="grid-item pink"></div>
-            <div class="grid-item purple"></div>
-            <div class="grid-item black"></div>
-            <div class="grid-item orange"></div>
+          <div class="ion-padding">
+            <h1>Content</h1>
+
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor,
+              massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi
+              cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum
+              primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque
+              ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio.
+              Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu
+              porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium
+              tortor.
+            </p>
+            <p>
+              Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero
+              nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis.
+              Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida
+              vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu
+              scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum,
+              imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus
+              velit ornare nunc, dapibus varius turpis leo ut magna.
+            </p>
+            <p>
+              Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc
+              bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies
+              non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit
+              sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget
+              justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus,
+              accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus
+              magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus.
+              Curabitur non ipsum et ex vestibulum congue.
+            </p>
+            <p>
+              Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at
+              nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id
+              in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean
+              elementum est nec arcu ultricies dignissim.
+            </p>
+            <p>
+              Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a
+              fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus
+              rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis
+              ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere.
+            </p>
           </div>
         </ion-content>
         <ion-footer translucent="true">
           <ion-toolbar>
-            <ion-title>Updated Just Now</ion-title>
+            <ion-title>Footer</ion-title>
           </ion-toolbar>
         </ion-footer>
       </div>

core/src/components/header/test/fade/header.e2e.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: fade', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  test('should not have visual regressions with fade header', async ({ page, skip }) => {
+    skip.mode('md', 'Translucent effect is only available in iOS mode.');
+    skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.');
+
+    await page.goto('/src/components/header/test/fade');
+
+    const header = page.locator('ion-header');
+    expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-fade-not-blurred-diff-${page.getSnapshotSettings()}.png`
+    );
+
+    const content = page.locator('ion-content');
+    await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
+    await page.waitForChanges();
+
+    expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-fade-blurred-diff-${page.getSnapshotSettings()}.png`
+    );
+  });
+});