From 3f710c5e826c8dc7a2fa396dd9b2a235f6aa05a5 Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Mon, 8 Apr 2024 15:51:03 -0500 Subject: [PATCH] [PM-5189] Adjusting AutofillOverlayPageElement jest tests --- .../src/autofill/content/autofill-init.ts | 3 + .../autofill-overlay-page-element.spec.ts | 28 ++++++++- .../shared/autofill-overlay-page-element.ts | 59 +++++++++++-------- 3 files changed, 62 insertions(+), 28 deletions(-) diff --git a/apps/browser/src/autofill/content/autofill-init.ts b/apps/browser/src/autofill/content/autofill-init.ts index 32ab9ceb0ea..6f160346742 100644 --- a/apps/browser/src/autofill/content/autofill-init.ts +++ b/apps/browser/src/autofill/content/autofill-init.ts @@ -193,6 +193,9 @@ class AutofillInit implements AutofillInitInterface { return true; }; + /** + * Clears the send collect details message timeout. + */ private clearSendCollectDetailsMessageTimeout() { if (this.sendCollectDetailsMessageTimeout) { clearTimeout(this.sendCollectDetailsMessageTimeout as number); diff --git a/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.spec.ts b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.spec.ts index ac5d14c1d2c..9b1959b5231 100644 --- a/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.spec.ts +++ b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.spec.ts @@ -1,5 +1,6 @@ import { mock } from "jest-mock-extended"; +import { flushPromises } from "../../../spec/testing-utils"; import { OverlayButtonWindowMessageHandlers } from "../../abstractions/autofill-overlay-button"; import AutofillOverlayPageElement from "./autofill-overlay-page-element"; @@ -36,12 +37,13 @@ describe("AutofillOverlayPageElement", () => { beforeEach(() => { jest.spyOn(globalThis.document.documentElement, "setAttribute"); jest.spyOn(globalThis.document, "createElement"); - jest - .spyOn(autofillOverlayPageElement as any, "initMessageConnector") - .mockResolvedValue(undefined); }); it("initializes the button overlay page", async () => { + jest + .spyOn(autofillOverlayPageElement as any, "initMessageConnector") + .mockResolvedValue(undefined); + const linkElement = await autofillOverlayPageElement["initOverlayPage"]( "button", "https://jest-testing-website.com", @@ -61,6 +63,26 @@ describe("AutofillOverlayPageElement", () => { }); }); + describe("initMessageConnector", () => { + it("initializes the message connector iframe", async () => { + const elementName = "list"; + const messageConnectorUrl = "https://jest-testing-website.com/message-connector"; + const messageConnectorIframe = document.createElement("iframe"); + jest.spyOn(messageConnectorIframe, "addEventListener"); + jest.spyOn(globalThis.document, "createElement").mockReturnValue(messageConnectorIframe); + + void autofillOverlayPageElement["initMessageConnector"](messageConnectorUrl, elementName); + messageConnectorIframe.dispatchEvent(new Event("load")); + await flushPromises(); + + expect(messageConnectorIframe.src).toEqual(messageConnectorUrl); + expect(messageConnectorIframe.addEventListener).toHaveBeenCalledWith( + "load", + expect.any(Function), + ); + }); + }); + describe("postMessageToConnector", () => { it("posts a message to the parent", () => { autofillOverlayPageElement["postMessageToConnector"]({ command: "test" }); diff --git a/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts index edcb378d7e8..d641a42d00e 100644 --- a/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts +++ b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts @@ -53,6 +53,40 @@ class AutofillOverlayPageElement extends HTMLElement { return linkElement; } + /** + * Initializes an iframe that acts as the communication bridge between + * the inline menu UI and the background script. Awaits the load event + * of the iframe before initializing the inline menu element to ensure + * messages from the inline menu are not missed. + * + * @param messageConnectorUrl - The URL of the message connector to use + * @param elementName - The name of the element, e.g. "button" or "list" + */ + private initMessageConnector(messageConnectorUrl: string, elementName: "button" | "list") { + this.messageConnectorIframe = globalThis.document.createElement("iframe"); + this.messageConnectorIframe.src = messageConnectorUrl; + this.messageConnectorIframe.style.opacity = "0"; + this.messageConnectorIframe.style.position = "absolute"; + this.messageConnectorIframe.style.width = "0"; + this.messageConnectorIframe.style.height = "0"; + this.messageConnectorIframe.style.border = "none"; + this.messageConnectorIframe.style.pointerEvents = "none"; + globalThis.document.body.appendChild(this.messageConnectorIframe); + + return new Promise((resolve) => { + this.messageConnectorIframe.addEventListener(EVENTS.LOAD, () => { + this.postMessageToConnector({ + command: `initAutofillOverlayPort`, + portName: + elementName === "list" + ? AutofillOverlayPort.ListMessageConnector + : AutofillOverlayPort.ButtonMessageConnector, + }); + resolve(); + }); + }); + } + /** * Posts a window message to the parent window. * @@ -159,31 +193,6 @@ class AutofillOverlayPageElement extends HTMLElement { private redirectOverlayFocusOutMessage(direction: string) { this.postMessageToConnector({ command: "redirectOverlayFocusOut", direction }); } - - private initMessageConnector(messageConnectorUrl: string, elementName: "button" | "list") { - this.messageConnectorIframe = globalThis.document.createElement("iframe"); - this.messageConnectorIframe.src = messageConnectorUrl; - this.messageConnectorIframe.style.opacity = "0"; - this.messageConnectorIframe.style.position = "absolute"; - this.messageConnectorIframe.style.width = "0"; - this.messageConnectorIframe.style.height = "0"; - this.messageConnectorIframe.style.border = "none"; - this.messageConnectorIframe.style.pointerEvents = "none"; - globalThis.document.body.appendChild(this.messageConnectorIframe); - - return new Promise((resolve) => { - this.messageConnectorIframe.addEventListener(EVENTS.LOAD, () => { - this.postMessageToConnector({ - command: `initAutofillOverlayPort`, - portName: - elementName === "list" - ? AutofillOverlayPort.ListMessageConnector - : AutofillOverlayPort.ButtonMessageConnector, - }); - resolve(); - }); - }); - } } export default AutofillOverlayPageElement;