test(nav): migrate tests to playwright (#26294)

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

@@ -1,22 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-const navChanged = () => new Promise((resolve) => window.addEventListener('ionNavDidChange', resolve));
-
-test.skip('nav: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/nav/test/basic?ionic:_testing=true',
-  });
-
-  expect(await page.compareScreenshot()).toMatchScreenshot();
-
-  page.click('page-one ion-button.next');
-  await page.waitForTimeout(navChanged);
-  page.click('page-two ion-button.next');
-  await page.waitForTimeout(navChanged);
-  page.click('page-three ion-back-button');
-  await page.waitForTimeout(navChanged);
-  page.click('page-two ion-back-button');
-  await page.waitForTimeout(navChanged);
-
-  expect(await page.compareScreenshot('stack traversal')).toMatchScreenshot();
-});

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

@@ -12,54 +12,22 @@
     <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>
-      :root {
-        --ion-background-color: #171717;
-        --ion-text-color: #ffffff;
-        --ion-color-step-50: #232323;
-        --ion-color-step-100: #2e2e2e;
-        --ion-color-step-150: #3a3a3a;
-        --ion-color-step-200: #454545;
-        --ion-color-step-250: #515151;
-        --ion-color-step-300: #5d5d5d;
-        --ion-color-step-350: #686868;
-        --ion-color-step-400: #747474;
-        --ion-color-step-450: #7f7f7f;
-        --ion-color-step-500: #8b8b8b;
-        --ion-color-step-550: #979797;
-        --ion-color-step-600: #a2a2a2;
-        --ion-color-step-650: #aeaeae;
-        --ion-color-step-700: #b9b9b9;
-        --ion-color-step-750: #c5c5c5;
-        --ion-color-step-800: #d1d1d1;
-        --ion-color-step-850: #dcdcdc;
-        --ion-color-step-900: #e8e8e8;
-        --ion-color-step-950: #f3f3f3;
-
-        --ion-background-color-rgb: 23, 23, 23;
-        --ion-background-color-rgb: 0, 0, 0;
-        --ion-text-color-rgb: 255, 255, 255;
-      }
-
-      [f] {
-        background: green;
-        width: 100px;
-        height: 100px;
-      }
-    </style>
     <script>
       class PageOne extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
           <ion-header>
             <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-back-button></ion-back-button>
+              </ion-buttons>
               <ion-title>Page One</ion-title>
             </ion-toolbar>
           </ion-header>
           <ion-content class="ion-padding">
             <h1>Page One</h1>
             <ion-nav-link router-direction="forward" component="page-two">
-              <ion-button mode="md" class="next">Go to Page Two</ion-button>
+              <ion-button class="next">Go to Page Two</ion-button>
             </ion-nav-link>
           </ion-content>
         `;
@@ -75,19 +43,6 @@
               </ion-buttons>
               <ion-title>Page Two</ion-title>
             </ion-toolbar>
-            <ion-toolbar>
-              <ion-buttons slot="start">
-                <ion-button>
-                  <ion-icon slot="icon-only" name="star"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-              <ion-searchbar></ion-searchbar>
-              <ion-buttons slot="end">
-                <ion-button>
-                  <ion-icon slot="icon-only" name="star"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-            </ion-toolbar>
           </ion-header>
           <ion-content class="ion-padding">
             <h1>Page Two</h1>
@@ -96,15 +51,6 @@
                 <ion-button class="next">Go to Page Three</ion-button>
               </ion-nav-link>
             </div>
-            <div f></div>
-            <div f></div>
-            <div f></div>
-            <div f></div>
-            <div f></div>
-            <div f></div>
-            <div f></div>
-            <div f></div>
-
           </ion-content>
         `;
         }

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

