javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(menu-toggle): add basic Playwright test (#26164)

Browse Source
This commit is contained in:
Amanda Johnston
2022-10-24 15:22:35 -05:00
committed by GitHub
parent 0fa68cfa61
commit 6bbb372980
2 changed files with 60 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
core/src/components/menu-toggle/test/basic/index.html
View File

@ -16,29 +16,14 @@
<body>
<ion-app>
<ion-menu side="start" class="e2eLeftMenu" content-id="main">
<ion-menu side="start" content-id="main" menu-id="start-menu">
<ion-header>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
</ion-list>
</ion-content>
<ion-content class="ion-padding">Start menu content</ion-content>
<ion-footer>
<ion-toolbar color="secondary">
@ -47,14 +32,14 @@
</ion-footer>
</ion-menu>
<ion-menu side="end">
<ion-menu side="end" content-id="main" menu-id="end-menu">
<ion-header>
<ion-toolbar>
<ion-title>Hola</ion-title>
<ion-title>End Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding"> hola macho </ion-content>
<ion-content class="ion-padding">End menu content</ion-content>
</ion-menu>
<div class="ion-page" id="main">

54
core/src/components/menu-toggle/test/basic/menu-toggle.e2e.ts Normal file
View File

@ -0,0 +1,54 @@
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();
}