mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-27 04:03:00 +02:00
1613 lines
61 KiB
TypeScript
1613 lines
61 KiB
TypeScript
|
import { mock } from "jest-mock-extended";
|
||
|
|
||
|
import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
|
||
|
|
||
|
import { EVENTS } from "../constants";
|
||
|
import { createAutofillFieldMock } from "../jest/autofill-mocks";
|
||
|
import { flushPromises } from "../jest/testing-utils";
|
||
|
import AutofillField from "../models/autofill-field";
|
||
|
import { ElementWithOpId, FormFieldElement } from "../types";
|
||
|
import {
|
||
|
AutofillOverlayElement,
|
||
|
AutofillOverlayVisibility,
|
||
|
RedirectFocusDirection,
|
||
|
} from "../utils/autofill-overlay.enum";
|
||
|
|
||
|
import { AutoFillConstants } from "./autofill-constants";
|
||
|
import AutofillOverlayContentService from "./autofill-overlay-content.service";
|
||
|
|
||
|
const defaultWindowReadyState = document.readyState;
|
||
|
const defaultDocumentVisibilityState = document.visibilityState;
|
||
|
describe("AutofillOverlayContentService", () => {
|
||
|
let autofillOverlayContentService: AutofillOverlayContentService;
|
||
|
let sendExtensionMessageSpy: jest.SpyInstance;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
autofillOverlayContentService = new AutofillOverlayContentService();
|
||
|
sendExtensionMessageSpy = jest
|
||
|
.spyOn(autofillOverlayContentService as any, "sendExtensionMessage")
|
||
|
.mockResolvedValue(undefined);
|
||
|
Object.defineProperty(document, "readyState", {
|
||
|
value: defaultWindowReadyState,
|
||
|
writable: true,
|
||
|
});
|
||
|
Object.defineProperty(document, "visibilityState", {
|
||
|
value: defaultDocumentVisibilityState,
|
||
|
writable: true,
|
||
|
});
|
||
|
Object.defineProperty(document, "activeElement", {
|
||
|
value: null,
|
||
|
writable: true,
|
||
|
});
|
||
|
Object.defineProperty(window, "innerHeight", {
|
||
|
value: 1080,
|
||
|
writable: true,
|
||
|
});
|
||
|
});
|
||
|
|
||
|
afterEach(() => {
|
||
|
jest.clearAllMocks();
|
||
|
});
|
||
|
|
||
|
describe("init", () => {
|
||
|
let setupGlobalEventListenersSpy: jest.SpyInstance;
|
||
|
let setupMutationObserverSpy: jest.SpyInstance;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
jest.spyOn(document, "addEventListener");
|
||
|
jest.spyOn(window, "addEventListener");
|
||
|
setupGlobalEventListenersSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"setupGlobalEventListeners"
|
||
|
);
|
||
|
setupMutationObserverSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"setupMutationObserver"
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("sets up a DOMContentLoaded event listener that triggers setting up the mutation observers", () => {
|
||
|
Object.defineProperty(document, "readyState", {
|
||
|
value: "loading",
|
||
|
writable: true,
|
||
|
});
|
||
|
|
||
|
autofillOverlayContentService.init();
|
||
|
|
||
|
expect(document.addEventListener).toHaveBeenCalledWith(
|
||
|
"DOMContentLoaded",
|
||
|
setupGlobalEventListenersSpy
|
||
|
);
|
||
|
expect(setupGlobalEventListenersSpy).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("sets up a visibility change listener for the DOM", () => {
|
||
|
const handleVisibilityChangeEventSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"handleVisibilityChangeEvent"
|
||
|
);
|
||
|
|
||
|
autofillOverlayContentService.init();
|
||
|
|
||
|
expect(document.addEventListener).toHaveBeenCalledWith(
|
||
|
"visibilitychange",
|
||
|
handleVisibilityChangeEventSpy
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("sets up a focus out listener for the window", () => {
|
||
|
const handleFormFieldBlurEventSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"handleFormFieldBlurEvent"
|
||
|
);
|
||
|
|
||
|
autofillOverlayContentService.init();
|
||
|
|
||
|
expect(window.addEventListener).toHaveBeenCalledWith("focusout", handleFormFieldBlurEventSpy);
|
||
|
});
|
||
|
|
||
|
it("sets up mutation observers for the body and html element", () => {
|
||
|
jest
|
||
|
.spyOn(globalThis, "MutationObserver")
|
||
|
.mockImplementation(() => mock<MutationObserver>({ observe: jest.fn() }));
|
||
|
const handleOverlayElementMutationObserverUpdateSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"handleOverlayElementMutationObserverUpdate"
|
||
|
);
|
||
|
const handleBodyElementMutationObserverUpdateSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"handleBodyElementMutationObserverUpdate"
|
||
|
);
|
||
|
const handleDocumentElementMutationObserverUpdateSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"handleDocumentElementMutationObserverUpdate"
|
||
|
);
|
||
|
|
||
|
autofillOverlayContentService.init();
|
||
|
|
||
|
expect(setupMutationObserverSpy).toHaveBeenCalledTimes(1);
|
||
|
expect(globalThis.MutationObserver).toHaveBeenNthCalledWith(
|
||
|
1,
|
||
|
handleOverlayElementMutationObserverUpdateSpy
|
||
|
);
|
||
|
expect(globalThis.MutationObserver).toHaveBeenNthCalledWith(
|
||
|
2,
|
||
|
handleBodyElementMutationObserverUpdateSpy
|
||
|
);
|
||
|
expect(globalThis.MutationObserver).toHaveBeenNthCalledWith(
|
||
|
3,
|
||
|
handleDocumentElementMutationObserverUpdateSpy
|
||
|
);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("setupAutofillOverlayListenerOnField", () => {
|
||
|
let autofillFieldElement: ElementWithOpId<FormFieldElement>;
|
||
|
let autofillFieldData: AutofillField;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
document.body.innerHTML = `
|
||
|
<form id="validFormId">
|
||
|
<input type="text" id="username-field" placeholder="username" />
|
||
|
<input type="password" id="password-field" placeholder="password" />
|
||
|
</form>
|
||
|
`;
|
||
|
|
||
|
autofillFieldElement = document.getElementById(
|
||
|
"username-field"
|
||
|
) as ElementWithOpId<FormFieldElement>;
|
||
|
autofillFieldElement.opid = "op-1";
|
||
|
jest.spyOn(autofillFieldElement, "addEventListener");
|
||
|
autofillFieldData = createAutofillFieldMock({
|
||
|
opid: "username-field",
|
||
|
form: "validFormId",
|
||
|
placeholder: "username",
|
||
|
elementNumber: 1,
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("skips setup for ignored form fields", () => {
|
||
|
beforeEach(() => {
|
||
|
autofillFieldData = mock<AutofillField>();
|
||
|
});
|
||
|
|
||
|
it("ignores fields that are readonly", () => {
|
||
|
autofillFieldData.readonly = true;
|
||
|
|
||
|
autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("ignores fields that contain a disabled attribute", () => {
|
||
|
autofillFieldData.disabled = true;
|
||
|
|
||
|
autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("ignores fields that are not viewable", () => {
|
||
|
autofillFieldData.viewable = false;
|
||
|
|
||
|
autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("ignores fields that are part of the ExcludedAutofillTypes", () => {
|
||
|
AutoFillConstants.ExcludedAutofillTypes.forEach((excludedType) => {
|
||
|
autofillFieldData.type = excludedType;
|
||
|
|
||
|
autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it("ignores fields that contain the keyword `search`", () => {
|
||
|
autofillFieldData.placeholder = "search";
|
||
|
|
||
|
autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("ignores fields that contain the keyword `captcha` ", () => {
|
||
|
autofillFieldData.placeholder = "captcha";
|
||
|
|
||
|
autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("ignores fields that do not appear as a login field", () => {
|
||
|
autofillFieldData.placeholder = "not-a-login-field";
|
||
|
|
||
|
autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("identifies the overlay visibility setting", () => {
|
||
|
it("defaults the overlay visibility setting to `OnFieldFocus` if a value is not set", async () => {
|
||
|
sendExtensionMessageSpy.mockResolvedValueOnce(undefined);
|
||
|
autofillOverlayContentService["autofillOverlayVisibility"] = undefined;
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("getAutofillOverlayVisibility");
|
||
|
expect(autofillOverlayContentService["autofillOverlayVisibility"]).toEqual(
|
||
|
AutofillOverlayVisibility.OnFieldFocus
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("sets the overlay visibility setting to the value returned from the background script", async () => {
|
||
|
sendExtensionMessageSpy.mockResolvedValueOnce(AutofillOverlayVisibility.OnFieldFocus);
|
||
|
autofillOverlayContentService["autofillOverlayVisibility"] = undefined;
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillOverlayContentService["autofillOverlayVisibility"]).toEqual(
|
||
|
AutofillOverlayVisibility.OnFieldFocus
|
||
|
);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("sets up form field element listeners", () => {
|
||
|
it("removes all cached event listeners from the form field element", async () => {
|
||
|
jest.spyOn(autofillFieldElement, "removeEventListener");
|
||
|
const inputHandler = jest.fn();
|
||
|
const clickHandler = jest.fn();
|
||
|
const focusHandler = jest.fn();
|
||
|
autofillOverlayContentService["eventHandlersMemo"] = {
|
||
|
"op-1-username-field-input-handler": inputHandler,
|
||
|
"op-1-username-field-click-handler": clickHandler,
|
||
|
"op-1-username-field-focus-handler": focusHandler,
|
||
|
};
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
|
||
|
1,
|
||
|
"input",
|
||
|
inputHandler
|
||
|
);
|
||
|
expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
|
||
|
2,
|
||
|
"click",
|
||
|
clickHandler
|
||
|
);
|
||
|
expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
|
||
|
3,
|
||
|
"focus",
|
||
|
focusHandler
|
||
|
);
|
||
|
});
|
||
|
|
||
|
describe("form field blur event listener", () => {
|
||
|
beforeEach(async () => {
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("updates the isFieldCurrentlyFocused value to false", async () => {
|
||
|
autofillOverlayContentService["isFieldCurrentlyFocused"] = true;
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("blur"));
|
||
|
|
||
|
expect(autofillOverlayContentService["isFieldCurrentlyFocused"]).toEqual(false);
|
||
|
});
|
||
|
|
||
|
it("sends a message to the background to check if the overlay is focused", () => {
|
||
|
autofillFieldElement.dispatchEvent(new Event("blur"));
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("checkAutofillOverlayFocused");
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("form field keyup event listener", () => {
|
||
|
beforeEach(async () => {
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
jest.spyOn(globalThis.customElements, "define").mockImplementation();
|
||
|
});
|
||
|
|
||
|
it("removes the autofill overlay when the `Escape` key is pressed", () => {
|
||
|
jest.spyOn(autofillOverlayContentService as any, "removeAutofillOverlay");
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Escape" }));
|
||
|
|
||
|
expect(autofillOverlayContentService.removeAutofillOverlay).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("repositions the overlay if autofill is not currently filling when the `Enter` key is pressed", () => {
|
||
|
const handleOverlayRepositionEventSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"handleOverlayRepositionEvent"
|
||
|
);
|
||
|
autofillOverlayContentService["isCurrentlyFilling"] = false;
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
|
||
|
|
||
|
expect(handleOverlayRepositionEventSpy).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips repositioning the overlay if autofill is currently filling when the `Enter` key is pressed", () => {
|
||
|
const handleOverlayRepositionEventSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"handleOverlayRepositionEvent"
|
||
|
);
|
||
|
autofillOverlayContentService["isCurrentlyFilling"] = true;
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
|
||
|
|
||
|
expect(handleOverlayRepositionEventSpy).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("opens the overlay list and focuses it after a delay if it is not visible when the `ArrowDown` key is pressed", async () => {
|
||
|
jest.useFakeTimers();
|
||
|
const updateMostRecentlyFocusedFieldSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"updateMostRecentlyFocusedField"
|
||
|
);
|
||
|
const openAutofillOverlaySpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"openAutofillOverlay"
|
||
|
);
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = false;
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
|
||
|
await flushPromises();
|
||
|
|
||
|
expect(updateMostRecentlyFocusedFieldSpy).toHaveBeenCalledWith(autofillFieldElement);
|
||
|
expect(openAutofillOverlaySpy).toHaveBeenCalledWith({ isOpeningFullOverlay: true });
|
||
|
expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("focusAutofillOverlayList");
|
||
|
|
||
|
jest.advanceTimersByTime(150);
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayList");
|
||
|
});
|
||
|
|
||
|
it("focuses the overlay list when the `ArrowDown` key is pressed", () => {
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = true;
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayList");
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("form field input change event listener", () => {
|
||
|
beforeEach(() => {
|
||
|
jest.spyOn(globalThis.customElements, "define").mockImplementation();
|
||
|
});
|
||
|
|
||
|
it("ignores span elements that trigger the listener", async () => {
|
||
|
const spanAutofillFieldElement = document.createElement(
|
||
|
"span"
|
||
|
) as ElementWithOpId<HTMLSpanElement>;
|
||
|
jest.spyOn(autofillOverlayContentService as any, "storeModifiedFormElement");
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
spanAutofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
spanAutofillFieldElement.dispatchEvent(new Event("input"));
|
||
|
|
||
|
expect(autofillOverlayContentService["storeModifiedFormElement"]).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("stores the field as a user filled field if the form field data indicates that it is for a username", async () => {
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
autofillFieldElement.dispatchEvent(new Event("input"));
|
||
|
|
||
|
expect(autofillOverlayContentService["userFilledFields"].username).toEqual(
|
||
|
autofillFieldElement
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("stores the field as a user filled field if the form field is of type password", async () => {
|
||
|
const passwordFieldElement = document.getElementById(
|
||
|
"password-field"
|
||
|
) as ElementWithOpId<FormFieldElement>;
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
passwordFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
passwordFieldElement.dispatchEvent(new Event("input"));
|
||
|
|
||
|
expect(autofillOverlayContentService["userFilledFields"].password).toEqual(
|
||
|
passwordFieldElement
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("removes the overlay if the form field element has a value and the user is not authed", async () => {
|
||
|
jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(false);
|
||
|
const removeAutofillOverlayListSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"removeAutofillOverlayList"
|
||
|
);
|
||
|
(autofillFieldElement as HTMLInputElement).value = "test";
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
autofillFieldElement.dispatchEvent(new Event("input"));
|
||
|
|
||
|
expect(removeAutofillOverlayListSpy).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("removes the overlay if the form field element has a value and the overlay ciphers are populated", async () => {
|
||
|
jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
|
||
|
autofillOverlayContentService["isOverlayCiphersPopulated"] = true;
|
||
|
const removeAutofillOverlayListSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"removeAutofillOverlayList"
|
||
|
);
|
||
|
(autofillFieldElement as HTMLInputElement).value = "test";
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
autofillFieldElement.dispatchEvent(new Event("input"));
|
||
|
|
||
|
expect(removeAutofillOverlayListSpy).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("opens the autofill overlay if the form field is empty", async () => {
|
||
|
jest.spyOn(autofillOverlayContentService as any, "openAutofillOverlay");
|
||
|
(autofillFieldElement as HTMLInputElement).value = "";
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
autofillFieldElement.dispatchEvent(new Event("input"));
|
||
|
|
||
|
expect(autofillOverlayContentService["openAutofillOverlay"]).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("opens the autofill overlay if the form field is empty and the user is authed", async () => {
|
||
|
jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
|
||
|
jest.spyOn(autofillOverlayContentService as any, "openAutofillOverlay");
|
||
|
(autofillFieldElement as HTMLInputElement).value = "";
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
autofillFieldElement.dispatchEvent(new Event("input"));
|
||
|
|
||
|
expect(autofillOverlayContentService["openAutofillOverlay"]).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("opens the autofill overlay if the form field is empty and the overlay ciphers are not populated", async () => {
|
||
|
jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(false);
|
||
|
autofillOverlayContentService["isOverlayCiphersPopulated"] = false;
|
||
|
jest.spyOn(autofillOverlayContentService as any, "openAutofillOverlay");
|
||
|
(autofillFieldElement as HTMLInputElement).value = "";
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
autofillFieldElement.dispatchEvent(new Event("input"));
|
||
|
|
||
|
expect(autofillOverlayContentService["openAutofillOverlay"]).toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("form field click event listener", () => {
|
||
|
beforeEach(async () => {
|
||
|
jest
|
||
|
.spyOn(autofillOverlayContentService as any, "triggerFormFieldFocusedAction")
|
||
|
.mockImplementation();
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = false;
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = false;
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("triggers the field focused handler if the overlay is not visible", async () => {
|
||
|
autofillFieldElement.dispatchEvent(new Event("click"));
|
||
|
|
||
|
expect(autofillOverlayContentService["triggerFormFieldFocusedAction"]).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips triggering the field focused handler if the overlay list is visible", () => {
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = true;
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("click"));
|
||
|
|
||
|
expect(
|
||
|
autofillOverlayContentService["triggerFormFieldFocusedAction"]
|
||
|
).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips triggering the field focused handler if the overlay button is visible", () => {
|
||
|
autofillOverlayContentService["isOverlayButtonVisible"] = true;
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("click"));
|
||
|
|
||
|
expect(
|
||
|
autofillOverlayContentService["triggerFormFieldFocusedAction"]
|
||
|
).not.toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("form field focus event listener", () => {
|
||
|
let updateMostRecentlyFocusedFieldSpy: jest.SpyInstance;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
jest.spyOn(globalThis.customElements, "define").mockImplementation();
|
||
|
updateMostRecentlyFocusedFieldSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"updateMostRecentlyFocusedField"
|
||
|
);
|
||
|
autofillOverlayContentService["isCurrentlyFilling"] = false;
|
||
|
});
|
||
|
|
||
|
it("skips triggering the handler logic if autofill is currently filling", async () => {
|
||
|
autofillOverlayContentService["isCurrentlyFilling"] = true;
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
|
||
|
autofillOverlayContentService["autofillOverlayVisibility"] =
|
||
|
AutofillOverlayVisibility.OnFieldFocus;
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("focus"));
|
||
|
|
||
|
expect(updateMostRecentlyFocusedFieldSpy).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("updates the most recently focused field", async () => {
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("focus"));
|
||
|
|
||
|
expect(updateMostRecentlyFocusedFieldSpy).toHaveBeenCalledWith(autofillFieldElement);
|
||
|
expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual(
|
||
|
autofillFieldElement
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("removes the overlay list if the autofill visibility is set to onClick", async () => {
|
||
|
autofillOverlayContentService["overlayListElement"] = document.createElement("div");
|
||
|
autofillOverlayContentService["autofillOverlayVisibility"] =
|
||
|
AutofillOverlayVisibility.OnButtonClick;
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("focus"));
|
||
|
await flushPromises();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
|
||
|
overlayElement: "autofill-overlay-list",
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it("removes the overlay list if the form element has a value and the focused field is newly focused", async () => {
|
||
|
autofillOverlayContentService["overlayListElement"] = document.createElement("div");
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = document.createElement(
|
||
|
"input"
|
||
|
) as ElementWithOpId<HTMLInputElement>;
|
||
|
(autofillFieldElement as HTMLInputElement).value = "test";
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("focus"));
|
||
|
await flushPromises();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
|
||
|
overlayElement: "autofill-overlay-list",
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it("opens the autofill overlay if the form element has no value", async () => {
|
||
|
autofillOverlayContentService["overlayListElement"] = document.createElement("div");
|
||
|
(autofillFieldElement as HTMLInputElement).value = "";
|
||
|
autofillOverlayContentService["autofillOverlayVisibility"] =
|
||
|
AutofillOverlayVisibility.OnFieldFocus;
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("focus"));
|
||
|
await flushPromises();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay");
|
||
|
});
|
||
|
|
||
|
it("opens the autofill overlay if the overlay ciphers are not populated and the user is authed", async () => {
|
||
|
autofillOverlayContentService["overlayListElement"] = document.createElement("div");
|
||
|
(autofillFieldElement as HTMLInputElement).value = "";
|
||
|
autofillOverlayContentService["autofillOverlayVisibility"] =
|
||
|
AutofillOverlayVisibility.OnFieldFocus;
|
||
|
jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("focus"));
|
||
|
await flushPromises();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay");
|
||
|
});
|
||
|
|
||
|
it("updates the overlay button position if the focus event is not opening the overlay", async () => {
|
||
|
autofillOverlayContentService["autofillOverlayVisibility"] =
|
||
|
AutofillOverlayVisibility.OnFieldFocus;
|
||
|
(autofillFieldElement as HTMLInputElement).value = "test";
|
||
|
autofillOverlayContentService["isOverlayCiphersPopulated"] = true;
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
autofillFieldElement.dispatchEvent(new Event("focus"));
|
||
|
await flushPromises();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
|
||
|
overlayElement: AutofillOverlayElement.Button,
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it("triggers the form field focused handler if the current active element in the document is the passed form field", async () => {
|
||
|
const documentRoot = autofillFieldElement.getRootNode() as Document;
|
||
|
Object.defineProperty(documentRoot, "activeElement", {
|
||
|
value: autofillFieldElement,
|
||
|
writable: true,
|
||
|
});
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay");
|
||
|
expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual(
|
||
|
autofillFieldElement
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("sets the most recently focused field to the passed form field element if the value is not set", async () => {
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
|
||
|
|
||
|
await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
|
||
|
autofillFieldElement,
|
||
|
autofillFieldData
|
||
|
);
|
||
|
|
||
|
expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual(
|
||
|
autofillFieldElement
|
||
|
);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("openAutofillOverlay", () => {
|
||
|
let autofillFieldElement: ElementWithOpId<FormFieldElement>;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
document.body.innerHTML = `
|
||
|
<form id="validFormId">
|
||
|
<input type="text" id="username-field" placeholder="username" />
|
||
|
<input type="password" id="password-field" placeholder="password" />
|
||
|
</form>
|
||
|
`;
|
||
|
|
||
|
autofillFieldElement = document.getElementById(
|
||
|
"username-field"
|
||
|
) as ElementWithOpId<FormFieldElement>;
|
||
|
autofillFieldElement.opid = "op-1";
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
|
||
|
});
|
||
|
|
||
|
it("skips opening the overlay if a field has not been recently focused", () => {
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
|
||
|
|
||
|
autofillOverlayContentService["openAutofillOverlay"]();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("focuses the most recent overlay field if the field is not focused", () => {
|
||
|
jest.spyOn(autofillFieldElement, "getRootNode").mockReturnValue(document);
|
||
|
Object.defineProperty(document, "activeElement", {
|
||
|
value: document.createElement("div"),
|
||
|
writable: true,
|
||
|
});
|
||
|
const focusMostRecentOverlayFieldSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"focusMostRecentOverlayField"
|
||
|
);
|
||
|
|
||
|
autofillOverlayContentService["openAutofillOverlay"]({ isFocusingFieldElement: true });
|
||
|
|
||
|
expect(focusMostRecentOverlayFieldSpy).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips focusing the most recent overlay field if the field is already focused", () => {
|
||
|
jest.spyOn(autofillFieldElement, "getRootNode").mockReturnValue(document);
|
||
|
Object.defineProperty(document, "activeElement", {
|
||
|
value: autofillFieldElement,
|
||
|
writable: true,
|
||
|
});
|
||
|
const focusMostRecentOverlayFieldSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"focusMostRecentOverlayField"
|
||
|
);
|
||
|
|
||
|
autofillOverlayContentService["openAutofillOverlay"]({ isFocusingFieldElement: true });
|
||
|
|
||
|
expect(focusMostRecentOverlayFieldSpy).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("stores the user's auth status", () => {
|
||
|
autofillOverlayContentService["authStatus"] = undefined;
|
||
|
|
||
|
autofillOverlayContentService["openAutofillOverlay"]({
|
||
|
authStatus: AuthenticationStatus.Unlocked,
|
||
|
});
|
||
|
|
||
|
expect(autofillOverlayContentService["authStatus"]).toEqual(AuthenticationStatus.Unlocked);
|
||
|
});
|
||
|
|
||
|
it("opens both autofill overlay elements", () => {
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
|
||
|
|
||
|
autofillOverlayContentService["openAutofillOverlay"]();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
|
||
|
overlayElement: AutofillOverlayElement.Button,
|
||
|
});
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
|
||
|
overlayElement: AutofillOverlayElement.List,
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it("opens the autofill overlay button only if overlay visibility is set for onButtonClick", () => {
|
||
|
autofillOverlayContentService["autofillOverlayVisibility"] =
|
||
|
AutofillOverlayVisibility.OnButtonClick;
|
||
|
|
||
|
autofillOverlayContentService["openAutofillOverlay"]({ isOpeningFullOverlay: false });
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
|
||
|
overlayElement: AutofillOverlayElement.Button,
|
||
|
});
|
||
|
expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("updateAutofillOverlayPosition", {
|
||
|
overlayElement: AutofillOverlayElement.List,
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it("overrides the onButtonClick visibility setting to open both overlay elements", () => {
|
||
|
autofillOverlayContentService["autofillOverlayVisibility"] =
|
||
|
AutofillOverlayVisibility.OnButtonClick;
|
||
|
|
||
|
autofillOverlayContentService["openAutofillOverlay"]({ isOpeningFullOverlay: true });
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
|
||
|
overlayElement: AutofillOverlayElement.Button,
|
||
|
});
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
|
||
|
overlayElement: AutofillOverlayElement.List,
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it("sends an extension message requesting an re-collection of page details if they need to update", () => {
|
||
|
jest.spyOn(autofillOverlayContentService as any, "sendExtensionMessage");
|
||
|
autofillOverlayContentService.pageDetailsUpdateRequired = true;
|
||
|
|
||
|
autofillOverlayContentService["openAutofillOverlay"]();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("bgCollectPageDetails", {
|
||
|
sender: "autofillOverlayContentService",
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("focusMostRecentOverlayField", () => {
|
||
|
it("focuses the most recently focused overlay field", () => {
|
||
|
const mostRecentlyFocusedField = document.createElement(
|
||
|
"input"
|
||
|
) as ElementWithOpId<HTMLInputElement>;
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = mostRecentlyFocusedField;
|
||
|
jest.spyOn(mostRecentlyFocusedField, "focus");
|
||
|
|
||
|
autofillOverlayContentService["focusMostRecentOverlayField"]();
|
||
|
|
||
|
expect(mostRecentlyFocusedField.focus).toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("blurMostRecentOverlayField", () => {
|
||
|
it("removes focus from the most recently focused overlay field", () => {
|
||
|
const mostRecentlyFocusedField = document.createElement(
|
||
|
"input"
|
||
|
) as ElementWithOpId<HTMLInputElement>;
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = mostRecentlyFocusedField;
|
||
|
jest.spyOn(mostRecentlyFocusedField, "blur");
|
||
|
|
||
|
autofillOverlayContentService["blurMostRecentOverlayField"]();
|
||
|
|
||
|
expect(mostRecentlyFocusedField.blur).toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("removeAutofillOverlay", () => {
|
||
|
it("disconnects the body's mutation observer", () => {
|
||
|
const bodyMutationObserver = mock<MutationObserver>();
|
||
|
autofillOverlayContentService["bodyElementMutationObserver"] = bodyMutationObserver;
|
||
|
|
||
|
autofillOverlayContentService.removeAutofillOverlay();
|
||
|
|
||
|
expect(bodyMutationObserver.disconnect).toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("removeAutofillOverlayButton", () => {
|
||
|
beforeEach(() => {
|
||
|
document.body.innerHTML = `<div class="overlay-button"></div>`;
|
||
|
autofillOverlayContentService["overlayButtonElement"] = document.querySelector(
|
||
|
".overlay-button"
|
||
|
) as HTMLElement;
|
||
|
});
|
||
|
|
||
|
it("removes the overlay button from the DOM", () => {
|
||
|
const overlayButtonElement = document.querySelector(".overlay-button") as HTMLElement;
|
||
|
autofillOverlayContentService["isOverlayButtonVisible"] = true;
|
||
|
|
||
|
autofillOverlayContentService.removeAutofillOverlay();
|
||
|
|
||
|
expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(false);
|
||
|
expect(document.body.contains(overlayButtonElement)).toEqual(false);
|
||
|
});
|
||
|
|
||
|
it("sends a message to the background indicating that the overlay button has been closed", () => {
|
||
|
autofillOverlayContentService.removeAutofillOverlay();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
|
||
|
overlayElement: AutofillOverlayElement.Button,
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it("removes the overlay reposition event listeners", () => {
|
||
|
jest.spyOn(globalThis.document.body, "removeEventListener");
|
||
|
jest.spyOn(globalThis, "removeEventListener");
|
||
|
const handleOverlayRepositionEventSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"handleOverlayRepositionEvent"
|
||
|
);
|
||
|
|
||
|
autofillOverlayContentService.removeAutofillOverlay();
|
||
|
|
||
|
expect(globalThis.removeEventListener).toHaveBeenCalledWith(
|
||
|
EVENTS.SCROLL,
|
||
|
handleOverlayRepositionEventSpy,
|
||
|
{
|
||
|
capture: true,
|
||
|
}
|
||
|
);
|
||
|
expect(globalThis.removeEventListener).toHaveBeenCalledWith(
|
||
|
EVENTS.RESIZE,
|
||
|
handleOverlayRepositionEventSpy
|
||
|
);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("removeAutofillOverlayList", () => {
|
||
|
beforeEach(() => {
|
||
|
document.body.innerHTML = `<div class="overlay-list"></div>`;
|
||
|
autofillOverlayContentService["overlayListElement"] = document.querySelector(
|
||
|
".overlay-list"
|
||
|
) as HTMLElement;
|
||
|
});
|
||
|
|
||
|
it("removes the overlay list element from the dom", () => {
|
||
|
const overlayListElement = document.querySelector(".overlay-list") as HTMLElement;
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = true;
|
||
|
|
||
|
autofillOverlayContentService.removeAutofillOverlay();
|
||
|
|
||
|
expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(false);
|
||
|
expect(document.body.contains(overlayListElement)).toEqual(false);
|
||
|
});
|
||
|
|
||
|
it("sends a message to the extension background indicating that the overlay list has closed", () => {
|
||
|
autofillOverlayContentService.removeAutofillOverlay();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
|
||
|
overlayElement: AutofillOverlayElement.List,
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("addNewVaultItem", () => {
|
||
|
it("skips sending the message if the overlay list is not visible", () => {
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = false;
|
||
|
|
||
|
autofillOverlayContentService.addNewVaultItem();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("sends a message that facilitates adding a new vault item with empty fields", () => {
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = true;
|
||
|
|
||
|
autofillOverlayContentService.addNewVaultItem();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayAddNewVaultItem", {
|
||
|
login: {
|
||
|
username: "",
|
||
|
password: "",
|
||
|
uri: "http://localhost/",
|
||
|
hostname: "localhost",
|
||
|
},
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it("sends a message that facilitates adding a new vault item with data from user filled fields", () => {
|
||
|
document.body.innerHTML = `
|
||
|
<form id="validFormId">
|
||
|
<input type="text" id="username-field" placeholder="username" />
|
||
|
<input type="password" id="password-field" placeholder="password" />
|
||
|
</form>
|
||
|
`;
|
||
|
const usernameField = document.getElementById(
|
||
|
"username-field"
|
||
|
) as ElementWithOpId<HTMLInputElement>;
|
||
|
const passwordField = document.getElementById(
|
||
|
"password-field"
|
||
|
) as ElementWithOpId<HTMLInputElement>;
|
||
|
usernameField.value = "test-username";
|
||
|
passwordField.value = "test-password";
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = true;
|
||
|
autofillOverlayContentService["userFilledFields"] = {
|
||
|
username: usernameField,
|
||
|
password: passwordField,
|
||
|
};
|
||
|
|
||
|
autofillOverlayContentService.addNewVaultItem();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayAddNewVaultItem", {
|
||
|
login: {
|
||
|
username: "test-username",
|
||
|
password: "test-password",
|
||
|
uri: "http://localhost/",
|
||
|
hostname: "localhost",
|
||
|
},
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("redirectOverlayFocusOut", () => {
|
||
|
let autofillFieldElement: ElementWithOpId<FormFieldElement>;
|
||
|
let autofillFieldFocusSpy: jest.SpyInstance;
|
||
|
let findTabsSpy: jest.SpyInstance;
|
||
|
let previousFocusableElement: HTMLElement;
|
||
|
let nextFocusableElement: HTMLElement;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
document.body.innerHTML = `
|
||
|
<div class="previous-focusable-element" tabindex="0"></div>
|
||
|
<form id="validFormId">
|
||
|
<input type="text" id="username-field" placeholder="username" />
|
||
|
<input type="password" id="password-field" placeholder="password" />
|
||
|
</form>
|
||
|
<div class="next-focusable-element" tabindex="0"></div>
|
||
|
`;
|
||
|
autofillFieldElement = document.getElementById(
|
||
|
"username-field"
|
||
|
) as ElementWithOpId<FormFieldElement>;
|
||
|
autofillFieldElement.opid = "op-1";
|
||
|
previousFocusableElement = document.querySelector(
|
||
|
".previous-focusable-element"
|
||
|
) as HTMLElement;
|
||
|
nextFocusableElement = document.querySelector(".next-focusable-element") as HTMLElement;
|
||
|
autofillFieldFocusSpy = jest.spyOn(autofillFieldElement, "focus");
|
||
|
findTabsSpy = jest.spyOn(autofillOverlayContentService as any, "findTabs");
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = true;
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
|
||
|
autofillOverlayContentService["focusableElements"] = [
|
||
|
previousFocusableElement,
|
||
|
autofillFieldElement,
|
||
|
nextFocusableElement,
|
||
|
];
|
||
|
});
|
||
|
|
||
|
it("skips focusing an element if the overlay is not visible", () => {
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = false;
|
||
|
|
||
|
autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
|
||
|
|
||
|
expect(findTabsSpy).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips focusing an element if no recently focused field exists", () => {
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
|
||
|
|
||
|
autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
|
||
|
|
||
|
expect(findTabsSpy).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("focuses the most recently focused field if the focus direction is `Current`", () => {
|
||
|
autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Current);
|
||
|
|
||
|
expect(findTabsSpy).not.toHaveBeenCalled();
|
||
|
expect(autofillFieldFocusSpy).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("removes the overlay if the focus direction is `Current`", () => {
|
||
|
jest.useFakeTimers();
|
||
|
const removeAutofillOverlaySpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"removeAutofillOverlay"
|
||
|
);
|
||
|
|
||
|
autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Current);
|
||
|
jest.advanceTimersByTime(150);
|
||
|
|
||
|
expect(removeAutofillOverlaySpy).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("finds all focusable tabs if the focusable elements array is not populated", () => {
|
||
|
autofillOverlayContentService["focusableElements"] = [];
|
||
|
findTabsSpy.mockReturnValue([
|
||
|
previousFocusableElement,
|
||
|
autofillFieldElement,
|
||
|
nextFocusableElement,
|
||
|
]);
|
||
|
|
||
|
autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
|
||
|
|
||
|
expect(findTabsSpy).toHaveBeenCalledWith(globalThis.document.body, { getShadowRoot: true });
|
||
|
});
|
||
|
|
||
|
it("focuses the previous focusable element if the focus direction is `Previous`", () => {
|
||
|
jest.spyOn(previousFocusableElement, "focus");
|
||
|
|
||
|
autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Previous);
|
||
|
|
||
|
expect(autofillFieldFocusSpy).not.toHaveBeenCalled();
|
||
|
expect(previousFocusableElement.focus).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("focuses the next focusable element if the focus direction is `Next`", () => {
|
||
|
jest.spyOn(nextFocusableElement, "focus");
|
||
|
|
||
|
autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
|
||
|
|
||
|
expect(autofillFieldFocusSpy).not.toHaveBeenCalled();
|
||
|
expect(nextFocusableElement.focus).toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("handleOverlayRepositionEvent", () => {
|
||
|
beforeEach(() => {
|
||
|
document.body.innerHTML = `
|
||
|
<form id="validFormId">
|
||
|
<input type="text" id="username-field" placeholder="username" />
|
||
|
<input type="password" id="password-field" placeholder="password" />
|
||
|
</form>
|
||
|
`;
|
||
|
const usernameField = document.getElementById(
|
||
|
"username-field"
|
||
|
) as ElementWithOpId<HTMLInputElement>;
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = usernameField;
|
||
|
autofillOverlayContentService["setOverlayRepositionEventListeners"]();
|
||
|
autofillOverlayContentService["isOverlayButtonVisible"] = true;
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = true;
|
||
|
jest
|
||
|
.spyOn(autofillOverlayContentService as any, "recentlyFocusedFieldIsCurrentlyFocused")
|
||
|
.mockReturnValue(true);
|
||
|
});
|
||
|
|
||
|
it("skips handling the overlay reposition event if the overlay button and list elements are not visible", () => {
|
||
|
autofillOverlayContentService["isOverlayButtonVisible"] = false;
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = false;
|
||
|
|
||
|
globalThis.dispatchEvent(new Event(EVENTS.RESIZE));
|
||
|
|
||
|
expect(sendExtensionMessageSpy).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("hides the overlay elements", () => {
|
||
|
globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayHidden", {
|
||
|
display: "none",
|
||
|
});
|
||
|
expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(false);
|
||
|
expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(false);
|
||
|
});
|
||
|
|
||
|
it("clears the user interaction timeout", () => {
|
||
|
jest.useFakeTimers();
|
||
|
const clearTimeoutSpy = jest.spyOn(globalThis, "clearTimeout");
|
||
|
autofillOverlayContentService["userInteractionEventTimeout"] = setTimeout(jest.fn(), 123);
|
||
|
|
||
|
globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
|
||
|
|
||
|
expect(clearTimeoutSpy).toHaveBeenCalledWith(expect.anything());
|
||
|
});
|
||
|
|
||
|
it("removes the overlay completely if the field is not focused", () => {
|
||
|
jest.useFakeTimers();
|
||
|
jest
|
||
|
.spyOn(autofillOverlayContentService as any, "recentlyFocusedFieldIsCurrentlyFocused")
|
||
|
.mockReturnValue(false);
|
||
|
const removeAutofillOverlaySpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"removeAutofillOverlay"
|
||
|
);
|
||
|
autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
|
||
|
|
||
|
globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
|
||
|
jest.advanceTimersByTime(800);
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayHidden", {
|
||
|
display: "block",
|
||
|
});
|
||
|
expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(true);
|
||
|
expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(true);
|
||
|
expect(removeAutofillOverlaySpy).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("updates the overlay position if the most recently focused field is still within the viewport", async () => {
|
||
|
jest.useFakeTimers();
|
||
|
jest
|
||
|
.spyOn(autofillOverlayContentService as any, "updateMostRecentlyFocusedField")
|
||
|
.mockImplementation(() => {
|
||
|
autofillOverlayContentService["focusedFieldData"] = {
|
||
|
focusedFieldRects: {
|
||
|
top: 100,
|
||
|
},
|
||
|
focusedFieldStyles: {},
|
||
|
};
|
||
|
});
|
||
|
const clearUserInteractionEventTimeoutSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"clearUserInteractionEventTimeout"
|
||
|
);
|
||
|
|
||
|
globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
|
||
|
jest.advanceTimersByTime(800);
|
||
|
await flushPromises();
|
||
|
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
|
||
|
overlayElement: AutofillOverlayElement.Button,
|
||
|
});
|
||
|
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
|
||
|
overlayElement: AutofillOverlayElement.List,
|
||
|
});
|
||
|
expect(clearUserInteractionEventTimeoutSpy).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("removes the autofill overlay if the focused field is outside of the viewport", async () => {
|
||
|
jest.useFakeTimers();
|
||
|
jest
|
||
|
.spyOn(autofillOverlayContentService as any, "updateMostRecentlyFocusedField")
|
||
|
.mockImplementation(() => {
|
||
|
autofillOverlayContentService["focusedFieldData"] = {
|
||
|
focusedFieldRects: {
|
||
|
top: 4000,
|
||
|
},
|
||
|
focusedFieldStyles: {},
|
||
|
};
|
||
|
});
|
||
|
const removeAutofillOverlaySpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"removeAutofillOverlay"
|
||
|
);
|
||
|
|
||
|
globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
|
||
|
jest.advanceTimersByTime(800);
|
||
|
await flushPromises();
|
||
|
|
||
|
expect(removeAutofillOverlaySpy).toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("handleOverlayElementMutationObserverUpdate", () => {
|
||
|
let usernameField: ElementWithOpId<HTMLInputElement>;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
document.body.innerHTML = `
|
||
|
<form id="validFormId">
|
||
|
<input type="text" id="username-field" placeholder="username" />
|
||
|
<input type="password" id="password-field" placeholder="password" />
|
||
|
</form>
|
||
|
`;
|
||
|
usernameField = document.getElementById(
|
||
|
"username-field"
|
||
|
) as ElementWithOpId<HTMLInputElement>;
|
||
|
usernameField.style.setProperty("display", "block", "important");
|
||
|
jest.spyOn(usernameField, "removeAttribute");
|
||
|
jest.spyOn(usernameField.style, "setProperty");
|
||
|
jest
|
||
|
.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"isTriggeringExcessiveMutationObserverIterations"
|
||
|
)
|
||
|
.mockReturnValue(false);
|
||
|
});
|
||
|
|
||
|
it("skips handling the mutation if excessive mutation observer events are triggered", () => {
|
||
|
jest
|
||
|
.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"isTriggeringExcessiveMutationObserverIterations"
|
||
|
)
|
||
|
.mockReturnValue(true);
|
||
|
|
||
|
autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
|
||
|
mock<MutationRecord>({
|
||
|
target: usernameField,
|
||
|
}),
|
||
|
]);
|
||
|
|
||
|
expect(usernameField.removeAttribute).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips handling the mutation if the record type is not for `attributes`", () => {
|
||
|
autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
|
||
|
mock<MutationRecord>({
|
||
|
target: usernameField,
|
||
|
type: "childList",
|
||
|
}),
|
||
|
]);
|
||
|
|
||
|
expect(usernameField.removeAttribute).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("removes all element attributes that are not the style attribute", () => {
|
||
|
autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
|
||
|
mock<MutationRecord>({
|
||
|
target: usernameField,
|
||
|
type: "attributes",
|
||
|
attributeName: "placeholder",
|
||
|
}),
|
||
|
]);
|
||
|
|
||
|
expect(usernameField.removeAttribute).toHaveBeenCalledWith("placeholder");
|
||
|
});
|
||
|
|
||
|
it("removes all attached style attributes and sets the default styles", () => {
|
||
|
autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
|
||
|
mock<MutationRecord>({
|
||
|
target: usernameField,
|
||
|
type: "attributes",
|
||
|
attributeName: "style",
|
||
|
}),
|
||
|
]);
|
||
|
|
||
|
expect(usernameField.removeAttribute).toHaveBeenCalledWith("style");
|
||
|
expect(usernameField.style.setProperty).toHaveBeenCalledWith("all", "initial", "important");
|
||
|
expect(usernameField.style.setProperty).toHaveBeenCalledWith(
|
||
|
"position",
|
||
|
"fixed",
|
||
|
"important"
|
||
|
);
|
||
|
expect(usernameField.style.setProperty).toHaveBeenCalledWith("display", "block", "important");
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("handleBodyElementMutationObserverUpdate", () => {
|
||
|
let overlayButtonElement: HTMLElement;
|
||
|
let overlayListElement: HTMLElement;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
document.body.innerHTML = `
|
||
|
<div class="overlay-button"></div>
|
||
|
<div class="overlay-list"></div>
|
||
|
`;
|
||
|
overlayButtonElement = document.querySelector(".overlay-button") as HTMLElement;
|
||
|
overlayListElement = document.querySelector(".overlay-list") as HTMLElement;
|
||
|
autofillOverlayContentService["overlayButtonElement"] = overlayButtonElement;
|
||
|
autofillOverlayContentService["overlayListElement"] = overlayListElement;
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = true;
|
||
|
jest.spyOn(globalThis.document.body, "insertBefore");
|
||
|
jest
|
||
|
.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"isTriggeringExcessiveMutationObserverIterations"
|
||
|
)
|
||
|
.mockReturnValue(false);
|
||
|
});
|
||
|
|
||
|
it("skips handling the mutation if the overlay elements are not present in the DOM", () => {
|
||
|
autofillOverlayContentService["overlayButtonElement"] = undefined;
|
||
|
autofillOverlayContentService["overlayListElement"] = undefined;
|
||
|
|
||
|
autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
|
||
|
|
||
|
expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips handling the mutation if excessive mutations are being triggered", () => {
|
||
|
jest
|
||
|
.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"isTriggeringExcessiveMutationObserverIterations"
|
||
|
)
|
||
|
.mockReturnValue(true);
|
||
|
|
||
|
autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
|
||
|
|
||
|
expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips re-arranging the DOM elements if the last child of the body is the overlay list and the second to last child of the body is the overlay button", () => {
|
||
|
autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
|
||
|
|
||
|
expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips re-arranging the DOM elements if the last child is the overlay button and the overlay list is not visible", () => {
|
||
|
overlayListElement.remove();
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = false;
|
||
|
|
||
|
autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
|
||
|
|
||
|
expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("positions the overlay button before the overlay list if an element has inserted itself after the button element", () => {
|
||
|
const injectedElement = document.createElement("div");
|
||
|
document.body.insertBefore(injectedElement, overlayListElement);
|
||
|
|
||
|
autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
|
||
|
|
||
|
expect(globalThis.document.body.insertBefore).toHaveBeenCalledWith(
|
||
|
overlayButtonElement,
|
||
|
overlayListElement
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("positions the overlay button before the overlay list if the elements have inserted in incorrect order", () => {
|
||
|
document.body.appendChild(overlayButtonElement);
|
||
|
|
||
|
autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
|
||
|
|
||
|
expect(globalThis.document.body.insertBefore).toHaveBeenCalledWith(
|
||
|
overlayButtonElement,
|
||
|
overlayListElement
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it("positions the last child before the overlay button if it is not the overlay list", () => {
|
||
|
const injectedElement = document.createElement("div");
|
||
|
document.body.appendChild(injectedElement);
|
||
|
|
||
|
autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
|
||
|
|
||
|
expect(globalThis.document.body.insertBefore).toHaveBeenCalledWith(
|
||
|
injectedElement,
|
||
|
overlayButtonElement
|
||
|
);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("handleDocumentElementMutationObserverUpdate", () => {
|
||
|
let overlayButtonElement: HTMLElement;
|
||
|
let overlayListElement: HTMLElement;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
document.body.innerHTML = `
|
||
|
<div class="overlay-button"></div>
|
||
|
<div class="overlay-list"></div>
|
||
|
`;
|
||
|
document.head.innerHTML = `<title>test</title>`;
|
||
|
overlayButtonElement = document.querySelector(".overlay-button") as HTMLElement;
|
||
|
overlayListElement = document.querySelector(".overlay-list") as HTMLElement;
|
||
|
autofillOverlayContentService["overlayButtonElement"] = overlayButtonElement;
|
||
|
autofillOverlayContentService["overlayListElement"] = overlayListElement;
|
||
|
autofillOverlayContentService["isOverlayListVisible"] = true;
|
||
|
jest.spyOn(globalThis.document.body, "appendChild");
|
||
|
jest
|
||
|
.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"isTriggeringExcessiveMutationObserverIterations"
|
||
|
)
|
||
|
.mockReturnValue(false);
|
||
|
});
|
||
|
|
||
|
it("skips modification of the DOM if the overlay button and list elements are not present", () => {
|
||
|
autofillOverlayContentService["overlayButtonElement"] = undefined;
|
||
|
autofillOverlayContentService["overlayListElement"] = undefined;
|
||
|
|
||
|
autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
|
||
|
mock<MutationRecord>(),
|
||
|
]);
|
||
|
|
||
|
expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("skips modification of the DOM if excessive mutation events are being triggered", () => {
|
||
|
jest
|
||
|
.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"isTriggeringExcessiveMutationObserverIterations"
|
||
|
)
|
||
|
.mockReturnValue(true);
|
||
|
|
||
|
autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
|
||
|
mock<MutationRecord>(),
|
||
|
]);
|
||
|
|
||
|
expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("ignores the mutation record if the record is not of type `childlist`", () => {
|
||
|
autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
|
||
|
mock<MutationRecord>({
|
||
|
type: "attributes",
|
||
|
}),
|
||
|
]);
|
||
|
|
||
|
expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("ignores the mutation record if the record does not contain any added nodes", () => {
|
||
|
autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
|
||
|
mock<MutationRecord>({
|
||
|
type: "childList",
|
||
|
addedNodes: mock<NodeList>({ length: 0 }),
|
||
|
}),
|
||
|
]);
|
||
|
|
||
|
expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("ignores mutations for the document body and head", () => {
|
||
|
autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
|
||
|
{
|
||
|
type: "childList",
|
||
|
addedNodes: document.querySelectorAll("body, head"),
|
||
|
} as unknown as MutationRecord,
|
||
|
]);
|
||
|
|
||
|
expect(globalThis.document.body.appendChild).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("appends the identified node to the body", async () => {
|
||
|
jest.useFakeTimers();
|
||
|
const injectedElement = document.createElement("div");
|
||
|
injectedElement.id = "test";
|
||
|
document.documentElement.appendChild(injectedElement);
|
||
|
autofillOverlayContentService["handleDocumentElementMutationObserverUpdate"]([
|
||
|
{
|
||
|
type: "childList",
|
||
|
addedNodes: document.querySelectorAll("#test"),
|
||
|
} as unknown as MutationRecord,
|
||
|
]);
|
||
|
jest.advanceTimersByTime(10);
|
||
|
|
||
|
expect(globalThis.document.body.appendChild).toHaveBeenCalledWith(injectedElement);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("isTriggeringExcessiveMutationObserverIterations", () => {
|
||
|
it("clears any existing reset timeout", () => {
|
||
|
jest.useFakeTimers();
|
||
|
const clearTimeoutSpy = jest.spyOn(globalThis, "clearTimeout");
|
||
|
autofillOverlayContentService["mutationObserverIterationsResetTimeout"] = setTimeout(
|
||
|
jest.fn(),
|
||
|
123
|
||
|
);
|
||
|
|
||
|
autofillOverlayContentService["isTriggeringExcessiveMutationObserverIterations"]();
|
||
|
|
||
|
expect(clearTimeoutSpy).toHaveBeenCalledWith(expect.anything());
|
||
|
});
|
||
|
|
||
|
it("will reset the number of mutationObserverIterations after two seconds", () => {
|
||
|
jest.useFakeTimers();
|
||
|
autofillOverlayContentService["mutationObserverIterations"] = 10;
|
||
|
|
||
|
autofillOverlayContentService["isTriggeringExcessiveMutationObserverIterations"]();
|
||
|
jest.advanceTimersByTime(2000);
|
||
|
|
||
|
expect(autofillOverlayContentService["mutationObserverIterations"]).toEqual(0);
|
||
|
});
|
||
|
|
||
|
it("will blur the overlay field and remove the autofill overlay if excessive mutation observer iterations are triggering", async () => {
|
||
|
autofillOverlayContentService["mutationObserverIterations"] = 101;
|
||
|
const blurMostRecentOverlayFieldSpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"blurMostRecentOverlayField"
|
||
|
);
|
||
|
const removeAutofillOverlaySpy = jest.spyOn(
|
||
|
autofillOverlayContentService as any,
|
||
|
"removeAutofillOverlay"
|
||
|
);
|
||
|
|
||
|
autofillOverlayContentService["isTriggeringExcessiveMutationObserverIterations"]();
|
||
|
await flushPromises();
|
||
|
|
||
|
expect(blurMostRecentOverlayFieldSpy).toHaveBeenCalled();
|
||
|
expect(removeAutofillOverlaySpy).toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe("handleVisibilityChangeEvent", () => {
|
||
|
it("skips removing the overlay if the document is visible", () => {
|
||
|
jest.spyOn(autofillOverlayContentService as any, "removeAutofillOverlay");
|
||
|
|
||
|
autofillOverlayContentService["handleVisibilityChangeEvent"]();
|
||
|
|
||
|
expect(autofillOverlayContentService["removeAutofillOverlay"]).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it("removes the overlay if the document is not visible", () => {
|
||
|
Object.defineProperty(document, "visibilityState", {
|
||
|
value: "hidden",
|
||
|
writable: true,
|
||
|
});
|
||
|
jest.spyOn(autofillOverlayContentService as any, "removeAutofillOverlay");
|
||
|
|
||
|
autofillOverlayContentService["handleVisibilityChangeEvent"]();
|
||
|
|
||
|
expect(autofillOverlayContentService["removeAutofillOverlay"]).toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
});
|