From ee341f7f1850ff37a28047d95063fc6a7436be32 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 24 Oct 2022 15:18:38 -0400 Subject: [PATCH 01/14] test(menu): update a11y test --- core/src/components/menu/test/a11y/e2e.ts | 15 ---------- core/src/components/menu/test/a11y/index.html | 29 +++++++++++++++++-- .../src/components/menu/test/a11y/menu.e2e.ts | 25 ++++++++++++++++ 3 files changed, 51 insertions(+), 18 deletions(-) delete mode 100644 core/src/components/menu/test/a11y/e2e.ts create mode 100644 core/src/components/menu/test/a11y/menu.e2e.ts 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..9407c6026da 100644 --- a/core/src/components/menu/test/a11y/index.html +++ b/core/src/components/menu/test/a11y/index.html @@ -2,18 +2,34 @@ - Segment - a11y + Menu - a11y - + + +
-

Menu

+
+ +

Menu

+ Open Menu + +
+ @@ -35,5 +51,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..1213b9bf608 --- /dev/null +++ b/core/src/components/menu/test/a11y/menu.e2e.ts @@ -0,0 +1,25 @@ +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('#openMenu'); + + await button.click(); + await page.waitForSelector('ion-menu', { state: 'visible' }); + + await expect(menu).toHaveAttribute('role', 'navigation'); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); +}); From 534f7631fa4b3127e82393dd75cb58e0b2131ca8 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 24 Oct 2022 16:00:54 -0400 Subject: [PATCH 02/14] test(menu): update a11y --- core/src/components/menu/test/a11y/index.html | 1 + core/src/components/menu/test/a11y/menu.e2e.ts | 3 +++ 2 files changed, 4 insertions(+) diff --git a/core/src/components/menu/test/a11y/index.html b/core/src/components/menu/test/a11y/index.html index 9407c6026da..fa2063a4586 100644 --- a/core/src/components/menu/test/a11y/index.html +++ b/core/src/components/menu/test/a11y/index.html @@ -37,6 +37,7 @@

Menu

+

Open Menu

