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

Merge remote-tracking branch 'origin/main' into chore/sync-with-main-5-3

Browse Source
This commit is contained in:
Sean Perkins
2023-05-03 13:38:03 -04:00
parent 0a0345a84a 27a9aaaedc
commit 10d2c75f8d
2722 changed files with 42605 additions and 10074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,83 +1,86 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
import { configs, 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();
/**
* This behavior does not vary across modes/directions
*/
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('nav: basic'), () => {
test.beforeEach(async ({ page }) => {
await page.goto('/src/components/nav/test/basic', config);
});
test('should render the back button', async ({ page }) => {
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 expect(pageTwoBackButton).toBeVisible();
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('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');
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');
await pageTwoButton.click();
await page.waitForChanges();
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 pageTwoBackButton.click();
await page.waitForChanges();
await pageTwoButton.click();
await page.waitForChanges();
await expect(pageOne).toBeVisible();
// Popping a page should remove it from the DOM
await expect(pageTwo).toHaveCount(0);
});
await expect(pageOne).toHaveCount(1);
await expect(pageTwo).toBeVisible();
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');
await pageThreeButton.click();
await page.waitForChanges();
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();
await expect(pageOne).toHaveCount(1);
await expect(pageTwo).toHaveCount(1);
await expect(pageThree).toBeVisible();
});
});
});
});

121
core/src/components/nav/test/modal-navigation/nav.e2e.ts
View File

@ -1,72 +1,77 @@
import { expect } from '@playwright/test';
import type { E2EPage } from '@utils/test/playwright';
import { test } from '@utils/test/playwright';
import { configs, test } from '@utils/test/playwright';
test.describe('nav: modal-navigation', () => {
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/nav/test/modal-navigation`);
await openModal(page);
});
/**
* This behavior does not vary across modes/directions
*/
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('nav: modal-navigation'), () => {
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/nav/test/modal-navigation`, config);
await openModal(page);
});
test('should render the root page', async ({ page }) => {
const pageOne = page.locator('page-one');
const pageOneHeading = page.locator('page-one h1');
await expect(pageOne).toBeVisible();
await expect(pageOneHeading).toHaveText('Page One');
});
test('should push to the next page', async ({ page }) => {
await page.click('#goto-page-two');
const pageTwo = page.locator('page-two');
const pageTwoHeading = page.locator('page-two h1');
await expect(pageTwo).toBeVisible();
await expect(pageTwoHeading).toHaveText('Page Two');
});
test('should pop to the previous page', async ({ page }) => {
await page.click('#goto-page-two');
await page.click('#goto-page-three');
const pageThree = page.locator('page-three');
const pageThreeHeading = page.locator('page-three h1');
await expect(pageThree).toBeVisible();
await expect(pageThreeHeading).toHaveText('Page Three');
await page.click('#go-back');
const pageTwo = page.locator('page-two');
const pageTwoHeading = page.locator('page-two h1');
// Verifies the leavingView was unmounted
await expect(pageThree).toHaveCount(0);
await expect(pageTwo).toBeVisible();
await expect(pageTwoHeading).toHaveText('Page Two');
});
test.describe('popping to the root', () => {
test('should render the root page', async ({ page }) => {
const pageTwo = page.locator('page-two');
const pageThree = page.locator('page-three');
await page.click('#goto-page-two');
await page.click('#goto-page-three');
await page.click('#goto-root');
const pageOne = page.locator('page-one');
const pageOneHeading = page.locator('page-one h1');
// Verifies all views besides the root were unmounted
await expect(pageTwo).toHaveCount(0);
await expect(pageThree).toHaveCount(0);
await expect(pageOne).toBeVisible();
await expect(pageOneHeading).toHaveText('Page One');
});
test('should push to the next page', async ({ page }) => {
await page.click('#goto-page-two');
const pageTwo = page.locator('page-two');
const pageTwoHeading = page.locator('page-two h1');
await expect(pageTwo).toBeVisible();
await expect(pageTwoHeading).toHaveText('Page Two');
});
test('should pop to the previous page', async ({ page }) => {
await page.click('#goto-page-two');
await page.click('#goto-page-three');
const pageThree = page.locator('page-three');
const pageThreeHeading = page.locator('page-three h1');
await expect(pageThree).toBeVisible();
await expect(pageThreeHeading).toHaveText('Page Three');
await page.click('#go-back');
const pageTwo = page.locator('page-two');
const pageTwoHeading = page.locator('page-two h1');
// Verifies the leavingView was unmounted
await expect(pageThree).toHaveCount(0);
await expect(pageTwo).toBeVisible();
await expect(pageTwoHeading).toHaveText('Page Two');
});
test.describe('popping to the root', () => {
test('should render the root page', async ({ page }) => {
const pageTwo = page.locator('page-two');
const pageThree = page.locator('page-three');
await page.click('#goto-page-two');
await page.click('#goto-page-three');
await page.click('#goto-root');
const pageOne = page.locator('page-one');
const pageOneHeading = page.locator('page-one h1');
// Verifies all views besides the root were unmounted
await expect(pageTwo).toHaveCount(0);
await expect(pageThree).toHaveCount(0);
await expect(pageOne).toBeVisible();
await expect(pageOneHeading).toHaveText('Page One');
});
});
});
});

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

