From bf60712aaf3ebe90472826f2b01df3d4778ba332 Mon Sep 17 00:00:00 2001 From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Date: Wed, 31 Jul 2024 11:35:09 -0400 Subject: [PATCH] chore(playwright): add click method to promise assertion lint checks (#29740) Issue number: N/A --------- ## What is the current behavior? Ionic Framework has a set of custom lint assertions to avoid creating flaky Playwright tests by forgetting to await a promise. However the `click` method was not included in the original list of methods to check. ## What is the new behavior? - Developers will receive a lint error when forgetting to await click methods from Playwright - Resolves existing tests where this lint issue was present ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information --- .../custom-rules/await-playwright-promise-assertion.js | 1 + .../accordion/test/disabled/accordion.e2e.ts | 4 ++-- .../accordion/test/readonly/accordion.e2e.ts | 4 ++-- core/src/components/modal/test/sheet/modal.e2e.ts | 2 +- core/src/components/select/test/basic/select.e2e.ts | 2 ++ .../animation/test/animationbuilder/animation.e2e.ts | 10 +++++----- 6 files changed, 13 insertions(+), 10 deletions(-) diff --git a/core/custom-rules/await-playwright-promise-assertion.js b/core/custom-rules/await-playwright-promise-assertion.js index b724e104a0..b0aed035ed 100644 --- a/core/custom-rules/await-playwright-promise-assertion.js +++ b/core/custom-rules/await-playwright-promise-assertion.js @@ -67,4 +67,5 @@ const ASYNC_PLAYWRIGHT_ASSERTS = [ 'toHaveTitle', 'toHaveURL', 'toBeOK', + 'click' ]; diff --git a/core/src/components/accordion/test/disabled/accordion.e2e.ts b/core/src/components/accordion/test/disabled/accordion.e2e.ts index 3857a1d7b2..7875f66eb0 100644 --- a/core/src/components/accordion/test/disabled/accordion.e2e.ts +++ b/core/src/components/accordion/test/disabled/accordion.e2e.ts @@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => { await expect(accordion).toHaveClass(/accordion-collapsed/); - accordion.click(); + await accordion.click(); await page.waitForChanges(); await expect(accordion).toHaveClass(/accordion-collapsed/); @@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => { await expect(accordion).toHaveClass(/accordion-collapsed/); - accordion.click(); + await accordion.click(); await page.waitForChanges(); await expect(accordion).toHaveClass(/accordion-collapsed/); diff --git a/core/src/components/accordion/test/readonly/accordion.e2e.ts b/core/src/components/accordion/test/readonly/accordion.e2e.ts index 0079503046..894d8b84be 100644 --- a/core/src/components/accordion/test/readonly/accordion.e2e.ts +++ b/core/src/components/accordion/test/readonly/accordion.e2e.ts @@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => { await expect(accordion).toHaveClass(/accordion-collapsed/); - accordion.click(); + await accordion.click(); await page.waitForChanges(); await expect(accordion).toHaveClass(/accordion-collapsed/); @@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => { await expect(accordion).toHaveClass(/accordion-collapsed/); - accordion.click(); + await accordion.click(); await page.waitForChanges(); await expect(accordion).toHaveClass(/accordion-collapsed/); diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts index 6e84cb7c62..d5d5d81a22 100644 --- a/core/src/components/modal/test/sheet/modal.e2e.ts +++ b/core/src/components/modal/test/sheet/modal.e2e.ts @@ -265,7 +265,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => const backdrop = page.locator('ion-modal ion-backdrop'); await handle.click(); - backdrop.click(); + await backdrop.click(); await ionBreakpointDidChange.next(); diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts index 4f9b666b58..d44c8ca761 100644 --- a/core/src/components/select/test/basic/select.e2e.ts +++ b/core/src/components/select/test/basic/select.e2e.ts @@ -80,9 +80,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => * is already visible. We manually click() the element instead * to avoid flaky tests. */ + /* eslint-disable custom-rules/await-playwright-promise-assertion */ el.click(); el.click(); el.click(); + /* eslint-enable custom-rules/await-playwright-promise-assertion */ }); const alerts = await page.$$('ion-alert'); diff --git a/core/src/utils/animation/test/animationbuilder/animation.e2e.ts b/core/src/utils/animation/test/animationbuilder/animation.e2e.ts index a37b7b0694..8c9a2268fa 100644 --- a/core/src/utils/animation/test/animationbuilder/animation.e2e.ts +++ b/core/src/utils/animation/test/animationbuilder/animation.e2e.ts @@ -20,14 +20,14 @@ const testNavigation = async (page: E2EPage) => { await page.click('page-root ion-button.next'); await ionRouteDidChange.next(); - page.click('page-one ion-button.next'); + await page.click('page-one ion-button.next'); await ionRouteDidChange.next(); - page.click('page-two ion-button.next'); + await page.click('page-two ion-button.next'); await ionRouteDidChange.next(); - page.click('page-three ion-back-button'); + await page.click('page-three ion-back-button'); await ionRouteDidChange.next(); - page.click('page-two ion-back-button'); + await page.click('page-two ion-back-button'); await ionRouteDidChange.next(); - page.click('page-one ion-back-button'); + await page.click('page-one ion-back-button'); await ionRouteDidChange.next(); };