Button diff --git a/core/src/components/menu/test/a11y/menu.e2e.ts b/core/src/components/menu/test/a11y/menu.e2e.ts index 1213b9bf608..6dc7d6a5e86 100644 --- a/core/src/components/menu/test/a11y/menu.e2e.ts +++ b/core/src/components/menu/test/a11y/menu.e2e.ts @@ -19,6 +19,9 @@ test.describe('menu: a11y', () => { 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([]); }); From b4bb1335d3d162fcc3dcff8407004d5b921f8e7f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 26 Oct 2022 18:13:56 -0400 Subject: [PATCH 03/14] test(menu): update basic e2e to playwright --- core/src/components/menu/test/basic/e2e.ts | 28 -------- .../src/components/menu/test/basic/index.html | 42 ++++------- .../components/menu/test/basic/menu.e2e.ts | 69 +++++++++++++++++++ 3 files changed, 84 insertions(+), 55 deletions(-) create mode 100644 core/src/components/menu/test/basic/menu.e2e.ts diff --git a/core/src/components/menu/test/basic/e2e.ts b/core/src/components/menu/test/basic/e2e.ts index dd83dfeacff..eb357932235 100644 --- a/core/src/components/menu/test/basic/e2e.ts +++ b/core/src/components/menu/test/basic/e2e.ts @@ -8,18 +8,6 @@ const getActiveElementID = async (page) => { 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' }); @@ -63,19 +51,3 @@ test('menu: preserve scroll position', async () => { 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..12168ef373f 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..f952f8f2d1a --- /dev/null +++ b/core/src/components/menu/test/basic/menu.e2e.ts @@ -0,0 +1,69 @@ +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, '#open-start'); + await testMenu(page, customMenu, '#open-custom'); + await testMenu(page, endMenu, '#open-end'); + }); + + test('should trap focus', async ({ page, skip, browserName }) => { + skip.rtl('Trapping focus is not dependent on document direction'); + skip.mode('md'); + + 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.down('Shift'); + // await page.keyboard.press('Tab'); + // await page.keyboard.up('Shift'); + + // await expect(button).toBeFocused(); + + // await page.keyboard.press('Tab'); + + // if (browserName === 'webkit') { + // await page.keyboard.up('Alt'); + // } + + // await expect(button).toBeFocused(); + }); +}); + +async function testMenu(page: E2EPage, menu: Locator, button: string) { + const ionDidOpen = await page.spyOnEvent('ionDidOpen'); + const ionDidClose = await page.spyOnEvent('ionDidClose'); + + await page.click(button); + await ionDidOpen.next(); + + await expect(menu).toHaveClass(/show-menu/); + + await menu.evaluate(async (el: HTMLIonMenuElement) => { + await el.close(); + }); + await ionDidClose.next(); +} From 29380c187d856a34ec5e7322b6b384e766f01881 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 27 Oct 2022 14:07:25 -0400 Subject: [PATCH 04/14] test(menu): finish basic playwright migration --- core/src/components/menu/test/basic/e2e.ts | 53 ------------------- .../src/components/menu/test/basic/index.html | 6 ++- .../components/menu/test/basic/menu.e2e.ts | 42 +++++++++++---- 3 files changed, 36 insertions(+), 65 deletions(-) delete mode 100644 core/src/components/menu/test/basic/e2e.ts 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 eb357932235..00000000000 --- a/core/src/components/menu/test/basic/e2e.ts +++ /dev/null @@ -1,53 +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: 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); -}); diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html index 12168ef373f..865963dfa35 100644 --- a/core/src/components/menu/test/basic/index.html +++ b/core/src/components/menu/test/basic/index.html @@ -20,7 +20,7 @@ - + Start Menu @@ -28,7 +28,9 @@ - Button + + Button + Menu Item Menu Item Menu Item diff --git a/core/src/components/menu/test/basic/menu.e2e.ts b/core/src/components/menu/test/basic/menu.e2e.ts index f952f8f2d1a..11b45e83a23 100644 --- a/core/src/components/menu/test/basic/menu.e2e.ts +++ b/core/src/components/menu/test/basic/menu.e2e.ts @@ -20,7 +20,7 @@ test.describe('menu: basic', () => { test('should trap focus', async ({ page, skip, browserName }) => { skip.rtl('Trapping focus is not dependent on document direction'); - skip.mode('md'); + skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content'); const ionDidOpen = await page.spyOnEvent('ionDidOpen'); @@ -37,19 +37,41 @@ test.describe('menu: basic', () => { await expect(button).toBeFocused(); - // await page.keyboard.down('Shift'); - // await page.keyboard.press('Tab'); - // await page.keyboard.up('Shift'); + 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'); - // await expect(button).toBeFocused(); + const ionDidOpen = await page.spyOnEvent('ionDidOpen'); + + await page.click('#open-start'); + await ionDidOpen.next(); - // await page.keyboard.press('Tab'); + 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(); - // if (browserName === 'webkit') { - // await page.keyboard.up('Alt'); - // } + const scrollTop = await page.locator('#start-menu ion-content').evaluate(async (el: HTMLIonContentElement) => { + const contentScrollEl = await el.getScrollElement(); + return contentScrollEl.scrollTop; + }); - // await expect(button).toBeFocused(); + await expect(scrollTop).toBe(200); }); }); From c4c8c540123bb4f0f4d67a9c4a45fe6108770f69 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 27 Oct 2022 16:06:49 -0400 Subject: [PATCH 05/14] test(menu): add working focus-trap e2e --- .../src/components/menu/test/basic/index.html | 6 +- .../menu/test/focus-trap/index.html | 4 +- .../menu/test/focus-trap/menu.e2e.ts | 88 +++++++++++++++++++ 3 files changed, 93 insertions(+), 5 deletions(-) create mode 100644 core/src/components/menu/test/focus-trap/menu.e2e.ts diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html index 865963dfa35..b457f7f2278 100644 --- a/core/src/components/menu/test/basic/index.html +++ b/core/src/components/menu/test/basic/index.html @@ -96,9 +96,9 @@ - Open Start Menu - Open End Menu - Open Custom Menu + Open Start Menu + Open End Menu + Open Custom Menu 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..bb2210d49bc --- /dev/null +++ b/core/src/components/menu/test/focus-trap/menu.e2e.ts @@ -0,0 +1,88 @@ +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 }) => { + 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 = 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(); + + // 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 otherButton = page.locator('#other-button'); + await otherButton.click(); + + // await expect(otherButton).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/); + }); +}); From d0c1063b3df618fb466e51faceec659d5f830af5 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 28 Oct 2022 10:21:46 -0400 Subject: [PATCH 06/14] test(menu): remove standalone tests --- .../components/menu/test/standalone/e2e.ts | 11 --- .../menu/test/standalone/index.html | 85 ------------------- 2 files changed, 96 deletions(-) delete mode 100644 core/src/components/menu/test/standalone/e2e.ts delete mode 100644 core/src/components/menu/test/standalone/index.html 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 - -
- - - From 2a70f23bb4c87ec5c8598153bbdf78bb6a5cb1a1 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 28 Oct 2022 10:22:18 -0400 Subject: [PATCH 07/14] test(menu): finish up focus-trap accounting for safari quirks --- .../components/menu/test/focus-trap/e2e.ts | 90 ------------------- .../menu/test/focus-trap/menu.e2e.ts | 21 +++-- 2 files changed, 16 insertions(+), 95 deletions(-) delete mode 100644 core/src/components/menu/test/focus-trap/e2e.ts 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/menu.e2e.ts b/core/src/components/menu/test/focus-trap/menu.e2e.ts index bb2210d49bc..9406a241c87 100644 --- a/core/src/components/menu/test/focus-trap/menu.e2e.ts +++ b/core/src/components/menu/test/focus-trap/menu.e2e.ts @@ -9,7 +9,7 @@ test.describe('menu: focus trap', () => { skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content'); }); - test('should trap focus with overlays', async ({ page }) => { + 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'); @@ -20,7 +20,7 @@ test.describe('menu: focus trap', () => { const menu = await page.locator('#menu'); await expect(menu).toBeFocused(); - const openModalButton = page.locator('#open-modal-button'); + const openModalButton = await page.locator('#open-modal-button'); await openModalButton.click(); await ionModalDidPresent.next(); @@ -32,10 +32,13 @@ test.describe('menu: focus trap', () => { }); await ionModalDidDismiss.next(); - // await expect(openModalButton).toBeFocused(); + // 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 }) => { + test('should trap focus with content inside overlays', async ({ page, browserName }) => { const ionDidOpen = await page.spyOnEvent('ionDidOpen'); const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); @@ -48,10 +51,18 @@ test.describe('menu: focus trap', () => { await page.click('#open-modal-button'); await ionModalDidPresent.next(); + const modal = await page.locator('#modal'); + await expect(modal).toBeFocused(); + const otherButton = page.locator('#other-button'); await otherButton.click(); - // await expect(otherButton).toBeFocused(); + // Safari remains focused the modal after the button is clicked + if (browserName === 'webkit') { + await expect(modal).toBeFocused(); + } else { + await expect(otherButton).toBeFocused(); + } }); test('should work with swipe gestures after modal is dismissed', async ({ page }) => { From eb195ab075eb15859a2bc3138bd1ed491c287f34 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 28 Oct 2022 10:59:42 -0400 Subject: [PATCH 08/14] test(menu): add menu screenshots for basic test --- core/src/components/menu/test/basic/menu.e2e.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/core/src/components/menu/test/basic/menu.e2e.ts b/core/src/components/menu/test/basic/menu.e2e.ts index 11b45e83a23..400b79cb368 100644 --- a/core/src/components/menu/test/basic/menu.e2e.ts +++ b/core/src/components/menu/test/basic/menu.e2e.ts @@ -13,9 +13,9 @@ test.describe('menu: basic', () => { const customMenu = page.locator('[menu-id="custom-menu"]'); const endMenu = page.locator('[menu-id="end-menu"]'); - await testMenu(page, startMenu, '#open-start'); - await testMenu(page, customMenu, '#open-custom'); - await testMenu(page, endMenu, '#open-end'); + await testMenu(page, startMenu, 'start'); + await testMenu(page, customMenu, 'custom'); + await testMenu(page, endMenu, 'end'); }); test('should trap focus', async ({ page, skip, browserName }) => { @@ -75,15 +75,17 @@ test.describe('menu: basic', () => { }); }); -async function testMenu(page: E2EPage, menu: Locator, button: string) { +async function testMenu(page: E2EPage, menu: Locator, menuId: string) { const ionDidOpen = await page.spyOnEvent('ionDidOpen'); const ionDidClose = await page.spyOnEvent('ionDidClose'); - await page.click(button); + 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(); }); From a677e3f7ae18ae02af1b8edba3693357ed5263c7 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 28 Oct 2022 11:00:52 -0400 Subject: [PATCH 09/14] test(menu): remove old util --- core/src/components/menu/test/test.utils.ts | 38 --------------------- 1 file changed, 38 deletions(-) delete mode 100644 core/src/components/menu/test/test.utils.ts 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; - } -}; From 337ee9ac5d84ddec4232462be14c88a09b8992b3 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 28 Oct 2022 11:13:55 -0400 Subject: [PATCH 10/14] test(menu): remove unnecessary changes in a11y --- core/src/components/menu/test/a11y/index.html | 10 ++-------- core/src/components/menu/test/a11y/menu.e2e.ts | 2 +- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/core/src/components/menu/test/a11y/index.html b/core/src/components/menu/test/a11y/index.html index fa2063a4586..a7e66cb9fc4 100644 --- a/core/src/components/menu/test/a11y/index.html +++ b/core/src/components/menu/test/a11y/index.html @@ -4,17 +4,11 @@ Menu - a11y - + -