From 6bbb372980a5efac3e4e9ccdea3cc16a3e933f6d Mon Sep 17 00:00:00 2001 From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Date: Mon, 24 Oct 2022 15:22:35 -0500 Subject: [PATCH] test(menu-toggle): add basic Playwright test (#26164) --- .../menu-toggle/test/basic/index.html | 27 +++------- .../menu-toggle/test/basic/menu-toggle.e2e.ts | 54 +++++++++++++++++++ 2 files changed, 60 insertions(+), 21 deletions(-) create mode 100644 core/src/components/menu-toggle/test/basic/menu-toggle.e2e.ts diff --git a/core/src/components/menu-toggle/test/basic/index.html b/core/src/components/menu-toggle/test/basic/index.html index 69c5468551..93d3851f9d 100644 --- a/core/src/components/menu-toggle/test/basic/index.html +++ b/core/src/components/menu-toggle/test/basic/index.html @@ -16,29 +16,14 @@ - + - Left Menu + Start Menu - - - Open end Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - - + Start menu content @@ -47,14 +32,14 @@ - + - Hola + End Menu - hola macho + End menu content
diff --git a/core/src/components/menu-toggle/test/basic/menu-toggle.e2e.ts b/core/src/components/menu-toggle/test/basic/menu-toggle.e2e.ts new file mode 100644 index 0000000000..257b2f19d7 --- /dev/null +++ b/core/src/components/menu-toggle/test/basic/menu-toggle.e2e.ts @@ -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(); +}