@@ -0,0 +1,83 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('nav: basic', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.mode('md', 'Nav does not behave differently on md');
+    skip.rtl('Nav does not behave differently in rtl');
+    await page.goto('/src/components/nav/test/basic');
+  });
+
+  test('should render the root component', async ({ page }) => {
+    const pageOne = page.locator('page-one');
+
+    await expect(pageOne).toBeVisible();
+  });
+
+  test.describe('pushing a new page', () => {
+    test('should render the pushed component', async ({ page }) => {
+      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+      const pageOne = page.locator('page-one');
+      const pageTwo = page.locator('page-two');
+
+      await pageTwoButton.click();
+
+      await page.waitForChanges();
+
+      await expect(pageTwo).toBeVisible();
+      // Pushing a new page should hide the previous page
+      await expect(pageOne).not.toBeVisible();
+    });
+
+    test('should render the back button', async ({ page }) => {
+      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+      const pageTwoBackButton = page.locator('page-two ion-back-button');
+
+      await pageTwoButton.click();
+      await page.waitForChanges();
+
+      await expect(pageTwoBackButton).toBeVisible();
+    });
+  });
+
+  test('back button should pop to the previous page', async ({ page }) => {
+    const pageOne = page.locator('page-one');
+    const pageTwo = page.locator('page-two');
+    const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+    const pageTwoBackButton = page.locator('page-two ion-back-button');
+
+    await pageTwoButton.click();
+    await page.waitForChanges();
+
+    await pageTwoBackButton.click();
+    await page.waitForChanges();
+
+    await expect(pageOne).toBeVisible();
+    // Popping a page should remove it from the DOM
+    await expect(pageTwo).toHaveCount(0);
+  });
+
+  test.describe('pushing multiple pages', () => {
+    test('should keep previous pages in the DOM', async ({ page }) => {
+      const pageOne = page.locator('page-one');
+      const pageTwo = page.locator('page-two');
+      const pageThree = page.locator('page-three');
+
+      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+      const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
+
+      await pageTwoButton.click();
+      await page.waitForChanges();
+
+      await expect(pageOne).toHaveCount(1);
+      await expect(pageTwo).toBeVisible();
+
+      await pageThreeButton.click();
+      await page.waitForChanges();
+
+      await expect(pageOne).toHaveCount(1);
+      await expect(pageTwo).toHaveCount(1);
+      await expect(pageThree).toBeVisible();
+    });
+  });
+});

core/src/components/nav/test/nested/e2e.ts

@@ -1,27 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-const navChanged = () => new Promise((resolve) => window.addEventListener('ionNavDidChange', resolve));
-
-// TODO: get this to pass
-test.skip('nav: nested', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/nav/test/nested?ionic:_testing=true',
-  });
-
-  expect(await page.compareScreenshot()).toMatchScreenshot();
-
-  await page.click('page-one ion-button.next');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-two-one ion-button.next');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-two-two ion-button.next');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-three ion-back-button');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-two-two ion-back-button');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-two-one ion-back-button');
-  await page.waitForTimeout(navChanged);
-
-  expect(await page.compareScreenshot('stack traversal')).toMatchScreenshot();
-});

core/src/components/nav/test/nested/nav.e2e.ts

@@ -0,0 +1,84 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+// Tests for ion-nav used in ion-router
+test.describe('nav: nested', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.mode('md', 'Nav does not behave differently on md');
+    skip.rtl('Nav does not behave differently in rtl');
+    await page.goto('/src/components/nav/test/nested');
+  });
+
+  test('should push pages with nested ion-nav', async ({ page }) => {
+    const pageOne = page.locator('page-one');
+    const pageTwo = page.locator('page-two');
+
+    const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
+    const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
+
+    await pageTwoButton.click();
+    await page.waitForChanges();
+
+    const pageTwoOne = page.locator('page-two-one');
+    const pageTwoTwo = page.locator('page-two-two');
+
+    await expect(pageOne).toHaveCount(1);
+    await expect(pageTwo).toBeVisible();
+    await expect(pageTwoOne).toBeVisible();
+
+    await pageTwoTwoButton.click();
+    await page.waitForChanges();
+
+    await expect(pageTwoOne).toHaveCount(1);
+    await expect(pageTwoTwo).toBeVisible();
+
+    const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
+
+    await pageThreeButton.click();
+    await page.waitForChanges();
+
+    const pageThree = page.locator('page-three');
+
+    await expect(pageThree).toBeVisible();
+    await expect(pageTwo).toHaveCount(1);
+    await expect(pageOne).toHaveCount(1);
+  });
+
+  test.describe('back button', () => {
+    test('should work with nested ion-nav', async ({ page }) => {
+      const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
+      const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
+
+      await pageTwoButton.click();
+      await page.waitForChanges();
+
+      const pageTwoOne = page.locator('page-two-one');
+      const pageTwoTwo = page.locator('page-two-two');
+
+      await pageTwoTwoButton.click();
+      await page.waitForChanges();
+
+      const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
+      const pageThreeBackButton = page.locator('page-three ion-back-button');
+
+      await pageThreeButton.click();
+      await page.waitForChanges();
+
+      const pageThree = page.locator('page-three');
+
+      await pageThreeBackButton.click();
+      await page.waitForChanges();
+
+      await expect(pageThree).toHaveCount(0);
+      await expect(pageTwoTwo).toBeVisible();
+
+      const pageTwoTwoBackButton = page.locator('page-two-two ion-back-button');
+
+      await pageTwoTwoBackButton.click();
+      await page.waitForChanges();
+
+      await expect(pageTwoTwo).toHaveCount(0);
+      await expect(pageTwoOne).toBeVisible();
+    });
+  });
+});

