mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
test(menu): migrate to generators (#27330)
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. --> Menu sliding tests use legacy syntax ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Menu sliding 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:
@ -1,54 +0,0 @@
|
||||
import type { Locator } from '@playwright/test';
|
||||
import { expect } from '@playwright/test';
|
||||
import type { E2EPage } from '@utils/test/playwright';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('menu-toggle: basic', () => {
|
||||
test.beforeEach(async ({ page, skip }) => {
|
||||
skip.rtl();
|
||||
skip.mode('ios');
|
||||
await page.goto(`/src/components/menu-toggle/test/basic`);
|
||||
});
|
||||
|
||||
test('should open selected menu by side', async ({ page }) => {
|
||||
const startMenu = page.locator('[menu-id="start-menu"]');
|
||||
const endMenu = page.locator('[menu-id="end-menu"]');
|
||||
const menuToggle = page.locator('ion-menu-toggle');
|
||||
|
||||
// do this outside testMenu since passing params to eval callback is tricky due to execution context
|
||||
await menuToggle.evaluate((el: HTMLIonMenuToggleElement) => (el.menu = 'start'));
|
||||
await testMenu(page, startMenu);
|
||||
|
||||
await menuToggle.evaluate((el: HTMLIonMenuToggleElement) => (el.menu = 'end'));
|
||||
await testMenu(page, endMenu);
|
||||
});
|
||||
|
||||
test('should open selected menu by menu-id', async ({ page }) => {
|
||||
const startMenu = page.locator('[menu-id="start-menu"]');
|
||||
const endMenu = page.locator('[menu-id="end-menu"]');
|
||||
const menuToggle = page.locator('ion-menu-toggle');
|
||||
|
||||
// do this outside testMenu since passing params to eval callback is tricky due to execution context
|
||||
await menuToggle.evaluate((el: HTMLIonMenuToggleElement) => (el.menu = 'start-menu'));
|
||||
await testMenu(page, startMenu);
|
||||
|
||||
await menuToggle.evaluate((el: HTMLIonMenuToggleElement) => (el.menu = 'end-menu'));
|
||||
await testMenu(page, endMenu);
|
||||
});
|
||||
});
|
||||
|
||||
async function testMenu(page: E2EPage, menu: Locator) {
|
||||
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
|
||||
const ionDidClose = await page.spyOnEvent('ionDidClose');
|
||||
|
||||
await page.click('ion-menu-toggle');
|
||||
await ionDidOpen.next();
|
||||
|
||||
await expect(menu).toHaveClass(/show-menu/);
|
||||
|
||||
await menu.evaluate(async (el: HTMLIonMenuElement) => {
|
||||
await el.close();
|
||||
});
|
||||
|
||||
await ionDidClose.next();
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
import type { Locator } from '@playwright/test';
|
||||
import { expect } from '@playwright/test';
|
||||
import type { E2EPage } from '@utils/test/playwright';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('menu-toggle: basic'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(`/src/components/menu-toggle/test/basic`, config);
|
||||
});
|
||||
|
||||
test('should open selected menu by side', async ({ page }) => {
|
||||
const startMenu = page.locator('[menu-id="start-menu"]');
|
||||
const endMenu = page.locator('[menu-id="end-menu"]');
|
||||
const menuToggle = page.locator('ion-menu-toggle');
|
||||
|
||||
// do this outside testMenu since passing params to eval callback is tricky due to execution context
|
||||
await menuToggle.evaluate((el: HTMLIonMenuToggleElement) => (el.menu = 'start'));
|
||||
await testMenu(page, startMenu);
|
||||
|
||||
await menuToggle.evaluate((el: HTMLIonMenuToggleElement) => (el.menu = 'end'));
|
||||
await testMenu(page, endMenu);
|
||||
});
|
||||
|
||||
test('should open selected menu by menu-id', async ({ page }) => {
|
||||
const startMenu = page.locator('[menu-id="start-menu"]');
|
||||
const endMenu = page.locator('[menu-id="end-menu"]');
|
||||
const menuToggle = page.locator('ion-menu-toggle');
|
||||
|
||||
// do this outside testMenu since passing params to eval callback is tricky due to execution context
|
||||
await menuToggle.evaluate((el: HTMLIonMenuToggleElement) => (el.menu = 'start-menu'));
|
||||
await testMenu(page, startMenu);
|
||||
|
||||
await menuToggle.evaluate((el: HTMLIonMenuToggleElement) => (el.menu = 'end-menu'));
|
||||
await testMenu(page, endMenu);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
async function testMenu(page: E2EPage, menu: Locator) {
|
||||
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
|
||||
const ionDidClose = await page.spyOnEvent('ionDidClose');
|
||||
|
||||
await page.click('ion-menu-toggle');
|
||||
await ionDidOpen.next();
|
||||
|
||||
await expect(menu).toHaveClass(/show-menu/);
|
||||
|
||||
await menu.evaluate(async (el: HTMLIonMenuElement) => {
|
||||
await el.close();
|
||||
});
|
||||
|
||||
await ionDidClose.next();
|
||||
}
|
||||
Reference in New Issue
Block a user