javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(playwright): enable type checking (#25034)

Browse Source
This commit is contained in:
Sean Perkins
2022-03-31 15:42:09 -04:00
committed by GitHub
parent 0aa6d124d6
commit 2af24494f5
63 changed files with 163 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/playwright.config.ts
View File

@ -102,7 +102,7 @@ const config: PlaywrightTestConfig = {
projects: generateProjects(),
webServer: {
command: 'python3 -m http.server 3333',
port: '3333'
port: 3333
}
};

4
core/src/components/accordion/test/a11y/e2e.ts
View File

@ -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 () => {

2
core/src/components/accordion/test/standalone/e2e.ts
View File

@ -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({

13
core/src/components/action-sheet/test/basic/e2e.ts
View File

@ -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');
});

1
core/src/components/action-sheet/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { generateE2EUrl } from '@utils/test';
export const testActionSheet = async (

13
core/src/components/alert/test/basic/e2e.ts
View File

@ -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');
});

1
core/src/components/alert/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { generateE2EUrl } from '@utils/test';
export const testAlert = async (

2
core/src/components/button/test/basic/button.e2e.ts
View File

@ -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', () => {

1
core/src/components/datetime/test/basic/e2e.ts
View File

@ -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 () => {

2
core/src/components/datetime/test/presentation/e2e.ts
View File

@ -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({

1
core/src/components/datetime/test/set-value/e2e.ts
View File

@ -34,4 +34,3 @@ describe('datetime: setting the value', () => {
expect(activeTime).toEqualText('12:40 PM');
})
})

1
core/src/components/fab/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { generateE2EUrl } from '@utils/test';
export const testFab = async (

4
core/src/components/footer/test/fade/e2e.ts
View File

@ -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', () => {

1
core/src/components/footer/test/translucent/e2e.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { checkComponentModeClasses } from '@utils/test';
test('footer: translucent', async () => {

2
core/src/components/header/test/a11y/e2e.ts
View File

@ -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({

1
core/src/components/header/test/translucent/e2e.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { checkComponentModeClasses } from '@utils/test';
test('header: translucent', async () => {

6
core/src/components/infinite-scroll/test/basic/e2e.ts
View File

@ -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();

3
core/src/components/input/test/basic/e2e.ts
View File

@ -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());
}
});

2
core/src/components/item/test/a11y/e2e.ts
View File

@ -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({

13
core/src/components/loading/test/basic/e2e.ts
View File

@ -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');
});

1
core/src/components/loading/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { generateE2EUrl } from '@utils/test';
export const testLoading = async (

2
core/src/components/menu-button/test/a11y/e2e.ts
View File

@ -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({

2
core/src/components/menu/test/a11y/e2e.ts
View File

@ -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({

7
core/src/components/menu/test/basic/e2e.ts
View File

@ -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 () => {

4
core/src/components/menu/test/focus-trap/e2e.ts
View File

@ -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 () => {

2
core/src/components/menu/test/test.utils.ts
View File

@ -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,

17
core/src/components/modal/test/basic/e2e.ts
View File

@ -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');
});

1
core/src/components/modal/test/card/e2e.ts
View File

@ -1,4 +1,5 @@
import { newE2EPage } from '@stencil/core/testing';
import { testModal } from '../test.utils';
const DIRECTORY = 'card';

2
core/src/components/modal/test/inline/e2e.ts
View File

@ -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();

3
core/src/components/modal/test/sheet/e2e.ts
View File

@ -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 () => {

1
core/src/components/modal/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { generateE2EUrl } from '@utils/test';
export const testModal = async (

2
core/src/components/modal/test/trigger/e2e.ts
View File

@ -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());

1
core/src/components/picker-column-internal/test/basic/e2e.ts
View File

@ -1,6 +1,5 @@
import { E2EPage, newE2EPage } from '@stencil/core/testing';
describe('picker-column-internal', () => {
let page: E2EPage;

1
core/src/components/picker-column/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { dragElementBy, generateE2EUrl, listenForEvent, waitForFunctionTestContext } from '@utils/test';
export const testPickerColumn = async (

2
core/src/components/picker-internal/test/a11y/e2e.ts
View File

@ -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({

15
core/src/components/popover/test/arrow/e2e.ts
View File

@ -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();

11
core/src/components/popover/test/basic/e2e.ts
View File

@ -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');
});

4
core/src/components/popover/test/inline/e2e.ts
View File

@ -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();

3
core/src/components/popover/test/nested/e2e.ts
View File

@ -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;

17
core/src/components/popover/test/position/e2e.ts
View File

@ -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;

1
core/src/components/popover/test/size/e2e.ts
View File

@ -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' });

1
core/src/components/popover/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { generateE2EUrl } from '@utils/test';
export const testPopover = async (

10
core/src/components/popover/test/trigger/e2e.ts
View File

@ -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());

3
core/src/components/refresher/test/basic/e2e.ts
View File

@ -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';

1
core/src/components/refresher/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import type { E2EPage } from '@stencil/core/testing';
import { dragElementBy } from '@utils/test';
/**

2
core/src/components/reorder-group/test/interactive/e2e.ts
View File

@ -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 () => {

1
core/src/components/reorder-group/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import * as pd from '@stencil/core/testing';
import { dragElementBy, queryDeep } from '@utils/test';
/**

10
core/src/components/router-outlet/test/basic/e2e.ts
View File

@ -5,10 +5,9 @@ test('getRouteId() should return the segment parameters', async () => {
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' });
@ -19,10 +18,9 @@ test('getRouteId() should return the route parameters', async () => {
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' });
@ -35,9 +33,9 @@ test('it should be possible to activate the same component provided parameters a
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/);
});

2
core/src/components/router/test/basic/redirect/e2e.ts
View File

@ -7,6 +7,6 @@ test('redirect should support query string', async () => {
await page.waitForChanges();
const url = await page.url();
const url = page.url();
expect(url).toContain('#/three?has_query_string=true');
});

8
core/src/components/router/test/basic/router-push/e2e.ts
View File

@ -7,10 +7,10 @@ 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();
const url = page.url();
expect(url).toContain('#/two/three/relative?param=1');
});
@ -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();
const url = page.url();
expect(url).toContain('#/two/three/absolute');
});

3
core/src/components/router/test/guards/href/e2e.ts
View File

@ -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'

3
core/src/components/router/test/guards/link/e2e.ts
View File

@ -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'

3
core/src/components/router/test/guards/push/e2e.ts
View File

@ -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'

7
core/src/components/segment/test/a11y/e2e.ts
View File

@ -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'

2
core/src/components/toast/test/a11y/e2e.ts
View File

@ -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 () => {

5
core/src/components/toast/test/basic/e2e.ts
View File

@ -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');
});

1
core/src/components/toast/test/test.utils.ts
View File

@ -1,5 +1,4 @@
import { newE2EPage } from '@stencil/core/testing';
import { generateE2EUrl } from '@utils/test';
export const testToast = async (

2
core/src/utils/test/overlays/e2e.ts
View File

@ -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' });

46
core/src/utils/test/playwright.ts
View File

@ -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<null | Response>;
setIonViewport: () => Promise<void>;
getSnapshotSettings: () => string;
}
type CustomTestArgs = PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions & {
page: IonicPage
}
type CustomFixtures = {
page: IonicPage
};
export const test = base.extend<CustomFixtures>({
page: async ({ page }: CustomTestArgs, use: (r: IonicPage) => Promise<void>, 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');
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
})
}

21
core/src/utils/test/utils.ts
View File

@ -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<any> => {
return new Promise(resolve => {
return new Promise<void>(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<HTMLElement>(selector);
await page.evaluate(async elSelector => {
const el = document.querySelector<HTMLElement>(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);
}

3
core/tsconfig.json
View File

@ -34,7 +34,6 @@
"src",
],
"exclude": [
"node_modules",
"**/test"
"node_modules"
]
}