core/src/components/nav/test/routing/e2e.ts

@@ -1,26 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-const navChanged = () => new Promise((resolve) => window.addEventListener('ionRouteDidChange', resolve));
-
-test.skip('nav: routing', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/nav/test/routing?ionic:_testing=true',
-  });
-
-  expect(await page.compareScreenshot()).toMatchScreenshot();
-
-  await page.click('page-root ion-button.next');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-one ion-button.next');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-two ion-button.next');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-three ion-back-button');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-two ion-back-button');
-  await page.waitForTimeout(navChanged);
-  await page.click('page-one ion-back-button');
-  await page.waitForTimeout(navChanged);
-
-  expect(await page.compareScreenshot('stack traversal')).toMatchScreenshot();
-});

core/src/components/nav/test/routing/nav.e2e.ts

@@ -0,0 +1,106 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+// Tests for ion-nav used in ion-router
+test.describe('nav: routing', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.mode('md', 'Nav does not behave differently on md');
+    skip.rtl('Nav does not behave differently in rtl');
+    await page.goto('/src/components/nav/test/routing');
+  });
+
+  test('should render the root component', async ({ page }) => {
+    const pageRoot = page.locator('page-root');
+
+    await expect(pageRoot).toBeVisible();
+  });
+
+  test.describe('pushing a new page', () => {
+    test('should render the pushed component', async ({ page }) => {
+      const pageRoot = page.locator('page-root');
+      const pageOne = page.locator('page-one');
+      const pageTwo = page.locator('page-two');
+
+      const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+
+      await pageOneButton.click();
+      await page.waitForChanges();
+
+      await expect(pageOne).toBeVisible();
+      // Pushing a new page should hide the previous page
+      await expect(pageRoot).not.toBeVisible();
+      await expect(pageRoot).toHaveCount(1);
+
+      await pageTwoButton.click();
+      await page.waitForChanges();
+
+      await expect(pageTwo).toBeVisible();
+      // Pushing a new page should hide the previous page
+      await expect(pageOne).not.toBeVisible();
+      await expect(pageOne).toHaveCount(1);
+    });
+
+    test('should render the back button', async ({ page }) => {
+      const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+      const pageOneBackButton = page.locator('page-one ion-back-button');
+
+      await pageOneButton.click();
+      await page.waitForChanges();
+
+      await expect(pageOneBackButton).toBeVisible();
+    });
+  });
+
+  test('back button should pop to the previous page', async ({ page }) => {
+    const pageRoot = page.locator('page-root');
+    const pageOne = page.locator('page-one');
+
+    const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+    const pageOneBackButton = page.locator('page-one ion-back-button');
+
+    await pageOneButton.click();
+    await page.waitForChanges();
+
+    await pageOneBackButton.click();
+    await page.waitForChanges();
+
+    await expect(pageRoot).toBeVisible();
+    // Popping a page should remove it from the DOM
+    await expect(pageOne).toHaveCount(0);
+  });
+
+  test.describe('pushing multiple pages', () => {
+    test('should keep previous pages in the DOM', async ({ page }) => {
+      const pageRoot = page.locator('page-root');
+      const pageOne = page.locator('page-one');
+      const pageTwo = page.locator('page-two');
+      const pageThree = page.locator('page-three');
+
+      const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+      const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
+
+      await pageOneButton.click();
+      await page.waitForChanges();
+
+      await expect(pageRoot).toHaveCount(1);
+      await expect(pageOne).toBeVisible();
+
+      await pageTwoButton.click();
+      await page.waitForChanges();
+
+      await expect(pageRoot).toHaveCount(1);
+      await expect(pageOne).toHaveCount(1);
+      await expect(pageTwo).toBeVisible();
+
+      await pageThreeButton.click();
+      await page.waitForChanges();
+
+      await expect(pageRoot).toHaveCount(1);
+      await expect(pageOne).toHaveCount(1);
+      await expect(pageTwo).toHaveCount(1);
+      await expect(pageThree).toBeVisible();
+    });
+  });
+});