diff --git a/packages/embeds/embed-core/playwright/config/playwright.config.ts b/packages/embeds/embed-core/playwright/config/playwright.config.ts index fdc2e43200..bb6ec2054e 100644 --- a/packages/embeds/embed-core/playwright/config/playwright.config.ts +++ b/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, diff --git a/packages/embeds/embed-core/playwright/fixtures/fixtures.ts b/packages/embeds/embed-core/playwright/fixtures/fixtures.ts index bc456b8473..8414588af8 100644 --- a/packages/embeds/embed-core/playwright/fixtures/fixtures.ts +++ b/packages/embeds/embed-core/playwright/fixtures/fixtures.ts @@ -9,13 +9,29 @@ export const test = base.extend({ 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({ 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({ 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); }, diff --git a/packages/embeds/embed-core/playwright/lib/testUtils.ts b/packages/embeds/embed-core/playwright/lib/testUtils.ts index 25b7fa0e71..ddc06ae350 100644 --- a/packages/embeds/embed-core/playwright/lib/testUtils.ts +++ b/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) {