[PM-5189] Implementing jest tests for AutofillInlineMenuContentService

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);
+      });
+    });
   });
 });

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);