Embed Test: Verifies that app remains hidden till link is ready (#3669)

* Add test to verify that webapp remains hidden till link is considered ready

* Make tests more stable

packages/embeds/embed-core/playwright/config/playwright.config.ts

@@ -150,6 +150,37 @@ expect.extend({
       }, 500);
     });
 
+    //At this point we know that window.initialBodyDisplay would be set as DOM would already have been ready(because linkReady event can only fire after that)
+    const {
+      display: displayBefore,
+      background: backgroundBefore,
+      initialValuesSet,
+    } = await iframe.evaluate(() => {
+      return {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore
+        display: window.initialBodyDisplay,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore
+        background: window.initialBodyBackground,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore
+        initialValuesSet: window.initialValuesSet,
+      };
+    });
+    expect(initialValuesSet).toBe(true);
+    expect(displayBefore).toBe("none");
+    expect(backgroundBefore).toBe("transparent");
+
+    const { display: displayAfter, background: backgroundAfter } = await iframe.evaluate(() => {
+      return {
+        display: document.body.style.display,
+        background: document.body.style.background,
+      };
+    });
+
+    expect(displayAfter).not.toBe("none");
+    expect(backgroundAfter).toBe("transparent");
     if (!iframeReadyEventDetail) {
       return {
         pass: false,

packages/embeds/embed-core/playwright/fixtures/fixtures.ts

@@ -9,13 +9,29 @@ export const test = base.extend<Fixtures>({
     await use(async (calNamespace: string) => {
       await page.addInitScript(
         ({ calNamespace }: { calNamespace: string }) => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           //@ts-ignore
           window.eventsFiredStoreForPlaywright = window.eventsFiredStoreForPlaywright || {};
           document.addEventListener("DOMContentLoaded", function tryAddingListener() {
             if (parent !== window) {
               // Firefox seems to execute this snippet for iframe as well. Avoid that. It must be executed only for parent frame.
+
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-ignore
+              window.initialBodyDisplay = document.body.style.display;
+
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-ignore
+              window.initialBodyBackground = document.body.style.background;
+
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-ignore
+              window.initialValuesSet = true;
+
               return;
             }
+
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             //@ts-ignore
             let api = window.Cal;
 
@@ -24,6 +40,7 @@ export const test = base.extend<Fixtures>({
               return;
             }
             if (calNamespace) {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               //@ts-ignore
               api = window.Cal.ns[calNamespace];
             }
@@ -34,9 +51,14 @@ export const test = base.extend<Fixtures>({
             api("on", {
               action: "*",
               callback: (e: any) => {
-                //@ts-ignore
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                window.iframeReady = true; // Technically if there are multiple cal embeds, it can be set due to some other iframe. But it works for now. Improve it when it doesn't work
+
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 const store = window.eventsFiredStoreForPlaywright;
-                let eventStore = (store[`${e.detail.type}-${e.detail.namespace}`] =
+                const eventStore = (store[`${e.detail.type}-${e.detail.namespace}`] =
                   store[`${e.detail.type}-${e.detail.namespace}`] || []);
                 eventStore.push(e.detail);
               },

packages/embeds/embed-core/playwright/lib/testUtils.ts

@@ -32,20 +32,23 @@ export const getBooking = async (bookingId: string) => {
 };
 
 export const getEmbedIframe = async ({ page, pathname }: { page: Page; pathname: string }) => {
-  // FIXME: Need to wait for the iframe to be properly added to shadow dom. There should be a no time boundation way to do it.
-  await new Promise((resolve) => {
-    // Keep checking
-    const interval = setInterval(() => {
-      if (page.frame("cal-embed")) {
-        resolve(true);
+  // We can't seem to access page.frame till contentWindow is available. So wait for that.
+  await page.evaluate(() => {
+    return new Promise((resolve) => {
+      const iframe = document.querySelector(".cal-embed") as HTMLIFrameElement;
+      if (!iframe) {
+        resolve(false);
+        return;
       }
-    }, 1000);
-
-    // Hard Timer
-    setTimeout(() => {
-      clearInterval(interval);
-      resolve(true);
-    }, 10000);
+      const interval = setInterval(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (iframe.contentWindow && window.iframeReady) {
+          clearInterval(interval);
+          resolve(true);
+        }
+      }, 10);
+    });
   });
   const embedIframe = page.frame("cal-embed");
   if (!embedIframe) {