test(playwright): e2e tests now wait for appload event before proceeding (#25054)

* test(playwright): test new method of waiting

* test(): rename global variable to avoid collisions
This commit is contained in:
Liam DeBeasi
2022-04-04 13:34:22 -04:00
committed by GitHub
parent ae06f4230d
commit 0f66c7b596
2 changed files with 4 additions and 56 deletions

View File

@ -17,59 +17,7 @@
window.Ionic = window.Ionic || {}; window.Ionic = window.Ionic || {};
window.Ionic.config = window.Ionic.config || {}; window.Ionic.config = window.Ionic.config || {};
/** window.addEventListener('appload', () => {
* Waits for all child Stencil components window.testAppLoaded = true;
* to be ready before resolving. })
* This logic is pulled from the Stencil
* core codebase for testing with Puppeteer:
* https://github.com/ionic-team/stencil/blob/16b8ea4dabb22024872a38bc58ba1dcf1c7cc25b/src/testing/puppeteer/puppeteer-events.ts#L158-L183
*/
const allReady = () => {
const promises = [];
const waitForDidLoad = (promises, elm) => {
if (elm != null && elm.nodeType === 1) {
for (let i = 0; i < elm.children.length; i++) {
const childElm = elm.children[i];
if (childElm.tagName.includes('-') && typeof childElm.componentOnReady === 'function') {
promises.push(childElm.componentOnReady());
}
waitForDidLoad(promises, childElm);
}
}
};
waitForDidLoad(promises, window.document.documentElement);
return Promise.all(promises).catch((e) => console.error(e));
};
const waitFrame = () => {
return new Promise((resolve) => {
requestAnimationFrame(resolve);
});
};
const stencilReady = () => {
return allReady()
.then(() => waitFrame())
.then(() => allReady())
.then(() => {
window.stencilAppLoaded = true;
});
};
/**
* Testing solutions can wait for `window.stencilAppLoaded === true`
* to know when to proceed with the test.
*/
if (window.document.readyState === 'complete') {
stencilReady();
} else {
document.addEventListener('readystatechange', function (e) {
if (e.target.readyState == 'complete') {
stencilReady();
}
});
}
})(); })();

View File

@ -54,7 +54,7 @@ export const test = base.extend<CustomFixtures>({
const formattedUrl = `${splitUrl[0]}?ionic:_testing=true&ionic:mode=${formattedMode}&rtl=${formattedRtl}`; const formattedUrl = `${splitUrl[0]}?ionic:_testing=true&ionic:mode=${formattedMode}&rtl=${formattedRtl}`;
const results = await Promise.all([ const results = await Promise.all([
page.waitForFunction(() => (window as any).stencilAppLoaded === true), page.waitForFunction(() => (window as any).testAppLoaded === true),
oldGoTo(formattedUrl), oldGoTo(formattedUrl),
]); ]);