javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sean Perkins
2022-11-16 15:19:29 -05:00
committed by GitHub
parent 843d386479
commit f642c29f92
7 changed files with 277 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
core/src/components/nav/test/basic/e2e.ts
View File

@ -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();
});

62
core/src/components/nav/test/basic/index.html
View File

@ -12,54 +12,22 @@
<script src="../../../../../scripts/testing/scripts.js"></script> <script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.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> <script>
class PageOne extends HTMLElement { class PageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page One</ion-title> <ion-title>Page One</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="ion-padding"> <ion-content class="ion-padding">
<h1>Page One</h1> <h1>Page One</h1>
<ion-nav-link router-direction="forward" component="page-two"> <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-nav-link>
</ion-content> </ion-content>
`; `;
@ -75,19 +43,6 @@
</ion-buttons> </ion-buttons>
<ion-title>Page Two</ion-title> <ion-title>Page Two</ion-title>
</ion-toolbar> </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-header>
<ion-content class="ion-padding"> <ion-content class="ion-padding">
<h1>Page Two</h1> <h1>Page Two</h1>
@ -96,15 +51,6 @@
<ion-button class="next">Go to Page Three</ion-button> <ion-button class="next">Go to Page Three</ion-button>
</ion-nav-link> </ion-nav-link>
</div> </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> </ion-content>
`; `;
} }

83
core/src/components/nav/test/basic/nav.e2e.ts Normal file
View File

@ -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();
});
});
});

27
core/src/components/nav/test/nested/e2e.ts
View File

@ -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();
});

84
core/src/components/nav/test/nested/nav.e2e.ts Normal file
View File

@ -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();
});
});
});

26
core/src/components/nav/test/routing/e2e.ts
View File

@ -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();
});

106
core/src/components/nav/test/routing/nav.e2e.ts Normal file
View File

@ -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();
});
});
});