bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 17:23:37 +00:00
Code Issues Releases Wiki Activity

[PM-5189] Fixing jest tests within AutofillOverlayList

Browse Source
This commit is contained in:
Cesar Gonzalez
2024-04-08 14:49:34 -05:00
parent d88c474e6f
commit 5731347925
1 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts
View File

@@ -3,7 +3,7 @@ import { mock } from "jest-mock-extended";
import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status"; import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
import { createInitAutofillOverlayListMessageMock } from "../../../spec/autofill-mocks"; import { createInitAutofillOverlayListMessageMock } from "../../../spec/autofill-mocks";
import { postWindowMessage } from "../../../spec/testing-utils"; import { flushPromises, postWindowMessage } from "../../../spec/testing-utils";
import AutofillOverlayList from "./autofill-overlay-list"; import AutofillOverlayList from "./autofill-overlay-list";
@@ -16,11 +16,20 @@ describe("AutofillOverlayList", () => {
})); }));
let autofillOverlayList: AutofillOverlayList; let autofillOverlayList: AutofillOverlayList;
let messageConnectorIframe: HTMLIFrameElement;
const portKey: string = "overlayListPortKey";
beforeEach(() => { beforeEach(() => {
document.body.innerHTML = `<autofill-overlay-list></autofill-overlay-list>`; document.body.innerHTML = `<autofill-overlay-list></autofill-overlay-list>`;
autofillOverlayList = document.querySelector("autofill-overlay-list"); autofillOverlayList = document.querySelector("autofill-overlay-list");
autofillOverlayList["messageOrigin"] = "https://localhost/"; autofillOverlayList["messageOrigin"] = "https://localhost/";
messageConnectorIframe = mock<HTMLIFrameElement>({
contentWindow: {
postMessage: jest.fn(),
},
});
autofillOverlayList["messageConnectorIframe"] = messageConnectorIframe;
jest.spyOn(autofillOverlayList as any, "initMessageConnector").mockResolvedValue(undefined);
jest.spyOn(globalThis.document, "createElement"); jest.spyOn(globalThis.document, "createElement");
jest.spyOn(globalThis.parent, "postMessage"); jest.spyOn(globalThis.parent, "postMessage");
}); });
@@ -36,6 +45,7 @@ describe("AutofillOverlayList", () => {
createInitAutofillOverlayListMessageMock({ createInitAutofillOverlayListMessageMock({
authStatus: AuthenticationStatus.Locked, authStatus: AuthenticationStatus.Locked,
cipherList: [], cipherList: [],
portKey,
}), }),
); );
}); });
@@ -50,9 +60,9 @@ describe("AutofillOverlayList", () => {
unlockButton.dispatchEvent(new Event("click")); unlockButton.dispatchEvent(new Event("click"));
expect(globalThis.parent.postMessage).toHaveBeenCalledWith( expect(messageConnectorIframe.contentWindow.postMessage).toHaveBeenCalledWith(
{ command: "unlockVault" }, { command: "unlockVault", portKey },
"https://localhost/", "*",
); );
}); });
}); });
@@ -63,6 +73,7 @@ describe("AutofillOverlayList", () => {
createInitAutofillOverlayListMessageMock({ createInitAutofillOverlayListMessageMock({
authStatus: AuthenticationStatus.Unlocked, authStatus: AuthenticationStatus.Unlocked,
ciphers: [], ciphers: [],
portKey,
}), }),
); );
}); });
@@ -77,9 +88,9 @@ describe("AutofillOverlayList", () => {
addVaultItemButton.dispatchEvent(new Event("click")); addVaultItemButton.dispatchEvent(new Event("click"));
expect(globalThis.parent.postMessage).toHaveBeenCalledWith( expect(messageConnectorIframe.contentWindow.postMessage).toHaveBeenCalledWith(
{ command: "addNewVaultItem" }, { command: "addNewVaultItem", portKey },
"https://localhost/", "*",
); );
}); });
}); });
@@ -128,7 +139,7 @@ describe("AutofillOverlayList", () => {
describe("fill cipher button event listeners", () => { describe("fill cipher button event listeners", () => {
beforeEach(() => { beforeEach(() => {
postWindowMessage(createInitAutofillOverlayListMessageMock()); postWindowMessage(createInitAutofillOverlayListMessageMock({ portKey }));
}); });
it("allows the user to fill a cipher on click", () => { it("allows the user to fill a cipher on click", () => {
@@ -137,9 +148,9 @@ describe("AutofillOverlayList", () => {
fillCipherButton.dispatchEvent(new Event("click")); fillCipherButton.dispatchEvent(new Event("click"));
expect(globalThis.parent.postMessage).toHaveBeenCalledWith( expect(messageConnectorIframe.contentWindow.postMessage).toHaveBeenCalledWith(
{ command: "fillSelectedListItem", overlayCipherId: "1" }, { command: "fillSelectedListItem", overlayCipherId: "1", portKey },
"https://localhost/", "*",
); );
}); });
@@ -216,7 +227,7 @@ describe("AutofillOverlayList", () => {
describe("view cipher button event listeners", () => { describe("view cipher button event listeners", () => {
beforeEach(() => { beforeEach(() => {
postWindowMessage(createInitAutofillOverlayListMessageMock()); postWindowMessage(createInitAutofillOverlayListMessageMock({ portKey }));
}); });
it("allows the user to view a cipher on click", () => { it("allows the user to view a cipher on click", () => {
@@ -225,9 +236,9 @@ describe("AutofillOverlayList", () => {
viewCipherButton.dispatchEvent(new Event("click")); viewCipherButton.dispatchEvent(new Event("click"));
expect(globalThis.parent.postMessage).toHaveBeenCalledWith( expect(messageConnectorIframe.contentWindow.postMessage).toHaveBeenCalledWith(
{ command: "viewSelectedCipher", overlayCipherId: "1" }, { command: "viewSelectedCipher", overlayCipherId: "1", portKey },
"https://localhost/", "*",
); );
}); });
@@ -283,12 +294,16 @@ describe("AutofillOverlayList", () => {
}); });
describe("global event listener handlers", () => { describe("global event listener handlers", () => {
beforeEach(() => {
postWindowMessage(createInitAutofillOverlayListMessageMock({ portKey }));
});
it("does not post a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is currently focused", () => { it("does not post a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is currently focused", () => {
jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true); jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true);
postWindowMessage({ command: "checkAutofillOverlayListFocused" }); postWindowMessage({ command: "checkAutofillOverlayListFocused" });
expect(globalThis.parent.postMessage).not.toHaveBeenCalled(); expect(messageConnectorIframe.contentWindow.postMessage).not.toHaveBeenCalled();
}); });
it("posts a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is not currently focused", () => { it("posts a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is not currently focused", () => {
@@ -296,9 +311,9 @@ describe("AutofillOverlayList", () => {
postWindowMessage({ command: "checkAutofillOverlayListFocused" }); postWindowMessage({ command: "checkAutofillOverlayListFocused" });
expect(globalThis.parent.postMessage).toHaveBeenCalledWith( expect(messageConnectorIframe.contentWindow.postMessage).toHaveBeenCalledWith(
{ command: "checkAutofillOverlayButtonFocused" }, { command: "checkAutofillOverlayButtonFocused", portKey },
"https://localhost/", "*",
); );
}); });
@@ -330,13 +345,14 @@ describe("AutofillOverlayList", () => {
expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("aria-modal", "true"); expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("aria-modal", "true");
}); });
it("focuses the unlock button element if the user is not authenticated", () => { it("focuses the unlock button element if the user is not authenticated", async () => {
postWindowMessage( postWindowMessage(
createInitAutofillOverlayListMessageMock({ createInitAutofillOverlayListMessageMock({
authStatus: AuthenticationStatus.Locked, authStatus: AuthenticationStatus.Locked,
cipherList: [], cipherList: [],
}), }),
); );
await flushPromises();
const unlockButton = const unlockButton =
autofillOverlayList["overlayListContainer"].querySelector("#unlock-button"); autofillOverlayList["overlayListContainer"].querySelector("#unlock-button");
jest.spyOn(unlockButton as HTMLElement, "focus"); jest.spyOn(unlockButton as HTMLElement, "focus");
@@ -346,8 +362,9 @@ describe("AutofillOverlayList", () => {
expect((unlockButton as HTMLElement).focus).toBeCalled(); expect((unlockButton as HTMLElement).focus).toBeCalled();
}); });
it("focuses the new item button element if the cipher list is empty", () => { it("focuses the new item button element if the cipher list is empty", async () => {
postWindowMessage(createInitAutofillOverlayListMessageMock({ ciphers: [] })); postWindowMessage(createInitAutofillOverlayListMessageMock({ ciphers: [] }));
await flushPromises();
const newItemButton = const newItemButton =
autofillOverlayList["overlayListContainer"].querySelector("#new-item-button"); autofillOverlayList["overlayListContainer"].querySelector("#new-item-button");
jest.spyOn(newItemButton as HTMLElement, "focus"); jest.spyOn(newItemButton as HTMLElement, "focus");
@@ -372,7 +389,7 @@ describe("AutofillOverlayList", () => {
describe("handleResizeObserver", () => { describe("handleResizeObserver", () => {
beforeEach(() => { beforeEach(() => {
postWindowMessage(createInitAutofillOverlayListMessageMock()); postWindowMessage(createInitAutofillOverlayListMessageMock({ portKey }));
}); });
it("ignores resize entries whose target is not the overlay list", () => { it("ignores resize entries whose target is not the overlay list", () => {
@@ -385,7 +402,7 @@ describe("AutofillOverlayList", () => {
autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]); autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]);
expect(globalThis.parent.postMessage).not.toHaveBeenCalled(); expect(messageConnectorIframe.contentWindow.postMessage).not.toHaveBeenCalled();
}); });
it("posts a message to update the overlay list height if the list container is resized", () => { it("posts a message to update the overlay list height if the list container is resized", () => {
@@ -398,9 +415,9 @@ describe("AutofillOverlayList", () => {
autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]); autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]);
expect(globalThis.parent.postMessage).toHaveBeenCalledWith( expect(messageConnectorIframe.contentWindow.postMessage).toHaveBeenCalledWith(
{ command: "updateAutofillOverlayListHeight", styles: { height: "300px" } }, { command: "updateAutofillOverlayListHeight", styles: { height: "300px" }, portKey },
"https://localhost/", "*",
); );
}); });
}); });