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

test(ripple-effect): reduce flakiness (#26985)

Browse Source
This commit is contained in:
Sean Perkins
2023-03-22 15:37:00 -04:00
committed by GitHub
parent af16d40930
commit 26a7e86338
1 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
View File

@ -19,6 +19,7 @@ test.describe('ripple-effect: basic', () => {
test.describe('ripple effect with nested ion-button', () => {
test('should add .ion-activated when the block is pressed', async ({ page }) => {
await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
await isIdleCallbackComplete(page);
const el = page.locator('#ripple-with-button');
@ -45,6 +46,7 @@ test.describe('ripple-effect: basic', () => {
const verifyRippleEffect = async (page: E2EPage, selector: string) => {
await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
await isIdleCallbackComplete(page);
const el = page.locator(selector);
@ -61,3 +63,24 @@ const verifyRippleEffect = async (page: E2EPage, selector: string) => {
await expect(el).toHaveClass(/ion-activated/);
};
/**
* This function is used to wait for the idle callback to be called.
* It mirrors the custom implementation in app.tsx for either
* using requestIdleCallback on supported browsers or a setTimeout
* of 32ms (~2 frames) on unsupported browsers (Safari).
*/
const isIdleCallbackComplete = async (page: E2EPage) => {
await page.waitForFunction(
() => {
return new Promise((resolve) => {
if ('requestIdleCallback' in window) {
window.requestIdleCallback(resolve);
} else {
setTimeout(resolve, 32);
}
});
},
{ timeout: 5000 }
);
};