fix(embed-core): guard iframe ready handler (#30135)
Co-authored-by: Bandhan Majumder <bandhanmajumder16@gmail.com> Co-authored-by: Bandhan Majumder <133476557+bandhan-majumder@users.noreply.github.com>
This commit is contained in:
co-authored by
Bandhan Majumder
Bandhan Majumder
parent
b0a34f21c9
commit
6bc4529822
@@ -325,6 +325,48 @@ describe("Cal", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("__iframeReady handler", () => {
|
||||
function fireIframeReady(ns: string) {
|
||||
const errors: unknown[] = [];
|
||||
const onError = (e: ErrorEvent) => {
|
||||
errors.push(e.error);
|
||||
e.preventDefault();
|
||||
};
|
||||
window.addEventListener("error", onError);
|
||||
window.dispatchEvent(
|
||||
new CustomEvent(`CAL:${ns}:__iframeReady`, {
|
||||
detail: { type: "__iframeReady", namespace: ns, data: { isPrerendering: false } },
|
||||
})
|
||||
);
|
||||
window.removeEventListener("error", onError);
|
||||
return errors;
|
||||
}
|
||||
|
||||
it("ignores __iframeReady on an instance that has no iframe", () => {
|
||||
const instanceWithIframe = new CalClass("dup-ns", []);
|
||||
const host = document.createElement("div");
|
||||
document.body.appendChild(host);
|
||||
instanceWithIframe.api.inline({ calLink: "user/30min", elementOrSelector: host });
|
||||
const instanceWithoutIframe = new CalClass("dup-ns", []);
|
||||
|
||||
expect(fireIframeReady("dup-ns")).toEqual([]);
|
||||
expect(instanceWithIframe.iframeReady).toBe(true);
|
||||
expect(instanceWithoutIframe.iframeReady).toBeFalsy();
|
||||
});
|
||||
|
||||
it("marks the iframe ready and visible when the instance owns an iframe", () => {
|
||||
const cal = new CalClass("ready-ns", []);
|
||||
const host = document.createElement("div");
|
||||
document.body.appendChild(host);
|
||||
cal.api.inline({ calLink: "user/30min", elementOrSelector: host });
|
||||
cal.iframe!.style.visibility = "hidden";
|
||||
|
||||
expect(fireIframeReady("ready-ns")).toEqual([]);
|
||||
expect(cal.iframeReady).toBe(true);
|
||||
expect(cal.iframe!.style.visibility).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* We don't mock the createIframe method as it could update the 'this' objects which could affect the test, so we avoid mocking it
|
||||
*/
|
||||
|
||||
@@ -460,8 +460,12 @@ export class Cal {
|
||||
});
|
||||
|
||||
this.actionManager.on("__iframeReady", (e) => {
|
||||
if (!this.iframe) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.iframeReady = true;
|
||||
if (this.iframe && !e.detail.data.isPrerendering) {
|
||||
if (!e.detail.data.isPrerendering) {
|
||||
// It's a bit late to make the iframe visible here. We just needed to wait for the HTML tag of the embedded calLink to be rendered(which then informs the browser of the color-scheme)
|
||||
// TODO: Right now it would wait for embed-iframe.js bundle to be loaded as well. We can speed that up by inlining the JS that informs about color-scheme being set in the HTML.
|
||||
// But it's okay to do it here for now because the embedded calLink also keeps itself hidden till it receives `parentKnowsIframeReady` message(It has it's own reasons for that)
|
||||
|
||||
Reference in New Issue
Block a user