[PM-5189] Working through jest tests for OverlayBackground and refining repositioning delays

apps/browser/src/autofill/background/abstractions/overlay.background.ts

@@ -65,7 +65,7 @@ export type OverlayBackgroundExtensionMessage = {
   details?: AutofillPageDetails;
   isFieldCurrentlyFocused?: boolean;
   isFieldCurrentlyFilling?: boolean;
-  isInlineMenuElementVisible?: boolean;
+  isVisible?: boolean;
   subFrameData?: SubFrameOffsetData;
   focusedFieldData?: FocusedFieldData;
   styles?: Partial<CSSStyleDeclaration>;

apps/browser/src/autofill/background/overlay.background.spec.ts

@@ -1402,7 +1402,7 @@ describe("OverlayBackground", () => {
           {
             command: "updateAutofillInlineMenuElementIsVisibleStatus",
             overlayElement: AutofillOverlayElement.Button,
-            isInlineMenuElementVisible: false,
+            isVisible: false,
           },
           sender,
         );
@@ -1418,7 +1418,7 @@ describe("OverlayBackground", () => {
           {
             command: "updateAutofillInlineMenuElementIsVisibleStatus",
             overlayElement: AutofillOverlayElement.Button,
-            isInlineMenuElementVisible: false,
+            isVisible: false,
           },
           sender,
         );
@@ -1434,7 +1434,7 @@ describe("OverlayBackground", () => {
           {
             command: "updateAutofillInlineMenuElementIsVisibleStatus",
             overlayElement: AutofillOverlayElement.List,
-            isInlineMenuElementVisible: true,
+            isVisible: true,
           },
           sender,
         );

apps/browser/src/autofill/background/overlay.background.ts

@@ -722,14 +722,14 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       return;
     }
 
-    const { overlayElement, isInlineMenuElementVisible } = message;
+    const { overlayElement, isVisible } = message;
     if (overlayElement === AutofillOverlayElement.Button) {
-      this.isInlineMenuButtonVisible = isInlineMenuElementVisible;
+      this.isInlineMenuButtonVisible = isVisible;
       return;
     }
 
     if (overlayElement === AutofillOverlayElement.List) {
-      this.isInlineMenuListVisible = isInlineMenuElementVisible;
+      this.isInlineMenuListVisible = isVisible;
     }
   }
 

apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts

@@ -108,7 +108,17 @@ describe("AutofillInlineMenuContentService", () => {
     });
 
     describe("appendAutofillInlineMenuToDom message handler", () => {
+      let isInlineMenuButtonVisibleSpy: jest.SpyInstance;
+      let isInlineMenuListVisibleSpy: jest.SpyInstance;
+
       beforeEach(() => {
+        isInlineMenuButtonVisibleSpy = jest
+          .spyOn(autofillInlineMenuContentService as any, "isInlineMenuButtonVisible")
+          .mockResolvedValue(true);
+        isInlineMenuListVisibleSpy = jest
+          .spyOn(autofillInlineMenuContentService as any, "isInlineMenuListVisible")
+          .mockResolvedValue(true);
+        jest.spyOn(globalThis.document.body, "appendChild");
         observeBodyMutationsSpy.mockImplementation();
       });
 
@@ -123,6 +133,27 @@ describe("AutofillInlineMenuContentService", () => {
 
           expect(autofillInlineMenuContentService["buttonElement"]).toBeInstanceOf(HTMLDivElement);
         });
+
+        it("appends the inline menu button to the DOM if the button is not visible", async () => {
+          isInlineMenuButtonVisibleSpy.mockResolvedValue(false);
+
+          sendMockExtensionMessage({
+            command: "appendAutofillInlineMenuToDom",
+            overlayElement: AutofillOverlayElement.Button,
+          });
+          await flushPromises();
+
+          expect(globalThis.document.body.appendChild).toHaveBeenCalledWith(
+            autofillInlineMenuContentService["buttonElement"],
+          );
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith(
+            "updateAutofillInlineMenuElementIsVisibleStatus",
+            {
+              overlayElement: AutofillOverlayElement.Button,
+              isVisible: true,
+            },
+          );
+        });
       });
 
       describe("creating the inline menu list", () => {
@@ -136,6 +167,27 @@ describe("AutofillInlineMenuContentService", () => {
 
           expect(autofillInlineMenuContentService["listElement"]).toBeInstanceOf(HTMLDivElement);
         });
+
+        it("appends the inline menu list to the DOM if the button is not visible", async () => {
+          isInlineMenuListVisibleSpy.mockResolvedValue(false);
+
+          sendMockExtensionMessage({
+            command: "appendAutofillInlineMenuToDom",
+            overlayElement: AutofillOverlayElement.List,
+          });
+          await flushPromises();
+
+          expect(globalThis.document.body.appendChild).toHaveBeenCalledWith(
+            autofillInlineMenuContentService["listElement"],
+          );
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith(
+            "updateAutofillInlineMenuElementIsVisibleStatus",
+            {
+              overlayElement: AutofillOverlayElement.List,
+              isVisible: true,
+            },
+          );
+        });
       });
     });
   });

apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts

@@ -170,15 +170,15 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
    * Updates the visibility status of the inline menu element within the background script.
    *
    * @param overlayElement - The inline menu element to update the visibility status for.
-   * @param isInlineMenuElementVisible - The visibility status to update the inline menu element to.
+   * @param isVisible - The visibility status to update the inline menu element to.
    */
   private updateInlineMenuElementIsVisibleStatus(
     overlayElement: AutofillOverlayElementType,
-    isInlineMenuElementVisible: boolean,
+    isVisible: boolean,
   ) {
     void this.sendExtensionMessage("updateAutofillInlineMenuElementIsVisibleStatus", {
       overlayElement,
-      isInlineMenuElementVisible,
+      isVisible,
     });
   }