mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
test(nav): migrate to generators (#27332)
Issue number: N/A --------- <!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Nav tests use legacy syntax ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Nav tests use modern syntax ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
This commit is contained in:
Liam DeBeasi
@ -1,83 +0,0 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
86
core/src/components/nav/test/basic/nav.e2e.ts
Normal file
86
core/src/components/nav/test/basic/nav.e2e.ts
Normal file
@ -0,0 +1,86 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* 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 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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,77 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import type { E2EPage } from '@utils/test/playwright';
|
||||
import { 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);
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const openModal = async (page: E2EPage) => {
|
||||
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
|
||||
await page.click('#openModal');
|
||||
await ionModalDidPresent.next();
|
||||
};
|
||||
82
core/src/components/nav/test/modal-navigation/nav.e2e.ts
Normal file
82
core/src/components/nav/test/modal-navigation/nav.e2e.ts
Normal file
@ -0,0 +1,82 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import type { E2EPage } from '@utils/test/playwright';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* 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');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const openModal = async (page: E2EPage) => {
|
||||
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
|
||||
await page.click('#openModal');
|
||||
await ionModalDidPresent.next();
|
||||
};
|
||||
@ -1,84 +0,0 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
88
core/src/components/nav/test/nested/nav.e2e.ts
Normal file
88
core/src/components/nav/test/nested/nav.e2e.ts
Normal file
@ -0,0 +1,88 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
// Tests for ion-nav used in ion-router
|
||||
|
||||
/**
|
||||
* 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);
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,106 +0,0 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
110
core/src/components/nav/test/routing/nav.e2e.ts
Normal file
110
core/src/components/nav/test/routing/nav.e2e.ts
Normal file
@ -0,0 +1,110 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
// Tests for ion-nav used in ion-router
|
||||
|
||||
/**
|
||||
* 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 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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user