diff --git a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts index 96aba20485b..272bd36d163 100644 --- a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts +++ b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts @@ -1,6 +1,6 @@ import AutofillInit from "../../../content/autofill-init"; import { AutofillOverlayElement } from "../../../enums/autofill-overlay.enum"; -import { flushPromises, sendMockExtensionMessage } from "../../../spec/testing-utils"; +import { sendMockExtensionMessage } from "../../../spec/testing-utils"; import { AutofillInlineMenuContentService } from "./autofill-inline-menu-content.service"; @@ -8,12 +8,17 @@ describe("AutofillInlineMenuContentService", () => { let autofillInlineMenuContentService: AutofillInlineMenuContentService; let autofillInit: AutofillInit; let sendExtensionMessageSpy: jest.SpyInstance; + let observeBodyMutationsSpy: jest.SpyInstance; beforeEach(() => { - document.body.innerHTML = ""; + globalThis.document.body.innerHTML = ""; autofillInlineMenuContentService = new AutofillInlineMenuContentService(); autofillInit = new AutofillInit(null, autofillInlineMenuContentService); autofillInit.init(); + observeBodyMutationsSpy = jest.spyOn( + autofillInlineMenuContentService["bodyElementMutationObserver"] as any, + "observe", + ); sendExtensionMessageSpy = jest.spyOn( autofillInlineMenuContentService as any, "sendExtensionMessage", @@ -35,6 +40,10 @@ describe("AutofillInlineMenuContentService", () => { describe("extension message handlers", () => { describe("closeAutofillInlineMenu", () => { + beforeEach(() => { + observeBodyMutationsSpy.mockImplementation(); + }); + it("closes the inline menu button", async () => { sendMockExtensionMessage({ command: "appendAutofillInlineMenuToDom", @@ -45,14 +54,13 @@ describe("AutofillInlineMenuContentService", () => { command: "closeAutofillInlineMenu", overlayElement: AutofillOverlayElement.Button, }); - await flushPromises(); expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", { overlayElement: AutofillOverlayElement.Button, }); }); - it("closes the inline menu list", () => { + it("closes the inline menu list", async () => { sendMockExtensionMessage({ command: "appendAutofillInlineMenuToDom", overlayElement: AutofillOverlayElement.List, @@ -85,7 +93,6 @@ describe("AutofillInlineMenuContentService", () => { sendMockExtensionMessage({ command: "closeAutofillInlineMenu", }); - await flushPromises(); expect(removeBodyElementObserverSpy).toHaveBeenCalled(); expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", { @@ -97,5 +104,77 @@ describe("AutofillInlineMenuContentService", () => { }); }); }); + + describe("appendAutofillInlineMenuToDom", () => { + beforeEach(() => { + observeBodyMutationsSpy.mockImplementation(); + }); + + describe("creating the inline menu button", () => { + it("creates a `div` button element if the user browser is Firefox", () => { + autofillInlineMenuContentService["isFirefoxBrowser"] = true; + + sendMockExtensionMessage({ + command: "appendAutofillInlineMenuToDom", + overlayElement: AutofillOverlayElement.Button, + }); + + expect(autofillInlineMenuContentService["buttonElement"]).toBeInstanceOf(HTMLDivElement); + }); + }); + + describe("creating the inline menu list", () => { + it("creates a `div` list element if the user browser is Firefox", () => { + autofillInlineMenuContentService["isFirefoxBrowser"] = true; + + sendMockExtensionMessage({ + command: "appendAutofillInlineMenuToDom", + overlayElement: AutofillOverlayElement.List, + }); + + expect(autofillInlineMenuContentService["listElement"]).toBeInstanceOf(HTMLDivElement); + }); + }); + }); + + describe("toggleAutofillInlineMenuHidden", () => { + it("sets the inline elements as hidden if the elements do not exist", () => { + sendMockExtensionMessage({ + command: "toggleAutofillInlineMenuHidden", + isInlineMenuHidden: false, + }); + + expect(autofillInlineMenuContentService["isButtonVisible"]).toBe(false); + expect(autofillInlineMenuContentService["isListVisible"]).toBe(false); + }); + + it("sets the inline elements as visible", () => { + autofillInlineMenuContentService["buttonElement"] = document.createElement("div"); + autofillInlineMenuContentService["listElement"] = document.createElement("div"); + + sendMockExtensionMessage({ + command: "toggleAutofillInlineMenuHidden", + isInlineMenuHidden: false, + }); + + expect(autofillInlineMenuContentService["isButtonVisible"]).toBe(true); + expect(autofillInlineMenuContentService["isListVisible"]).toBe(true); + }); + + it("sets the inline elements as hidden", () => { + autofillInlineMenuContentService["buttonElement"] = document.createElement("div"); + autofillInlineMenuContentService["listElement"] = document.createElement("div"); + autofillInlineMenuContentService["isButtonVisible"] = true; + autofillInlineMenuContentService["isListVisible"] = true; + + sendMockExtensionMessage({ + command: "toggleAutofillInlineMenuHidden", + isInlineMenuHidden: true, + }); + + expect(autofillInlineMenuContentService["isButtonVisible"]).toBe(false); + expect(autofillInlineMenuContentService["isListVisible"]).toBe(false); + }); + }); }); }); diff --git a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts index 6bce7bdc4c7..7ff934306b7 100644 --- a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts +++ b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts @@ -193,10 +193,6 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte * to create the element if it already exists in the DOM. */ private createButton() { - if (this.buttonElement) { - return; - } - if (this.isFirefoxBrowser) { this.buttonElement = globalThis.document.createElement("div"); new AutofillInlineMenuButtonIframe(this.buttonElement); @@ -222,10 +218,6 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte * to create the element if it already exists in the DOM. */ private createList() { - if (this.listElement) { - return; - } - if (this.isFirefoxBrowser) { this.listElement = globalThis.document.createElement("div"); new AutofillInlineMenuListIframe(this.listElement);