diff --git a/core/playwright.config.ts b/core/playwright.config.ts index a1cad9ad8c..bafc5f87f4 100644 --- a/core/playwright.config.ts +++ b/core/playwright.config.ts @@ -102,7 +102,7 @@ const config: PlaywrightTestConfig = { projects: generateProjects(), webServer: { command: 'python3 -m http.server 3333', - port: '3333' + port: 3333 } }; diff --git a/core/src/components/accordion/test/a11y/e2e.ts b/core/src/components/accordion/test/a11y/e2e.ts index 95082c90db..bd8777cb03 100644 --- a/core/src/components/accordion/test/a11y/e2e.ts +++ b/core/src/components/accordion/test/a11y/e2e.ts @@ -1,8 +1,8 @@ import { newE2EPage } from '@stencil/core/testing'; -const getActiveElementText = async (page) => { +const getActiveElementText = async page => { const activeElement = await page.evaluateHandle(() => document.activeElement); - return await page.evaluate(el => el && el.innerText, activeElement); + return page.evaluate(el => el && el.innerText, activeElement); } test('accordion: a11y', async () => { diff --git a/core/src/components/accordion/test/standalone/e2e.ts b/core/src/components/accordion/test/standalone/e2e.ts index 9188a39915..15d0f93047 100644 --- a/core/src/components/accordion/test/standalone/e2e.ts +++ b/core/src/components/accordion/test/standalone/e2e.ts @@ -1,5 +1,5 @@ -import { newE2EPage } from '@stencil/core/testing'; import { AxePuppeteer } from '@axe-core/puppeteer'; +import { newE2EPage } from '@stencil/core/testing'; test('accordion: axe', async () => { const page = await newE2EPage({ diff --git a/core/src/components/action-sheet/test/basic/e2e.ts b/core/src/components/action-sheet/test/basic/e2e.ts index 81d48384fb..567567bb53 100644 --- a/core/src/components/action-sheet/test/basic/e2e.ts +++ b/core/src/components/action-sheet/test/basic/e2e.ts @@ -1,10 +1,11 @@ -import { testActionSheet, testActionSheetAlert, testActionSheetBackdrop } from '../test.utils'; import { newE2EPage } from '@stencil/core/testing'; +import { testActionSheet, testActionSheetAlert, testActionSheetBackdrop } from '../test.utils'; + const DIRECTORY = 'basic'; -const getActiveElementText = async (page) => { +const getActiveElementText = async page => { const activeElement = await page.evaluateHandle(() => document.activeElement); - return await page.evaluate(el => el && el.textContent, activeElement); + return page.evaluate(el => el && el.textContent, activeElement); } test('action-sheet: data', async () => { @@ -45,7 +46,7 @@ test('action-sheet: focus trap', async () => { await page.click('#basic'); await page.waitForSelector('#basic'); - let actionSheet = await page.find('ion-action-sheet'); + const actionSheet = await page.find('ion-action-sheet'); expect(actionSheet).not.toBe(null); await actionSheet.waitForVisible(); @@ -152,12 +153,12 @@ test('action-sheet: htmlAttributes', async () => { await page.click('#basic'); await page.waitForSelector('#basic'); - let toast = await page.find('ion-action-sheet'); + const toast = await page.find('ion-action-sheet'); expect(toast).not.toBe(null); await toast.waitForVisible(); - const attribute = await page.evaluate((el) => document.querySelector('ion-action-sheet').getAttribute('data-testid')); + const attribute = await page.evaluate(el => document.querySelector('ion-action-sheet').getAttribute('data-testid')); expect(attribute).toEqual('basic-action-sheet'); }); diff --git a/core/src/components/action-sheet/test/test.utils.ts b/core/src/components/action-sheet/test/test.utils.ts index 2079318ed3..08ed884409 100644 --- a/core/src/components/action-sheet/test/test.utils.ts +++ b/core/src/components/action-sheet/test/test.utils.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { generateE2EUrl } from '@utils/test'; export const testActionSheet = async ( diff --git a/core/src/components/alert/test/basic/e2e.ts b/core/src/components/alert/test/basic/e2e.ts index 0bb2db8a23..21f2a6f782 100644 --- a/core/src/components/alert/test/basic/e2e.ts +++ b/core/src/components/alert/test/basic/e2e.ts @@ -1,10 +1,11 @@ -import { testAlert } from '../test.utils'; import { newE2EPage } from '@stencil/core/testing'; +import { testAlert } from '../test.utils'; + const DIRECTORY = 'basic'; -const getActiveElementText = async (page) => { +const getActiveElementText = async page => { const activeElement = await page.evaluateHandle(() => document.activeElement); - return await page.evaluate(el => el && el.textContent, activeElement); + return page.evaluate(el => el && el.textContent, activeElement); } test('alert: focus trap', async () => { @@ -13,7 +14,7 @@ test('alert: focus trap', async () => { await page.click('#multipleButtons'); await page.waitForSelector('#multipleButtons'); - let alert = await page.find('ion-alert'); + const alert = await page.find('ion-alert'); expect(alert).not.toBe(null); await alert.waitForVisible(); @@ -111,12 +112,12 @@ test('alert: htmlAttributes', async () => { await page.click('#basic'); await page.waitForSelector('#basic'); - let alert = await page.find('ion-alert'); + const alert = await page.find('ion-alert'); expect(alert).not.toBe(null); await alert.waitForVisible(); - const attribute = await page.evaluate((el) => document.querySelector('ion-alert').getAttribute('data-testid')); + const attribute = await page.evaluate(el => document.querySelector('ion-alert').getAttribute('data-testid')); expect(attribute).toEqual('basic-alert'); }); diff --git a/core/src/components/alert/test/test.utils.ts b/core/src/components/alert/test/test.utils.ts index a4d62a59d2..213224664b 100644 --- a/core/src/components/alert/test/test.utils.ts +++ b/core/src/components/alert/test/test.utils.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { generateE2EUrl } from '@utils/test'; export const testAlert = async ( diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts index 63099a9a0d..de790135d7 100644 --- a/core/src/components/button/test/basic/button.e2e.ts +++ b/core/src/components/button/test/basic/button.e2e.ts @@ -1,4 +1,4 @@ -import { expect, describe } from '@playwright/test'; +import { expect } from '@playwright/test'; import { test } from '@utils/test/playwright'; test.describe('button: basic', () => { diff --git a/core/src/components/datetime/test/basic/e2e.ts b/core/src/components/datetime/test/basic/e2e.ts index 754ece63e4..58f1b327b1 100644 --- a/core/src/components/datetime/test/basic/e2e.ts +++ b/core/src/components/datetime/test/basic/e2e.ts @@ -111,7 +111,6 @@ test('datetime:rtl: basic', async () => { expect(compare).toMatchScreenshot(); }); - describe('datetime: confirm date', () => { test('should set the date value based on the selected date', async () => { diff --git a/core/src/components/datetime/test/presentation/e2e.ts b/core/src/components/datetime/test/presentation/e2e.ts index 2b09dd6dd3..1587f40a6a 100644 --- a/core/src/components/datetime/test/presentation/e2e.ts +++ b/core/src/components/datetime/test/presentation/e2e.ts @@ -1,4 +1,4 @@ -import { newE2EPage, E2EPage } from '@stencil/core/testing'; +import { E2EPage, newE2EPage } from '@stencil/core/testing'; test('presentation', async () => { const page = await newE2EPage({ diff --git a/core/src/components/datetime/test/set-value/e2e.ts b/core/src/components/datetime/test/set-value/e2e.ts index bc40ffb2cf..e1007b8646 100644 --- a/core/src/components/datetime/test/set-value/e2e.ts +++ b/core/src/components/datetime/test/set-value/e2e.ts @@ -34,4 +34,3 @@ describe('datetime: setting the value', () => { expect(activeTime).toEqualText('12:40 PM'); }) }) - diff --git a/core/src/components/fab/test/test.utils.ts b/core/src/components/fab/test/test.utils.ts index 79e017800e..369896eeb1 100644 --- a/core/src/components/fab/test/test.utils.ts +++ b/core/src/components/fab/test/test.utils.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { generateE2EUrl } from '@utils/test'; export const testFab = async ( diff --git a/core/src/components/footer/test/fade/e2e.ts b/core/src/components/footer/test/fade/e2e.ts index 86b51bb59b..6bf657417d 100644 --- a/core/src/components/footer/test/fade/e2e.ts +++ b/core/src/components/footer/test/fade/e2e.ts @@ -1,6 +1,4 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; - +import { E2EPage, newE2EPage } from '@stencil/core/testing'; import { scrollToBottom } from '@utils/test'; describe('footer: fade: iOS', () => { diff --git a/core/src/components/footer/test/translucent/e2e.ts b/core/src/components/footer/test/translucent/e2e.ts index ee44d0fc2c..06365e289e 100644 --- a/core/src/components/footer/test/translucent/e2e.ts +++ b/core/src/components/footer/test/translucent/e2e.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { checkComponentModeClasses } from '@utils/test'; test('footer: translucent', async () => { diff --git a/core/src/components/header/test/a11y/e2e.ts b/core/src/components/header/test/a11y/e2e.ts index a5b5316bff..624987fb58 100644 --- a/core/src/components/header/test/a11y/e2e.ts +++ b/core/src/components/header/test/a11y/e2e.ts @@ -1,5 +1,5 @@ -import { newE2EPage } from '@stencil/core/testing'; import { AxePuppeteer } from '@axe-core/puppeteer'; +import { newE2EPage } from '@stencil/core/testing'; test('header: axe', async () => { const page = await newE2EPage({ diff --git a/core/src/components/header/test/translucent/e2e.ts b/core/src/components/header/test/translucent/e2e.ts index 3fe93c81a0..14c020b167 100644 --- a/core/src/components/header/test/translucent/e2e.ts +++ b/core/src/components/header/test/translucent/e2e.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { checkComponentModeClasses } from '@utils/test'; test('header: translucent', async () => { diff --git a/core/src/components/infinite-scroll/test/basic/e2e.ts b/core/src/components/infinite-scroll/test/basic/e2e.ts index e3b0c22ecc..454bb853ba 100644 --- a/core/src/components/infinite-scroll/test/basic/e2e.ts +++ b/core/src/components/infinite-scroll/test/basic/e2e.ts @@ -1,12 +1,10 @@ -import { newE2EPage } from '@stencil/core/testing'; -import type { E2EPage } from '@stencil/core/testing'; - +import { E2EPage, newE2EPage } from '@stencil/core/testing'; /** * Scrolls an `ion-content` element to the bottom, triggering the `ionInfinite` event. * Waits for the custom event to complete. */ -async function scrollIonContentPage(page: E2EPage) { +const scrollIonContentPage = async (page: E2EPage) => { const content = await page.find('ion-content'); await content.callMethod('scrollToBottom'); await page.waitForChanges(); diff --git a/core/src/components/input/test/basic/e2e.ts b/core/src/components/input/test/basic/e2e.ts index 64ceedc97c..c1ead5adc2 100644 --- a/core/src/components/input/test/basic/e2e.ts +++ b/core/src/components/input/test/basic/e2e.ts @@ -37,7 +37,6 @@ test('input: basic', async () => { expect(compare).toMatchScreenshot(); } - }); test('input: basic should not error on input', async () => { @@ -49,7 +48,7 @@ test('input: basic should not error on input', async () => { page.on('console', msg => { if (msg.type() === 'error') { - errors.push(msg.text); + errors.push(msg.text()); } }); diff --git a/core/src/components/item/test/a11y/e2e.ts b/core/src/components/item/test/a11y/e2e.ts index bc772f771f..c741a8f107 100644 --- a/core/src/components/item/test/a11y/e2e.ts +++ b/core/src/components/item/test/a11y/e2e.ts @@ -1,5 +1,5 @@ -import { newE2EPage } from '@stencil/core/testing'; import { AxePuppeteer } from '@axe-core/puppeteer'; +import { newE2EPage } from '@stencil/core/testing'; test('item: axe', async () => { const page = await newE2EPage({ diff --git a/core/src/components/loading/test/basic/e2e.ts b/core/src/components/loading/test/basic/e2e.ts index f14c699256..e79ac9057c 100644 --- a/core/src/components/loading/test/basic/e2e.ts +++ b/core/src/components/loading/test/basic/e2e.ts @@ -1,10 +1,11 @@ -import { testLoading } from '../test.utils'; import { newE2EPage } from '@stencil/core/testing'; +import { testLoading } from '../test.utils'; + const DIRECTORY = 'basic'; -const getActiveElementText = async (page) => { +const getActiveElementText = async page => { const activeElement = await page.evaluateHandle(() => document.activeElement); - return await page.evaluate(el => el && el.textContent, activeElement); + return page.evaluate(el => el && el.textContent, activeElement); } test('loading: focus trap', async () => { @@ -13,7 +14,7 @@ test('loading: focus trap', async () => { await page.click('#html-content-loading'); await page.waitForSelector('#html-content-loading'); - let loading = await page.find('ion-loading'); + const loading = await page.find('ion-loading'); expect(loading).not.toBe(null); await loading.waitForVisible(); @@ -102,12 +103,12 @@ test('loading: htmlAttributes', async () => { await page.click('#basic-loading'); await page.waitForSelector('#basic-loading'); - let alert = await page.find('ion-loading'); + const alert = await page.find('ion-loading'); expect(alert).not.toBe(null); await alert.waitForVisible(); - const attribute = await page.evaluate((el) => document.querySelector('ion-loading').getAttribute('data-testid')); + const attribute = await page.evaluate(el => document.querySelector('ion-loading').getAttribute('data-testid')); expect(attribute).toEqual('basic-loading'); }); diff --git a/core/src/components/loading/test/test.utils.ts b/core/src/components/loading/test/test.utils.ts index ea410b87dc..9a4a321e92 100644 --- a/core/src/components/loading/test/test.utils.ts +++ b/core/src/components/loading/test/test.utils.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { generateE2EUrl } from '@utils/test'; export const testLoading = async ( diff --git a/core/src/components/menu-button/test/a11y/e2e.ts b/core/src/components/menu-button/test/a11y/e2e.ts index d38ad0fa36..dbc65e04b5 100644 --- a/core/src/components/menu-button/test/a11y/e2e.ts +++ b/core/src/components/menu-button/test/a11y/e2e.ts @@ -1,5 +1,5 @@ -import { newE2EPage } from '@stencil/core/testing'; import { AxePuppeteer } from '@axe-core/puppeteer'; +import { newE2EPage } from '@stencil/core/testing'; test('menu-button: axe', async () => { const page = await newE2EPage({ diff --git a/core/src/components/menu/test/a11y/e2e.ts b/core/src/components/menu/test/a11y/e2e.ts index 364409a477..0c5eff350e 100644 --- a/core/src/components/menu/test/a11y/e2e.ts +++ b/core/src/components/menu/test/a11y/e2e.ts @@ -1,5 +1,5 @@ -import { newE2EPage } from '@stencil/core/testing'; import { AxePuppeteer } from '@axe-core/puppeteer'; +import { newE2EPage } from '@stencil/core/testing'; test('menu: axe', async () => { const page = await newE2EPage({ diff --git a/core/src/components/menu/test/basic/e2e.ts b/core/src/components/menu/test/basic/e2e.ts index e2feb52617..b23caeaa54 100644 --- a/core/src/components/menu/test/basic/e2e.ts +++ b/core/src/components/menu/test/basic/e2e.ts @@ -1,10 +1,11 @@ -import { testMenu } from '../test.utils'; import { newE2EPage } from '@stencil/core/testing'; +import { testMenu } from '../test.utils'; + const DIRECTORY = 'basic'; -const getActiveElementID = async (page) => { +const getActiveElementID = async page => { const activeElement = await page.evaluateHandle(() => document.activeElement); - return await page.evaluate(el => el && el.id, activeElement); + return page.evaluate(el => el && el.id, activeElement); } test('menu: start menu', async () => { @@ -25,7 +26,7 @@ test('menu: focus trap', async () => { 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-button'); diff --git a/core/src/components/menu/test/focus-trap/e2e.ts b/core/src/components/menu/test/focus-trap/e2e.ts index 3d9cf8935f..2eeb3725fd 100644 --- a/core/src/components/menu/test/focus-trap/e2e.ts +++ b/core/src/components/menu/test/focus-trap/e2e.ts @@ -1,8 +1,8 @@ import { newE2EPage } from '@stencil/core/testing'; -const getActiveElementID = async (page) => { +const getActiveElementID = async page => { const activeElement = await page.evaluateHandle(() => document.activeElement); - return await page.evaluate(el => el && el.id, activeElement); + return page.evaluate(el => el && el.id, activeElement); } test('menu: focus trap with overlays', async () => { diff --git a/core/src/components/menu/test/test.utils.ts b/core/src/components/menu/test/test.utils.ts index f303e29684..bcdc98cbcf 100644 --- a/core/src/components/menu/test/test.utils.ts +++ b/core/src/components/menu/test/test.utils.ts @@ -1,7 +1,7 @@ import { newE2EPage } from '@stencil/core/testing'; +import { generateE2EUrl } from '@utils/test'; import { menuController } from '../../../utils/menu-controller'; -import { generateE2EUrl } from '@utils/test'; export const testMenu = async ( type: string, diff --git a/core/src/components/modal/test/basic/e2e.ts b/core/src/components/modal/test/basic/e2e.ts index 15b297ed8e..3f9f768c43 100644 --- a/core/src/components/modal/test/basic/e2e.ts +++ b/core/src/components/modal/test/basic/e2e.ts @@ -1,10 +1,11 @@ -import { testModal } from '../test.utils'; import { newE2EPage } from '@stencil/core/testing'; +import { testModal } from '../test.utils'; + const DIRECTORY = 'basic'; -const getActiveElementText = async (page) => { +const getActiveElementText = async page => { const activeElement = await page.evaluateHandle(() => document.activeElement); - return await page.evaluate(el => el && el.textContent, activeElement); + return page.evaluate(el => el && el.textContent, activeElement); } test('modal: focus trap', async () => { @@ -14,7 +15,7 @@ test('modal: focus trap', async () => { await page.click('#basic-modal'); await page.waitForSelector('#basic-modal'); - let modal = await page.find('ion-modal'); + const modal = await page.find('ion-modal'); expect(modal).not.toBe(null); await ionModalDidPresent.next(); @@ -45,7 +46,7 @@ test('modal: return focus', async () => { await page.click('#basic-modal'); await page.waitForSelector('#basic-modal'); - let modal = await page.find('ion-modal'); + const modal = await page.find('ion-modal'); expect(modal).not.toBe(null); await ionModalDidPresent.next() @@ -57,7 +58,7 @@ test('modal: return focus', async () => { ]); const activeElement = await page.evaluateHandle(() => document.activeElement); - const id = await activeElement.evaluate((node) => node.id); + const id = await activeElement.evaluate(node => node.id); expect(id).toEqual('basic-modal'); }); @@ -75,12 +76,12 @@ test('modal: htmlAttributes', async () => { await page.click('#basic-modal'); await page.waitForSelector('#basic-modal'); - let alert = await page.find('ion-modal'); + const alert = await page.find('ion-modal'); expect(alert).not.toBe(null); await alert.waitForVisible(); - const attribute = await page.evaluate((el) => document.querySelector('ion-modal').getAttribute('data-testid')); + const attribute = await page.evaluate(el => document.querySelector('ion-modal').getAttribute('data-testid')); expect(attribute).toEqual('basic-modal'); }); diff --git a/core/src/components/modal/test/card/e2e.ts b/core/src/components/modal/test/card/e2e.ts index 615dcf4565..954184d6e9 100644 --- a/core/src/components/modal/test/card/e2e.ts +++ b/core/src/components/modal/test/card/e2e.ts @@ -1,4 +1,5 @@ import { newE2EPage } from '@stencil/core/testing'; + import { testModal } from '../test.utils'; const DIRECTORY = 'card'; diff --git a/core/src/components/modal/test/inline/e2e.ts b/core/src/components/modal/test/inline/e2e.ts index 5b4665792c..345eed9386 100644 --- a/core/src/components/modal/test/inline/e2e.ts +++ b/core/src/components/modal/test/inline/e2e.ts @@ -29,7 +29,7 @@ test('modal: inline', async () => { await page.click('ion-button'); await page.waitForSelector('ion-modal'); - let modalAgain = await page.find('ion-modal'); + const modalAgain = await page.find('ion-modal'); expect(modalAgain).not.toBe(null); await modalAgain.waitForVisible(); diff --git a/core/src/components/modal/test/sheet/e2e.ts b/core/src/components/modal/test/sheet/e2e.ts index 0a0b7b045f..adeabe9526 100644 --- a/core/src/components/modal/test/sheet/e2e.ts +++ b/core/src/components/modal/test/sheet/e2e.ts @@ -1,7 +1,8 @@ import { newE2EPage } from '@stencil/core/testing'; -import { testModal } from '../test.utils'; import { getActiveElement, getActiveElementParent } from '@utils/test'; +import { testModal } from '../test.utils'; + const DIRECTORY = 'sheet'; test('modal: sheet', async () => { diff --git a/core/src/components/modal/test/test.utils.ts b/core/src/components/modal/test/test.utils.ts index c3b140653e..4d28e98bca 100644 --- a/core/src/components/modal/test/test.utils.ts +++ b/core/src/components/modal/test/test.utils.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { generateE2EUrl } from '@utils/test'; export const testModal = async ( diff --git a/core/src/components/modal/test/trigger/e2e.ts b/core/src/components/modal/test/trigger/e2e.ts index 6d48ef8df3..da106ae229 100644 --- a/core/src/components/modal/test/trigger/e2e.ts +++ b/core/src/components/modal/test/trigger/e2e.ts @@ -8,7 +8,7 @@ test('should open modal by left clicking on trigger', async () => { await page.click('#left-click-trigger'); await page.waitForSelector('.left-click-modal'); - let modal = await page.find('.left-click-modal'); + const modal = await page.find('.left-click-modal'); await modal.waitForVisible(); screenshotCompares.push(await page.compareScreenshot()); diff --git a/core/src/components/picker-column-internal/test/basic/e2e.ts b/core/src/components/picker-column-internal/test/basic/e2e.ts index 47f4bd53e1..7af7dd57d6 100644 --- a/core/src/components/picker-column-internal/test/basic/e2e.ts +++ b/core/src/components/picker-column-internal/test/basic/e2e.ts @@ -1,6 +1,5 @@ import { E2EPage, newE2EPage } from '@stencil/core/testing'; - describe('picker-column-internal', () => { let page: E2EPage; diff --git a/core/src/components/picker-column/test/test.utils.ts b/core/src/components/picker-column/test/test.utils.ts index 05122cd376..8a5adc82c0 100644 --- a/core/src/components/picker-column/test/test.utils.ts +++ b/core/src/components/picker-column/test/test.utils.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { dragElementBy, generateE2EUrl, listenForEvent, waitForFunctionTestContext } from '@utils/test'; export const testPickerColumn = async ( diff --git a/core/src/components/picker-internal/test/a11y/e2e.ts b/core/src/components/picker-internal/test/a11y/e2e.ts index 85ceab1739..7c13567d88 100644 --- a/core/src/components/picker-internal/test/a11y/e2e.ts +++ b/core/src/components/picker-internal/test/a11y/e2e.ts @@ -1,5 +1,5 @@ -import { newE2EPage } from '@stencil/core/testing'; import { AxePuppeteer } from '@axe-core/puppeteer'; +import { newE2EPage } from '@stencil/core/testing'; test('picker-internal: a11y', async () => { const page = await newE2EPage({ diff --git a/core/src/components/popover/test/arrow/e2e.ts b/core/src/components/popover/test/arrow/e2e.ts index 3d5c7fdbad..2d02710c3e 100644 --- a/core/src/components/popover/test/arrow/e2e.ts +++ b/core/src/components/popover/test/arrow/e2e.ts @@ -17,7 +17,7 @@ test('popover - arrow side: left', async () => { }); test('popover - arrow side: start', async () => { - await testPopover('start'), false; + await testPopover('start', false); }); test('popover - arrow side: end', async () => { @@ -25,15 +25,14 @@ test('popover - arrow side: end', async () => { }); test('popover - arrow side: start, rtl', async () => { - await testPopover('start', false, true); + await testPopover('start', true); }); test('popover - arrow side: end, rtl', async () => { - await testPopover('end', false, true); + await testPopover('end', true); }); - -const testPopover = async (side, isRTL = false) => { +const testPopover = async (side: string, isRTL = false) => { const rtl = isRTL ? '&rtl=true' : ''; const page = await newE2EPage({ url: `/src/components/popover/test/arrow?ionic:_testing=true${rtl}` }); @@ -43,9 +42,9 @@ const testPopover = async (side, isRTL = false) => { const trigger = await page.find(`#${TRIGGER_ID}`); - await page.evaluate((TRIGGER_ID) => { - const trigger = document.querySelector(`#${TRIGGER_ID}`); - trigger.scrollIntoView({ block: 'center' }); + await page.evaluate(POPOVER_TRIGGER_ID => { + const popoverTrigger = document.querySelector(`#${POPOVER_TRIGGER_ID}`); + popoverTrigger?.scrollIntoView({ block: 'center' }); }, TRIGGER_ID); trigger.click(); diff --git a/core/src/components/popover/test/basic/e2e.ts b/core/src/components/popover/test/basic/e2e.ts index 5ab2c50166..bc7d517ef6 100644 --- a/core/src/components/popover/test/basic/e2e.ts +++ b/core/src/components/popover/test/basic/e2e.ts @@ -1,6 +1,7 @@ -import { testPopover } from '../test.utils'; import { newE2EPage } from '@stencil/core/testing'; +import { testPopover } from '../test.utils'; + const DIRECTORY = 'basic'; /** @@ -8,7 +9,7 @@ const DIRECTORY = 'basic'; * to wait for the requestAnimationFrame to fire. */ const expectActiveElementTextToEqual = async (page, textValue) => { - await page.waitFor((text) => document.activeElement.textContent === text, {}, textValue) + await page.waitFor(text => document.activeElement.textContent === text, {}, textValue) } test('popover: focus trap', async () => { @@ -17,7 +18,7 @@ test('popover: focus trap', async () => { await page.click('#basic-popover'); await page.waitForSelector('#basic-popover'); - let popover = await page.find('ion-popover'); + const popover = await page.find('ion-popover'); expect(popover).not.toBe(null); await popover.waitForVisible(); @@ -119,12 +120,12 @@ test('popover: htmlAttributes', async () => { await page.click('#basic-popover'); await page.waitForSelector('#basic-popover'); - let alert = await page.find('ion-popover'); + const alert = await page.find('ion-popover'); expect(alert).not.toBe(null); await alert.waitForVisible(); - const attribute = await page.evaluate((el) => document.querySelector('ion-popover').getAttribute('data-testid')); + const attribute = await page.evaluate(el => document.querySelector('ion-popover').getAttribute('data-testid')); expect(attribute).toEqual('basic-popover'); }); diff --git a/core/src/components/popover/test/inline/e2e.ts b/core/src/components/popover/test/inline/e2e.ts index 69b5fc90d2..3a534d6b99 100644 --- a/core/src/components/popover/test/inline/e2e.ts +++ b/core/src/components/popover/test/inline/e2e.ts @@ -24,7 +24,7 @@ test('popover: inline, isOpen and event props', async () => { await page.click('ion-button#props'); await page.waitForSelector('ion-popover'); - let popoverAgain = await page.find('ion-popover'); + const popoverAgain = await page.find('ion-popover'); expect(popoverAgain).not.toBe(null); await popoverAgain.waitForVisible(); @@ -60,7 +60,7 @@ test('popover: inline, present method', async () => { await page.click('ion-button#method'); await page.waitForSelector('ion-popover'); - let popoverAgain = await page.find('ion-popover'); + const popoverAgain = await page.find('ion-popover'); expect(popoverAgain).not.toBe(null); await popoverAgain.waitForVisible(); diff --git a/core/src/components/popover/test/nested/e2e.ts b/core/src/components/popover/test/nested/e2e.ts index cf53d858f5..ac6fdb24e9 100644 --- a/core/src/components/popover/test/nested/e2e.ts +++ b/core/src/components/popover/test/nested/e2e.ts @@ -1,5 +1,4 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; +import { E2EPage, newE2EPage } from '@stencil/core/testing'; describe('nested popovers', () => { let page: E2EPage; diff --git a/core/src/components/popover/test/position/e2e.ts b/core/src/components/popover/test/position/e2e.ts index 87c148f37f..b1e9a4958c 100644 --- a/core/src/components/popover/test/position/e2e.ts +++ b/core/src/components/popover/test/position/e2e.ts @@ -96,8 +96,7 @@ test('popover: position - side: end, alignment: end - rtl', async () => { await testPopover('end', 'end', true); }); - -const testPopover = async (side, alignment, isRTL = false) => { +const testPopover = async (side: string, alignment: string, isRTL = false) => { const rtl = isRTL ? '&rtl=true' : ''; const page = await newE2EPage({ url: `/src/components/popover/test/position?ionic:_testing=true${rtl}` }); @@ -107,9 +106,9 @@ const testPopover = async (side, alignment, isRTL = false) => { const trigger = await page.find(`#${TRIGGER_ID}`); - await page.evaluate((TRIGGER_ID) => { - const trigger = document.querySelector(`#${TRIGGER_ID}`); - trigger.scrollIntoView({ block: 'center' }); + await page.evaluate(POPOVER_TRIGGER_ID => { + const popoverTrigger = document.querySelector(`#${POPOVER_TRIGGER_ID}`); + popoverTrigger?.scrollIntoView({ block: 'center' }); }, TRIGGER_ID); trigger.click(); @@ -137,10 +136,10 @@ const testSideAndAlign = async (page, popoverClass, triggerID, side, alignment, const actualX = popoverBbox.x; const actualY = popoverBbox.y; + let expectedX; + let expectedY; - let expectedX, expectedY; - - switch(side) { + switch (side) { case 'top': expectedX = triggerBbox.x; expectedY = triggerBbox.y - popoverBbox.height; @@ -170,7 +169,7 @@ const testSideAndAlign = async (page, popoverClass, triggerID, side, alignment, } const alignmentAxis = (['top', 'bottom'].includes(side)) ? 'x' : 'y'; - switch(alignment) { + switch (alignment) { case 'center': const centerAlign = getCenterAlign(side, triggerBbox, popoverBbox); expectedX += centerAlign.left; diff --git a/core/src/components/popover/test/size/e2e.ts b/core/src/components/popover/test/size/e2e.ts index 719b6daf64..089c0a3300 100644 --- a/core/src/components/popover/test/size/e2e.ts +++ b/core/src/components/popover/test/size/e2e.ts @@ -75,7 +75,6 @@ test('should calculate popover width based on event width', async () => { } }); - test('should not calculate popover width with no trigger or event', async () => { const page = await newE2EPage({ url: '/src/components/popover/test/size?ionic:_testing=true' }); diff --git a/core/src/components/popover/test/test.utils.ts b/core/src/components/popover/test/test.utils.ts index 32e6863a2a..14eb7d0406 100644 --- a/core/src/components/popover/test/test.utils.ts +++ b/core/src/components/popover/test/test.utils.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { generateE2EUrl } from '@utils/test'; export const testPopover = async ( diff --git a/core/src/components/popover/test/trigger/e2e.ts b/core/src/components/popover/test/trigger/e2e.ts index 1b22e14961..e0d99a8aab 100644 --- a/core/src/components/popover/test/trigger/e2e.ts +++ b/core/src/components/popover/test/trigger/e2e.ts @@ -8,7 +8,7 @@ test('should open popover by left clicking on trigger', async () => { await page.click('#left-click-trigger'); await page.waitForSelector('.left-click-popover'); - let popover = await page.find('.left-click-popover'); + const popover = await page.find('.left-click-popover'); await popover.waitForVisible(); screenshotCompares.push(await page.compareScreenshot()); @@ -26,7 +26,7 @@ test('should open popover by right clicking on trigger', async () => { await page.click('#right-click-trigger', { button: 'right' }); await page.waitForSelector('.right-click-popover'); - let popover = await page.find('.right-click-popover'); + const popover = await page.find('.right-click-popover'); await popover.waitForVisible(); screenshotCompares.push(await page.compareScreenshot()); @@ -46,7 +46,7 @@ test('should open popover by hovering over trigger', async () => { await page.mouse.move(bbox.x + 5, bbox.y + 5); await page.waitForSelector('.hover-popover'); - let popover = await page.find('.hover-popover'); + const popover = await page.find('.hover-popover'); await popover.waitForVisible(); screenshotCompares.push(await page.compareScreenshot()); @@ -64,12 +64,12 @@ test('should not close main popover with dismiss-on-select when clicking a trigg await page.click('#nested-click-trigger'); await page.waitForSelector('.nested-click-popover'); - let firstPopover = await page.find('.nested-click-popover'); + const firstPopover = await page.find('.nested-click-popover'); await firstPopover.waitForVisible(); await page.click('#nested-click-trigger-two'); - let secondPopover = await page.find('.nested-click-popover-two'); + const secondPopover = await page.find('.nested-click-popover-two'); await secondPopover.waitForVisible(); screenshotCompares.push(await page.compareScreenshot()); diff --git a/core/src/components/radio-group/test/e2e.ts b/core/src/components/radio-group/test/e2e.ts index 7794c85522..9f3dbaee41 100644 --- a/core/src/components/radio-group/test/e2e.ts +++ b/core/src/components/radio-group/test/e2e.ts @@ -13,7 +13,7 @@ const selectRadio = async (page, radioButtonId: string, selectionMethod: 'keyboa } else if (selectionMethod === 'mouse') { await page.click(selector); } - + await page.waitForChanges(); const radioGroup = await page.find(`ion-radio#${radioButtonId} >>> input`); @@ -34,7 +34,7 @@ describe('radio-group', () => { `); const checked = await selectRadio(page, 'one', 'keyboard'); - + expect(checked).toBe(true); }); @@ -66,7 +66,7 @@ describe('radio-group', () => { `); const checked = await selectRadio(page, 'one', 'mouse'); - + expect(checked).toBe(true); }); diff --git a/core/src/components/refresher/test/basic/e2e.ts b/core/src/components/refresher/test/basic/e2e.ts index 4cf0613dbb..313099274c 100644 --- a/core/src/components/refresher/test/basic/e2e.ts +++ b/core/src/components/refresher/test/basic/e2e.ts @@ -1,5 +1,4 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; +import { E2EPage, newE2EPage } from '@stencil/core/testing'; import { pullToRefresh } from '../test.utils'; diff --git a/core/src/components/refresher/test/test.utils.ts b/core/src/components/refresher/test/test.utils.ts index c71ea7f6a6..4aac59235b 100644 --- a/core/src/components/refresher/test/test.utils.ts +++ b/core/src/components/refresher/test/test.utils.ts @@ -1,5 +1,4 @@ import type { E2EPage } from '@stencil/core/testing'; - import { dragElementBy } from '@utils/test'; /** diff --git a/core/src/components/reorder-group/test/interactive/e2e.ts b/core/src/components/reorder-group/test/interactive/e2e.ts index 66e3a593e0..9eb749fef0 100644 --- a/core/src/components/reorder-group/test/interactive/e2e.ts +++ b/core/src/components/reorder-group/test/interactive/e2e.ts @@ -1,7 +1,7 @@ import * as pd from '@stencil/core/dist/testing/puppeteer/puppeteer-declarations'; import { newE2EPage } from '@stencil/core/testing'; - import { getElementProperty, queryDeep } from '@utils/test'; + import { moveReorderItem } from '../test.utils'; test('reorder: interactive', async () => { diff --git a/core/src/components/reorder-group/test/test.utils.ts b/core/src/components/reorder-group/test/test.utils.ts index d6a2a95d04..9494cb0daf 100644 --- a/core/src/components/reorder-group/test/test.utils.ts +++ b/core/src/components/reorder-group/test/test.utils.ts @@ -1,5 +1,4 @@ import * as pd from '@stencil/core/testing'; - import { dragElementBy, queryDeep } from '@utils/test'; /** diff --git a/core/src/components/router-outlet/test/basic/e2e.ts b/core/src/components/router-outlet/test/basic/e2e.ts index 5ed9c15b42..cf90fda501 100644 --- a/core/src/components/router-outlet/test/basic/e2e.ts +++ b/core/src/components/router-outlet/test/basic/e2e.ts @@ -3,12 +3,11 @@ import { newE2EPage } from '@stencil/core/testing'; test('getRouteId() should return the segment parameters', async () => { const page = await newE2EPage({ url: '/src/components/router-outlet/test/basic?ionic:_testing=true' - }); - + }); await page.$eval('ion-item[href="#/two/segment"] ion-label', (el: any) => el.click()); await page.waitForChanges(); - const routeId = await page.$eval('ion-router-outlet', async (el: any) => await el.getRouteId()); + const routeId = await page.$eval('ion-router-outlet', async (el: any) => el.getRouteId()); expect(routeId.id).toEqual('PAGE-TWO'); expect(routeId.params).toEqual({ param: 'segment' }); @@ -17,12 +16,11 @@ test('getRouteId() should return the segment parameters', async () => { test('getRouteId() should return the route parameters', async () => { const page = await newE2EPage({ url: '/src/components/router-outlet/test/basic?ionic:_testing=true' - }); - + }); await page.$eval('ion-item[href="#/page-3"] ion-label', (el: any) => el.click()); await page.waitForChanges(); - const routeId = await page.$eval('ion-router-outlet', async (el: any) => await el.getRouteId()); + const routeId = await page.$eval('ion-router-outlet', async (el: any) => el.getRouteId()); expect(routeId.id).toEqual('PAGE-THREE'); expect(routeId.params).toEqual({ param: 'route' }); @@ -31,13 +29,13 @@ test('getRouteId() should return the route parameters', async () => { test('it should be possible to activate the same component provided parameters are different', async () => { const page = await newE2EPage({ url: '/src/components/router-outlet/test/basic?ionic:_testing=true' - }); + }); await page.$eval('ion-item[href="#/page-4.1/foo"] ion-label', (el: any) => el.click()); await page.waitForChanges(); - expect(await page.$eval('ion-router-outlet', (el) => el.textContent)).toMatch(/text = foo/); + expect(await page.$eval('ion-router-outlet', el => el.textContent)).toMatch(/text = foo/); await page.$eval('ion-item[href="#/page-4.2/bar"] ion-label', (el: any) => el.click()); await page.waitForChanges(); - expect(await page.$eval('ion-router-outlet', (el) => el.textContent)).toMatch(/text = bar/); + expect(await page.$eval('ion-router-outlet', el => el.textContent)).toMatch(/text = bar/); }); \ No newline at end of file diff --git a/core/src/components/router/test/basic/redirect/e2e.ts b/core/src/components/router/test/basic/redirect/e2e.ts index fed23dbd6a..f486a061f9 100644 --- a/core/src/components/router/test/basic/redirect/e2e.ts +++ b/core/src/components/router/test/basic/redirect/e2e.ts @@ -7,6 +7,6 @@ test('redirect should support query string', async () => { await page.waitForChanges(); - const url = await page.url(); - expect(url).toContain('#/three?has_query_string=true'); -}); \ No newline at end of file + const url = page.url(); + expect(url).toContain('#/three?has_query_string=true'); +}); diff --git a/core/src/components/router/test/basic/router-push/e2e.ts b/core/src/components/router/test/basic/router-push/e2e.ts index df6b3666c0..43167d7c92 100644 --- a/core/src/components/router/test/basic/router-push/e2e.ts +++ b/core/src/components/router/test/basic/router-push/e2e.ts @@ -7,11 +7,11 @@ test('push should support relative path', async () => { await page.waitForChanges(); const backButton = await page.$('#btn-rel'); - await backButton.click(); + await backButton?.click(); await page.waitForChanges(); - const url = await page.url(); - expect(url).toContain('#/two/three/relative?param=1'); + const url = page.url(); + expect(url).toContain('#/two/three/relative?param=1'); }); test('push should support absolute path', async () => { @@ -21,9 +21,9 @@ test('push should support absolute path', async () => { await page.waitForChanges(); const backButton = await page.$('#btn-abs'); - await backButton.click(); + await backButton?.click(); await page.waitForChanges(); - const url = await page.url(); - expect(url).toContain('#/two/three/absolute'); -}); \ No newline at end of file + const url = page.url(); + expect(url).toContain('#/two/three/absolute'); +}); diff --git a/core/src/components/router/test/guards/href/e2e.ts b/core/src/components/router/test/guards/href/e2e.ts index 647ef20fc9..aa3502750c 100644 --- a/core/src/components/router/test/guards/href/e2e.ts +++ b/core/src/components/router/test/guards/href/e2e.ts @@ -62,9 +62,6 @@ test('router: guards - href - redirect/allow', async () => { await checkUrl(page, '#/home'); }); - - - test('router: guards - href - allow/block', async () => { const page = await newE2EPage({ url: '/src/components/router/test/guards?ionic:_testing=true' diff --git a/core/src/components/router/test/guards/link/e2e.ts b/core/src/components/router/test/guards/link/e2e.ts index d084ee5a44..3b4197c2aa 100644 --- a/core/src/components/router/test/guards/link/e2e.ts +++ b/core/src/components/router/test/guards/link/e2e.ts @@ -62,9 +62,6 @@ test('router: guards - router-link - redirect/allow', async () => { await checkUrl(page, '#/home'); }); - - - test('router: guards - router-link - allow/block', async () => { const page = await newE2EPage({ url: '/src/components/router/test/guards?ionic:_testing=true' diff --git a/core/src/components/router/test/guards/push/e2e.ts b/core/src/components/router/test/guards/push/e2e.ts index 8fc057511b..bfc48d54bd 100644 --- a/core/src/components/router/test/guards/push/e2e.ts +++ b/core/src/components/router/test/guards/push/e2e.ts @@ -62,9 +62,6 @@ test('router: guards - router.push - redirect/allow', async () => { await checkUrl(page, '#/home'); }); - - - test('router: guards - router.push - allow/block', async () => { const page = await newE2EPage({ url: '/src/components/router/test/guards?ionic:_testing=true' diff --git a/core/src/components/segment/test/a11y/e2e.ts b/core/src/components/segment/test/a11y/e2e.ts index c6511c4640..9125a3e42e 100644 --- a/core/src/components/segment/test/a11y/e2e.ts +++ b/core/src/components/segment/test/a11y/e2e.ts @@ -1,9 +1,9 @@ -import { newE2EPage } from '@stencil/core/testing'; import { AxePuppeteer } from '@axe-core/puppeteer'; +import { newE2EPage } from '@stencil/core/testing'; -const getActiveElementText = async (page) => { +const getActiveElementText = async page => { const activeElement = await page.evaluateHandle(() => document.activeElement); - return await page.evaluate(el => el && el.innerText, activeElement); + return page.evaluate(el => el && el.innerText, activeElement); } test('segment: axe', async () => { @@ -18,7 +18,6 @@ test('segment: axe', async () => { expect(results.violations.length).toEqual(0); }); - test('segment: keyboard navigation', async () => { const page = await newE2EPage({ url: '/src/components/segment/test/a11y?ionic:_testing=true' diff --git a/core/src/components/select/test/basic/e2e.ts b/core/src/components/select/test/basic/e2e.ts index 5d0154fd2b..6460a1586e 100644 --- a/core/src/components/select/test/basic/e2e.ts +++ b/core/src/components/select/test/basic/e2e.ts @@ -69,7 +69,7 @@ test('select: basic', async () => { popoverOption2 = await popover.find('.select-interface-option:nth-child(2)'); expect(popoverOption2).toHaveClass('ion-focused'); - + await popover.callMethod('dismiss'); // Custom Action Sheet Select diff --git a/core/src/components/toast/test/a11y/e2e.ts b/core/src/components/toast/test/a11y/e2e.ts index ff1cf44d1d..d658ee1c28 100644 --- a/core/src/components/toast/test/a11y/e2e.ts +++ b/core/src/components/toast/test/a11y/e2e.ts @@ -1,5 +1,5 @@ -import { newE2EPage } from '@stencil/core/testing'; import { AxePuppeteer } from '@axe-core/puppeteer'; +import { newE2EPage } from '@stencil/core/testing'; describe('toast accessibility tests', () => { test('it should not have any axe violations with polite toasts', async () => { diff --git a/core/src/components/toast/test/basic/e2e.ts b/core/src/components/toast/test/basic/e2e.ts index 3f96b7c955..81940ddeab 100644 --- a/core/src/components/toast/test/basic/e2e.ts +++ b/core/src/components/toast/test/basic/e2e.ts @@ -1,4 +1,5 @@ import { newE2EPage } from '@stencil/core/testing'; + import { testToast } from '../test.utils'; const DIRECTORY = 'basic'; @@ -111,12 +112,12 @@ test('toast: htmlAttributes', async () => { await page.click('#show-bottom-toast'); await page.waitForSelector('#show-bottom-toast'); - let toast = await page.find('ion-toast'); + const toast = await page.find('ion-toast'); expect(toast).not.toBe(null); await toast.waitForVisible(); - const attribute = await page.evaluate((el) => document.querySelector('ion-toast').getAttribute('data-testid')); + const attribute = await page.evaluate(el => document.querySelector('ion-toast').getAttribute('data-testid')); expect(attribute).toEqual('basic-toast'); }); diff --git a/core/src/components/toast/test/test.utils.ts b/core/src/components/toast/test/test.utils.ts index 657d3dc162..857d59b8fa 100644 --- a/core/src/components/toast/test/test.utils.ts +++ b/core/src/components/toast/test/test.utils.ts @@ -1,5 +1,4 @@ import { newE2EPage } from '@stencil/core/testing'; - import { generateE2EUrl } from '@utils/test'; export const testToast = async ( diff --git a/core/src/utils/test/overlays/e2e.ts b/core/src/utils/test/overlays/e2e.ts index f7cc942e68..6311958443 100644 --- a/core/src/utils/test/overlays/e2e.ts +++ b/core/src/utils/test/overlays/e2e.ts @@ -1,4 +1,5 @@ import { newE2EPage } from '@stencil/core/testing'; + import { getActiveElementParent } from '../utils'; test('overlays: hardware back button: should dismiss a presented overlay', async () => { @@ -78,7 +79,6 @@ test('overlays: Esc: should dismiss a presented overlay', async () => { await page.waitForSelector('ion-modal', { hidden: true }) }); - test('overlays: Esc: should dismiss the presented overlay, even though another hidden modal was added last', async () => { const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' }); diff --git a/core/src/utils/test/playwright.ts b/core/src/utils/test/playwright.ts index 04d74abdcc..7f8cac2384 100644 --- a/core/src/utils/test/playwright.ts +++ b/core/src/utils/test/playwright.ts @@ -1,10 +1,23 @@ -import { test as base } from '@playwright/test'; +import { Page, PlaywrightTestArgs, PlaywrightTestOptions, PlaywrightWorkerArgs, PlaywrightWorkerOptions, Response, TestInfo, test as base } from '@playwright/test'; -export const test = base.extend({ - page: async ({ page }, use, testInfo) => { +type IonicPage = Page & { + goto: (url: string) => Promise; + setIonViewport: () => Promise; + getSnapshotSettings: () => string; +} + +type CustomTestArgs = PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions & { + page: IonicPage +} + +type CustomFixtures = { + page: IonicPage +}; + +export const test = base.extend({ + page: async ({ page }: CustomTestArgs, use: (r: IonicPage) => Promise, testInfo: TestInfo) => { const oldGoTo = page.goto.bind(page); - /** * This is an extended version of Playwright's * page.goto method. In addition to performing @@ -12,7 +25,7 @@ export const test = base.extend({ * automatically waits for the Stencil components * to be hydrated before proceeding with the test. */ - page.goto = (url: string) => { + page.goto = async (url: string) => { const { mode, rtl } = testInfo.project.metadata; const splitUrl = url.split('?'); @@ -28,10 +41,12 @@ export const test = base.extend({ const formattedUrl = `${splitUrl[0]}?ionic:_testing=true&ionic:mode=${formattedMode}&rtl=${formattedRtl}`; - return Promise.all([ - page.waitForFunction(() => window.stencilAppLoaded === true), + const [_, response] = await Promise.all([ + page.waitForFunction(() => (window as any).stencilAppLoaded === true), oldGoTo(formattedUrl) - ]) + ]); + + return response; } /** @@ -77,18 +92,23 @@ export const test = base.extend({ * can be captured in a screenshot. */ page.setIonViewport = async () => { - const currentViewport = await page.viewportSize(); + const currentViewport = page.viewportSize(); const pixelAmountRenderedOffscreen = await page.evaluate(() => { const content = document.querySelector('ion-content'); - const innerScroll = content.shadowRoot.querySelector('.inner-scroll'); - - return innerScroll.scrollHeight - content.clientHeight; + if (content) { + const innerScroll = content.shadowRoot!.querySelector('.inner-scroll')!; + return innerScroll.scrollHeight - content.clientHeight; + } + return 0; }); + const width = currentViewport?.width ?? 640; + const height = (currentViewport?.height ?? 480) + pixelAmountRenderedOffscreen; + await page.setViewportSize({ - width: currentViewport.width, - height: currentViewport.height + pixelAmountRenderedOffscreen + width, + height }) } diff --git a/core/src/utils/test/utils.ts b/core/src/utils/test/utils.ts index f7216ea833..7b5ed2a48a 100644 --- a/core/src/utils/test/utils.ts +++ b/core/src/utils/test/utils.ts @@ -1,5 +1,5 @@ import { E2EElement, E2EPage } from '@stencil/core/testing'; -import { ElementHandle } from 'puppeteer'; +import { ElementHandle, SerializableOrJSHandle } from 'puppeteer'; /** * page.evaluate can only return a serializable value, @@ -7,8 +7,8 @@ import { ElementHandle } from 'puppeteer'; * Instead, we return an object with some common * properties that you may want to access in a test. */ -const getSerialElement = async (page, element) => { - return await page.evaluate(el => { +const getSerialElement = async (page: E2EPage, element: SerializableOrJSHandle) => { + return page.evaluate(el => { const { className, tagName, id } = el; return { className, @@ -18,17 +18,16 @@ const getSerialElement = async (page, element) => { }, element); } -export const getActiveElementParent = async (page) => { - const activeElement = await page.evaluateHandle(() => document.activeElement.parentElement); +export const getActiveElementParent = async (page: E2EPage) => { + const activeElement = await page.evaluateHandle(() => document.activeElement!.parentElement); return getSerialElement(page, activeElement); } -export const getActiveElement = async (page) => { +export const getActiveElement = async (page: E2EPage) => { const activeElement = await page.evaluateHandle(() => document.activeElement); return getSerialElement(page, activeElement); } - export const generateE2EUrl = (component: string, type: string, rtl = false): string => { let url = `/src/components/${component}/test/${type}?ionic:_testing=true`; if (rtl) { @@ -120,7 +119,7 @@ export const dragElementBy = async ( * @param interval: number - Interval to run setInterval on */ export const waitForFunctionTestContext = async (fn: any, params: any, interval = 16): Promise => { - return new Promise(resolve => { + return new Promise(resolve => { const intervalId = setInterval(() => { if (fn(params)) { clearInterval(intervalId); @@ -194,8 +193,8 @@ export const checkModeClasses = async (el: E2EElement, globalMode: string) => { * @param selector The element to scroll within. */ export const scrollToBottom = async (page: E2EPage, selector: string) => { - await page.evaluate(async selector => { - const el = document.querySelector(selector); + await page.evaluate(async elSelector => { + const el = document.querySelector(elSelector); if (el) { if (el.tagName === 'ION-CONTENT') { await (el as any).scrollToBottom(); @@ -203,7 +202,7 @@ export const scrollToBottom = async (page: E2EPage, selector: string) => { el.scrollTop = el.scrollHeight; } } else { - console.error(`Unable to find element with selector: ${selector}`); + console.error(`Unable to find element with selector: ${elSelector}`); } }, selector); } diff --git a/core/tsconfig.json b/core/tsconfig.json index a84cbfaeb1..45b29de257 100644 --- a/core/tsconfig.json +++ b/core/tsconfig.json @@ -34,7 +34,6 @@ "src", ], "exclude": [ - "node_modules", - "**/test" + "node_modules" ] }