Skip to content

test(menu): migrate to playwright #26187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Nov 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions core/src/components/menu/test/a11y/e2e.ts

This file was deleted.

22 changes: 20 additions & 2 deletions core/src/components/menu/test/a11y/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,36 @@
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Segment - a11y</title>
<title>Menu - a11y</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link href="../../../../../css/core.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script type="module">
import { menuController } from '../../../../dist/ionic/index.esm.js';
window.menuController = menuController;
</script>
</head>

<body>
<main>
<h1>Menu</h1>
<div class="ion-page" id="main-content">
<ion-content class="ion-padding">
<h1>Menu</h1>
<ion-button id="open-menu" expand="block" onclick="openMenu()">Open Menu</ion-button>
</ion-content>
</div>

<ion-menu menu-id="menu" content-id="main-content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1 class="ion-margin">Open Menu</h1>
<ion-list>
<ion-item>
<ion-button>Button</ion-button>
Expand All @@ -35,5 +46,12 @@ <h1>Menu</h1>
</ion-content>
</ion-menu>
</main>

<script>
async function openMenu() {
await menuController.enable(true, 'menu');
await menuController.open('menu');
}
</script>
</body>
</html>
28 changes: 28 additions & 0 deletions core/src/components/menu/test/a11y/menu.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('menu: a11y', () => {
test.beforeEach(async ({ skip }) => {
skip.rtl();
skip.mode('md');
});

test('menu should not have accessibility violations', async ({ page }) => {
await page.goto(`/src/components/menu/test/a11y`);

const menu = page.locator('ion-menu');
const button = page.locator('#open-menu');

await button.click();
await page.waitForSelector('ion-menu', { state: 'visible' });

await expect(menu).toHaveAttribute('role', 'navigation');

const heading = page.locator('ion-menu h1');
await expect(heading).toHaveText('Open Menu');

const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});
});
81 changes: 0 additions & 81 deletions core/src/components/menu/test/basic/e2e.ts

This file was deleted.

31 changes: 14 additions & 17 deletions core/src/components/menu/test/basic/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,6 @@
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script>
const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
if (forceCSSAnimations) {
window.Animation = null;
}
</script>
<script type="module">
import { menuController } from '../../../../dist/ionic/index.esm.js';
window.menuController = menuController;
Expand All @@ -28,8 +22,8 @@
<ion-app>
<ion-menu
side="start"
menu-id="first"
id="start-menu"
menu-id="start-menu"
content-id="main"
class="menu-part"
aria-label="start menu"
Expand Down Expand Up @@ -68,7 +62,7 @@
</ion-content>
</ion-menu>

<ion-menu side="start" menu-id="custom" class="my-custom-menu" id="custom-menu" content-id="main">
<ion-menu side="start" menu-id="custom-menu" content-id="main" class="my-custom-menu">
<ion-header>
<ion-toolbar color="tertiary">
<ion-title>Custom Menu</ion-title>
Expand All @@ -85,7 +79,7 @@
</ion-content>
</ion-menu>

<ion-menu side="end" type="push" id="end-menu" content-id="main">
<ion-menu side="end" menu-id="end-menu" content-id="main" type="push">
<ion-header>
<ion-toolbar color="danger">
<ion-title>End Menu</ion-title>
Expand All @@ -109,9 +103,9 @@
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button expand="block" id="open-first" onclick="openFirst()">Open Start Menu</ion-button>
<ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
<ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
<ion-button expand="block" id="open-start" onclick="openStart()">Open Start Menu</ion-button>
<ion-button expand="block" id="open-end" onclick="openEnd()">Open End Menu</ion-button>
<ion-button expand="block" id="open-custom" onclick="openCustom()">Open Custom Menu</ion-button>
</ion-content>
</div>
</ion-app>
Expand All @@ -133,18 +127,21 @@
</style>

<script>
async function openFirst() {
await menuController.enable(true, 'first');
await menuController.open('first');
async function openStart() {
// Open the menu by menu-id
await menuController.enable(true, 'start-menu');
await menuController.open('start-menu');
}

async function openEnd() {
// Open the menu by side
await menuController.open('end');
}

async function openCustom() {
await menuController.enable(true, 'custom');
await menuController.open('custom');
// Open the menu by menu-id
await menuController.enable(true, 'custom-menu');
await menuController.open('custom-menu');
}
</script>
</body>
Expand Down
93 changes: 93 additions & 0 deletions core/src/components/menu/test/basic/menu.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
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: basic', () => {
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/menu/test/basic`);
});

test('should open selected menu by side', async ({ page }) => {
const startMenu = page.locator('[menu-id="start-menu"]');
const customMenu = page.locator('[menu-id="custom-menu"]');
const endMenu = page.locator('[menu-id="end-menu"]');

await testMenu(page, startMenu, 'start');
await testMenu(page, customMenu, 'custom');
await testMenu(page, endMenu, 'end');
});

test('should trap focus', async ({ page, skip, browserName }) => {
skip.rtl('Trapping focus is not dependent on document direction');
skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content');

const ionDidOpen = await page.spyOnEvent('ionDidOpen');

await page.click('#open-start');
await ionDidOpen.next();

const button = await page.locator('#start-menu-button');

if (browserName === 'webkit') {
await page.keyboard.down('Alt');
}

await page.keyboard.press('Tab');

await expect(button).toBeFocused();

await page.keyboard.press('Tab');

if (browserName === 'webkit') {
await page.keyboard.up('Alt');
}

await expect(button).toBeFocused();
});

test('should preserve scroll position', async ({ page, skip }) => {
skip.rtl('Scroll position is not dependent on document direction');
skip.browser('firefox', 'Firefox does not preserve scroll position');

const ionDidOpen = await page.spyOnEvent('ionDidOpen');

await page.click('#open-start');
await ionDidOpen.next();

await page.locator('#start-menu ion-content').evaluate(async (el: HTMLIonContentElement) => {
await el.scrollToPoint(0, 200);
});

await page.locator('#start-menu').evaluate(async (el: HTMLIonMenuElement) => {
await el.close();
});

await page.click('#open-start');
await ionDidOpen.next();

const scrollTop = await page.locator('#start-menu ion-content').evaluate(async (el: HTMLIonContentElement) => {
const contentScrollEl = await el.getScrollElement();
return contentScrollEl.scrollTop;
});

await expect(scrollTop).toBe(200);
});
});

async function testMenu(page: E2EPage, menu: Locator, menuId: string) {
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
const ionDidClose = await page.spyOnEvent('ionDidClose');

await page.click(`#open-${menuId}`);
await ionDidOpen.next();

await expect(menu).toHaveClass(/show-menu/);

expect(await page.screenshot()).toMatchSnapshot(`menu-basic-${menuId}-${page.getSnapshotSettings()}.png`);

await menu.evaluate(async (el: HTMLIonMenuElement) => {
await el.close();
});
await ionDidClose.next();
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading