diff --git a/core/src/components/menu/test/a11y/e2e.ts b/core/src/components/menu/test/a11y/e2e.ts deleted file mode 100644 index 874b6a4f334..00000000000 --- a/core/src/components/menu/test/a11y/e2e.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { AxePuppeteer } from '@axe-core/puppeteer'; -import { newE2EPage } from '@stencil/core/testing'; - -test('menu: axe', async () => { - const page = await newE2EPage({ - url: '/src/components/menu/test/a11y?ionic:_testing=true', - }); - - const menu = await page.find('ion-menu'); - await menu.callMethod('open'); - await menu.waitForVisible(); - - const results = await new AxePuppeteer(page).analyze(); - expect(results.violations.length).toEqual(0); -}); diff --git a/core/src/components/menu/test/a11y/index.html b/core/src/components/menu/test/a11y/index.html index 0fdc6cbe0b9..a7e66cb9fc4 100644 --- a/core/src/components/menu/test/a11y/index.html +++ b/core/src/components/menu/test/a11y/index.html @@ -2,18 +2,28 @@ - Segment - a11y + Menu - a11y +
-

Menu

+
+ +

Menu

+ Open Menu + +
+ @@ -21,6 +31,7 @@

Menu

 +

Open Menu

Button @@ -35,5 +46,12 @@

