test(content): migrate to Playwright (#25979)

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

@@ -0,0 +1,15 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('content: basic', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios', 'ion-content does not have mode-specific styling');
+
+    await page.goto(`/src/components/content/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`content-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('content: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/content/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -29,7 +29,6 @@
         <ion-content class="ion-padding" style="text-align: center; flex: 2" id="content">
           <ion-content id="content-part">
             <f style="height: 50%"></f>
-            <ion-button onclick="toggleFullscreen()">Toggle content.fullscreen</ion-button>
             <p>
               <ion-button onclick="toggleDisplay('header')" color="secondary">Toggle header</ion-button>
               <ion-button onclick="toggleDisplay('footer')" color="secondary">Toggle footer</ion-button>
@@ -45,11 +44,6 @@
             <f></f>
             <f></f>
             <f></f>
-            <f></f>
-            <f></f>
-            <f></f>
-            <f></f>
-            <f></f>
           </ion-content>
         </ion-content>
         <ion-content class="ion-padding" style="display: none" id="content3">
@@ -79,16 +73,7 @@
 
       <script>
         const content = document.getElementById('content');
-        content.scrollEvents = true;
-        content.addEventListener('ionScrollStart', () => console.log('scroll start'));
-        content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
-        content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
 
-        function toggleFullscreen() {
-          const content = document.getElementById('content');
-          content.fullscreen = !content.fullscreen;
-          console.log('content.fullscren =', content.fullscreen);
-        }
         function toggleDisplay(id) {
           const el = document.getElementById(id);
           el.style.display = !el.style.display ? 'none' : null;

core/src/components/content/test/fixed/content.e2e.ts

@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('content: fixed', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.mode('ios', 'ion-content does not have mode-specific styling');
+
+    await page.goto(`/src/components/content/test/fixed`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`content-fixed-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/content/test/fixed/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('content: fixed', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/content/test/fixed?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/content/test/fixed/index.html

@@ -27,7 +27,7 @@
         <div slot="fixed">
           <h1>Fixed content</h1>
           <p>Fixed paragraph</p>
-          <ion-button>Button</ion-button>
+          <ion-button>Fixed button</ion-button>
         </div>
         <ion-fab vertical="top" horizontal="end" slot="fixed">
           <ion-fab-button>

core/src/components/content/test/fullscreen/content.e2e.ts

@@ -0,0 +1,15 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('content: fullscreen', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios', 'ion-content does not have mode-specific styling');
+
+    await page.goto(`/src/components/content/test/fullscreen`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`content-fullscreen-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/content/test/fullscreen/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('content: fullscreen', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/content/test/fullscreen?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/content/test/fullscreen/index.html

@@ -49,18 +49,6 @@
           Integer luctus faucibus nunc, non mattis nisl consectetur at. Interdum et malesuada fames ac ante ipsum primis
           in faucibus.
         </p>
-        <p>
-          Suspendisse et arcu nec odio lobortis lacinia a congue ligula. Duis libero lacus, blandit ac lectus et,
-          laoreet condimentum est. Suspendisse potenti. Praesent ligula dui, laoreet sed pellentesque vitae, congue at
-          leo. Mauris pharetra, tellus vel viverra viverra, tellus felis mollis magna, volutpat pharetra augue nunc a
-          dolor. Donec ex turpis, iaculis id consectetur quis, posuere a purus. Morbi eu massa sed erat tristique
-          hendrerit. Morbi eleifend, nisi eleifend condimentum euismod, lacus erat porta arcu, consequat rutrum ipsum
-          arcu at metus. Sed tellus nulla, pellentesque sit amet justo at, venenatis imperdiet dui. Aenean odio eros,
-          posuere at dui pharetra, laoreet posuere nulla. Vestibulum interdum odio eu odio ornare, quis maximus lacus
-          semper. Quisque purus dolor, ullamcorper mollis lorem at, sodales aliquet velit. Interdum et malesuada fames
-          ac ante ipsum primis in faucibus. Vivamus purus felis, elementum ut est ut, finibus sagittis tellus. Etiam
-          neque mauris, lobortis sed orci in, dictum eleifend turpis. Morbi eu odio quis mauris gravida tristique.
-        </p>
         <p>
           Vestibulum blandit quam a odio lobortis dictum. Nulla pellentesque mauris ornare neque ultricies sagittis.
           Aenean molestie placerat fermentum. Morbi ac tortor vel felis imperdiet suscipit. Ut id pellentesque nulla.

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

@@ -0,0 +1,15 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('content: standalone', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios', 'ion-content does not have mode-specific styling');
+
+    await page.goto(`/src/components/content/test/standalone`);
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+      `content-standalone-${page.getSnapshotSettings()}.png`
+    );
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('content: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/content/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/content/test/standalone/index.html

@@ -53,46 +53,11 @@
       </ion-content>
     </div>
 
-    <div class="content-height">
-      <ion-content class="ion-padding outer-content">
-        <h1>Heading</h1>
-        <h2>Heading</h2>
-        <h3>Heading</h3>
-        <hr />
-        <h4>Heading</h4>
-        <h5>Heading</h5>
-        <h6>Heading</h6>
-        <p>Paragraph</p>
-      </ion-content>
-    </div>
-
-    <div class="content-height">
-      <ion-content class="ion-padding outer-content">
-        <h1>Heading</h1>
-        <h2>Heading</h2>
-        <h3>Heading</h3>
-        <hr />
-        <h4>Heading</h4>
-        <h5>Heading</h5>
-        <h6>Heading</h6>
-        <p>Paragraph</p>
-      </ion-content>
-    </div>
-
     <style>
       .content-height {
         height: 200px;
       }
 
-      /* TODO should this be in content? */
-      ion-content {
-        height: 100%;
-      }
-
-      .outer-content {
-        --background: #f2f2f2;
-      }
-
       .custom-color {
         --background: blue;
         --color: white;