From 0f66c7b5966c63a13664dca1c400e64bed13493a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 4 Apr 2022 13:34:22 -0400
Subject: [PATCH] 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
---
 core/scripts/testing/scripts.js   | 58 ++-----------------------------
 core/src/utils/test/playwright.ts |  2 +-
 2 files changed, 4 insertions(+), 56 deletions(-)

diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js
index 119dc41f9c..e973ec6e0e 100644
--- a/core/scripts/testing/scripts.js
+++ b/core/scripts/testing/scripts.js
@@ -17,59 +17,7 @@
   window.Ionic = window.Ionic || {};
   window.Ionic.config = window.Ionic.config || {};
 
-  /**
-   * Waits for all child Stencil components
-   * 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();
-      }
-    });
-  }
-
+  window.addEventListener('appload', () => {
+    window.testAppLoaded = true;
+  })
 })();
diff --git a/core/src/utils/test/playwright.ts b/core/src/utils/test/playwright.ts
index d7213003c9..f8bec9e6ac 100644
--- a/core/src/utils/test/playwright.ts
+++ b/core/src/utils/test/playwright.ts
@@ -54,7 +54,7 @@ export const test = base.extend<CustomFixtures>({
       const formattedUrl = `${splitUrl[0]}?ionic:_testing=true&ionic:mode=${formattedMode}&rtl=${formattedRtl}`;
 
       const results = await Promise.all([
-        page.waitForFunction(() => (window as any).stencilAppLoaded === true),
+        page.waitForFunction(() => (window as any).testAppLoaded === true),
         oldGoTo(formattedUrl),
       ]);