@ -1,51 +1,21 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
import { configs, 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');
/**
* This behavior does not vary across modes/directions
*/
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('nav: nested'), () => {
test.beforeEach(async ({ page }) => {
await page.goto('/src/components/nav/test/nested', config);
});
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")');
test('should push pages with nested ion-nav', async ({ page }) => {
const pageOne = page.locator('page-one');
const pageTwo = page.locator('page-two');
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")');
@ -55,30 +25,64 @@ test.describe('nav: nested', () => {
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")');
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).toBeVisible();
await expect(pageTwo).toHaveCount(1);
await expect(pageOne).toHaveCount(1);
});
await expect(pageThree).toHaveCount(0);
await expect(pageTwoTwo).toBeVisible();
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")');
const pageTwoTwoBackButton = page.locator('page-two-two ion-back-button');
await pageTwoButton.click();
await page.waitForChanges();
await pageTwoTwoBackButton.click();
await page.waitForChanges();
const pageTwoOne = page.locator('page-two-one');
const pageTwoTwo = page.locator('page-two-two');
await expect(pageTwoTwo).toHaveCount(0);
await expect(pageTwoOne).toBeVisible();
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();
});
});
});
});

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

@ -1,106 +1,110 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
import { configs, 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);
/**
* This behavior does not vary across modes/directions
*/
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('nav: routing'), () => {
test.beforeEach(async ({ page }) => {
await page.goto('/src/components/nav/test/routing', config);
});
test('should render the back button', async ({ page }) => {
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 expect(pageOneBackButton).toBeVisible();
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('back button should pop to the previous page', async ({ page }) => {
const pageRoot = page.locator('page-root');
const pageOne = page.locator('page-one');
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 pageOneBackButton = page.locator('page-one ion-back-button');
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 pageOneButton.click();
await page.waitForChanges();
await pageOneBackButton.click();
await page.waitForChanges();
await expect(pageRoot).toHaveCount(1);
await expect(pageOne).toBeVisible();
await expect(pageRoot).toBeVisible();
// Popping a page should remove it from the DOM
await expect(pageOne).toHaveCount(0);
});
await pageTwoButton.click();
await page.waitForChanges();
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');
await expect(pageRoot).toHaveCount(1);
await expect(pageOne).toHaveCount(1);
await expect(pageTwo).toBeVisible();
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 pageThreeButton.click();
await page.waitForChanges();
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();
await expect(pageRoot).toHaveCount(1);
await expect(pageOne).toHaveCount(1);
await expect(pageTwo).toHaveCount(1);
await expect(pageThree).toBeVisible();
});
});
});
});