Menu
+ + diff --git a/core/src/components/menu/test/a11y/menu.e2e.ts b/core/src/components/menu/test/a11y/menu.e2e.ts new file mode 100644 index 00000000000..98d5bd7d26a --- /dev/null +++ b/core/src/components/menu/test/a11y/menu.e2e.ts @@ -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([]); + }); +}); diff --git a/core/src/components/menu/test/basic/e2e.ts b/core/src/components/menu/test/basic/e2e.ts deleted file mode 100644 index dd83dfeacff..00000000000 --- a/core/src/components/menu/test/basic/e2e.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -import { testMenu } from '../test.utils'; - -const DIRECTORY = 'basic'; -const getActiveElementID = async (page) => { - const activeElement = await page.evaluateHandle(() => document.activeElement); - return page.evaluate((el) => el?.id, activeElement); -}; - -test('menu: start menu', async () => { - await testMenu(DIRECTORY, '#start-menu', 'first'); -}); - -test('menu: start custom menu', async () => { - await testMenu(DIRECTORY, '#custom-menu', 'custom'); -}); - -test('menu: end menu', async () => { - await testMenu(DIRECTORY, '#end-menu'); -}); - -test('menu: focus trap', async () => { - const page = await newE2EPage({ url: '/src/components/menu/test/basic?ionic:_testing=true' }); - - await page.click('#open-first'); - const menu = await page.find('#start-menu'); - await menu.waitForVisible(); - - let activeElID = await getActiveElementID(page); - expect(activeElID).toEqual('start-menu'); - - await page.keyboard.press('Tab'); - activeElID = await getActiveElementID(page); - expect(activeElID).toEqual('start-menu-button'); - - // do it again to make sure focus stays inside menu - await page.keyboard.press('Tab'); - activeElID = await getActiveElementID(page); - expect(activeElID).toEqual('start-menu-button'); -}); - -test('menu: preserve scroll position', async () => { - const page = await newE2EPage({ url: '/src/components/menu/test/basic?ionic:_testing=true' }); - - await page.click('#open-first'); - const menu = await page.find('#start-menu'); - await menu.waitForVisible(); - - await page.$eval('#start-menu ion-content', (menuContentEl: any) => { - return menuContentEl.scrollToPoint(0, 200); - }); - - await menu.callMethod('close'); - - await page.click('#open-first'); - await menu.waitForVisible(); - - const scrollTop = await page.$eval('#start-menu ion-content', async (menuContentEl: any) => { - const contentScrollEl = await menuContentEl.getScrollElement(); - return contentScrollEl.scrollTop; - }); - - expect(scrollTop).toEqual(200); -}); - -/** - * RTL Tests - */ - -test('menu:rtl: start menu', async () => { - await testMenu(DIRECTORY, '#start-menu', 'first', true); -}); - -test('menu:rtl: start custom menu', async () => { - await testMenu(DIRECTORY, '#custom-menu', 'custom', true); -}); - -test('menu:rtl: end menu', async () => { - await testMenu(DIRECTORY, '#end-menu', '', true); -}); diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html index 722be746148..af0074a4cbd 100644 --- a/core/src/components/menu/test/basic/index.html +++ b/core/src/components/menu/test/basic/index.html @@ -12,12 +12,6 @@ - diff --git a/core/src/components/menu/test/basic/menu.e2e.ts b/core/src/components/menu/test/basic/menu.e2e.ts new file mode 100644 index 00000000000..400b79cb368 --- /dev/null +++ b/core/src/components/menu/test/basic/menu.e2e.ts @@ -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(); +} diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..eb810f1a07a Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..acf3656145f Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4dee7a4c8fd Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..9a6a288fec1 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0700f5fdac7 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..bbe9f3f8bdd Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f79776dc68c Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..babc6054f56 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1e289abcfe3 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d4971db5b68 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5acb9f9bfd6 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0a69a195f75 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-custom-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..41c0744498b Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4b6d79d7758 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d65a8f039d1 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..024e9524341 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5fc25bf5b8e Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1f85729dd2b Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2d3e512ec7c Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..03f61311c0e Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3a0ee6be20d Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c5e78ba6e88 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3d430052337 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a77aba858d6 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b1c00ba763d Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..19eb389ddde Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..78b293fe60e Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..bd07dc1bdb6 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..462d8233165 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..052ef848630 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3cd43305edc Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f39c1029782 Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cdb43428eef Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..facb8a6d9bb Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..76279ca202d Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..bf9f10877ff Binary files /dev/null and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/focus-trap/e2e.ts b/core/src/components/menu/test/focus-trap/e2e.ts deleted file mode 100644 index af0a01211e3..00000000000 --- a/core/src/components/menu/test/focus-trap/e2e.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const getActiveElementID = async (page) => { - const activeElement = await page.evaluateHandle(() => document.activeElement); - return page.evaluate((el) => el?.id, activeElement); -}; - -test('menu: focus trap with overlays', async () => { - const page = await newE2EPage({ - url: '/src/components/menu/test/focus-trap?ionic:_testing=true', - }); - - const ionDidOpen = await page.spyOnEvent('ionDidOpen'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - const menu = await page.find('ion-menu'); - await menu.callMethod('open'); - await ionDidOpen.next(); - - expect(await getActiveElementID(page)).toEqual('menu'); - - const openModal = await page.find('#open-modal-button'); - await openModal.click(); - await ionModalDidPresent.next(); - - expect(await getActiveElementID(page)).toEqual('modal-element'); - - const modal = await page.find('ion-modal'); - await modal.callMethod('dismiss'); - await ionModalDidDismiss.next(); - - expect(await getActiveElementID(page)).toEqual('open-modal-button'); -}); - -test('menu: focus trap with content inside overlays', async () => { - const page = await newE2EPage({ - url: '/src/components/menu/test/focus-trap?ionic:_testing=true', - }); - - const ionDidOpen = await page.spyOnEvent('ionDidOpen'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - const menu = await page.find('ion-menu'); - await menu.callMethod('open'); - await ionDidOpen.next(); - - expect(await getActiveElementID(page)).toEqual('menu'); - - const openModal = await page.find('#open-modal-button'); - await openModal.click(); - await ionModalDidPresent.next(); - - const button = await page.find('#other-button'); - await button.click(); - - expect(await getActiveElementID(page)).toEqual('other-button'); -}); - -test('menu: should work with swipe gestures after modal is dismissed', async () => { - const page = await newE2EPage({ - url: '/src/components/menu/test/focus-trap?ionic:_testing=true', - }); - - const ionDidOpen = await page.spyOnEvent('ionDidOpen'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - const menu = await page.find('ion-menu'); - await menu.callMethod('open'); - await ionDidOpen.next(); - - const openModal = await page.find('#open-modal-button'); - await openModal.click(); - await ionModalDidPresent.next(); - - const modal = await page.find('ion-modal'); - await modal.callMethod('dismiss'); - await ionModalDidDismiss.next(); - - await page.mouse.move(30, 168); - await page.mouse.down(); - - await page.mouse.move(384, 168); - await page.mouse.up(); - - await page.waitForChanges(); - - expect(menu.classList.contains('show-menu')).toBeTruthy(); -}); diff --git a/core/src/components/menu/test/focus-trap/index.html b/core/src/components/menu/test/focus-trap/index.html index 06114660015..44b87d62ed6 100644 --- a/core/src/components/menu/test/focus-trap/index.html +++ b/core/src/components/menu/test/focus-trap/index.html @@ -14,7 +14,7 @@ - + Menu @@ -24,7 +24,7 @@ Open Modal - + Modal content Dismiss Modal diff --git a/core/src/components/menu/test/focus-trap/menu.e2e.ts b/core/src/components/menu/test/focus-trap/menu.e2e.ts new file mode 100644 index 00000000000..d8bb9072749 --- /dev/null +++ b/core/src/components/menu/test/focus-trap/menu.e2e.ts @@ -0,0 +1,89 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('menu: focus trap', () => { + test.beforeEach(async ({ page, skip }) => { + await page.goto(`/src/components/menu/test/focus-trap`); + + skip.rtl('Trapping focus is not dependent on document direction'); + skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content'); + }); + + test('should trap focus with overlays', async ({ page, browserName }) => { + const ionDidOpen = await page.spyOnEvent('ionDidOpen'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#open-menu-button'); + await ionDidOpen.next(); + + const menu = await page.locator('#menu'); + await expect(menu).toBeFocused(); + + const openModalButton = await page.locator('#open-modal-button'); + await openModalButton.click(); + await ionModalDidPresent.next(); + + const modal = await page.locator('#modal'); + await expect(modal).toBeFocused(); + + await modal.evaluate(async (el: HTMLIonModalElement) => { + await el.dismiss(); + }); + await ionModalDidDismiss.next(); + + // Safari focuses the body after the modal is dismissed + if (browserName !== 'webkit') { + await expect(openModalButton).toBeFocused(); + } + }); + + test('should trap focus with content inside overlays', async ({ page }) => { + const ionDidOpen = await page.spyOnEvent('ionDidOpen'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#open-menu-button'); + await ionDidOpen.next(); + + const menu = await page.locator('#menu'); + await expect(menu).toBeFocused(); + + await page.click('#open-modal-button'); + await ionModalDidPresent.next(); + + const modal = await page.locator('#modal'); + await expect(modal).toBeFocused(); + }); + + test('should work with swipe gestures after modal is dismissed', async ({ page }) => { + const ionDidOpen = await page.spyOnEvent('ionDidOpen'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#open-menu-button'); + await ionDidOpen.next(); + + const menu = await page.locator('#menu'); + await expect(menu).toBeFocused(); + + await page.click('#open-modal-button'); + await ionModalDidPresent.next(); + + const modal = await page.locator('#modal'); + + await modal.evaluate(async (el: HTMLIonModalElement) => { + await el.dismiss(); + }); + await ionModalDidDismiss.next(); + + await page.mouse.move(30, 168); + await page.mouse.down(); + + await page.mouse.move(384, 168); + await page.mouse.up(); + + await page.waitForChanges(); + + await expect(menu).toHaveClass(/show-menu/); + }); +}); diff --git a/core/src/components/menu/test/standalone/e2e.ts b/core/src/components/menu/test/standalone/e2e.ts deleted file mode 100644 index 61a3aa7512d..00000000000 --- a/core/src/components/menu/test/standalone/e2e.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { testMenu } from '../test.utils'; - -const DIRECTORY = 'standalone'; - -test('menu: start standalone', async () => { - await testMenu(DIRECTORY, '#start-menu'); -}); - -test('menu: end standalone', async () => { - await testMenu(DIRECTORY, '#end-menu'); -}); diff --git a/core/src/components/menu/test/standalone/index.html b/core/src/components/menu/test/standalone/index.html deleted file mode 100644 index 5328e42b650..00000000000 --- a/core/src/components/menu/test/standalone/index.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - Menu - Standalone - - - - - - - - - - - - - - - Start Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - End Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - -
- - - Menu - Standalone - - - - Open Start Menu - Open End Menu - -
- - - diff --git a/core/src/components/menu/test/test.utils.ts b/core/src/components/menu/test/test.utils.ts deleted file mode 100644 index 3acc088a1c1..00000000000 --- a/core/src/components/menu/test/test.utils.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; -import { generateE2EUrl } from '@utils/test'; - -import { menuController } from '../../../utils/menu-controller'; - -export const testMenu = async (type: string, selector: string, menuId = '', rtl = false) => { - try { - const pageUrl = generateE2EUrl('menu', type, rtl); - - const page = await newE2EPage({ - url: pageUrl, - }); - - const screenshotCompares = []; - - if (menuId.length > 0) { - await menuController.enable(true, menuId); - } - - const menu = await page.find(selector); - - await menu.callMethod('open'); - await page.waitForTimeout(1000); - - screenshotCompares.push(await page.compareScreenshot()); - - await menu.callMethod('close'); - await page.waitForTimeout(250); - - screenshotCompares.push(await page.compareScreenshot('dismiss')); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } - } catch (err) { - throw err; - } -};