1051 lines
40 KiB
TypeScript
1051 lines
40 KiB
TypeScript
import { EVENTS } from "../constants";
|
|
import AutofillScript, { FillScript, FillScriptActions } from "../models/autofill-script";
|
|
import { FillableFormFieldElement, FormElementWithAttribute, FormFieldElement } from "../types";
|
|
|
|
import AutofillOverlayContentService from "./autofill-overlay-content.service";
|
|
import CollectAutofillContentService from "./collect-autofill-content.service";
|
|
import DomElementVisibilityService from "./dom-element-visibility.service";
|
|
import InsertAutofillContentService from "./insert-autofill-content.service";
|
|
|
|
const mockLoginForm = `
|
|
<div id="root">
|
|
<form>
|
|
<input type="text" id="username" />
|
|
<input type="password" />
|
|
</form>
|
|
</div>
|
|
`;
|
|
|
|
const eventsToTest = [
|
|
EVENTS.CHANGE,
|
|
EVENTS.INPUT,
|
|
EVENTS.KEYDOWN,
|
|
EVENTS.KEYPRESS,
|
|
EVENTS.KEYUP,
|
|
"blur",
|
|
"click",
|
|
"focus",
|
|
"focusin",
|
|
"focusout",
|
|
"mousedown",
|
|
"paste",
|
|
"select",
|
|
"selectionchange",
|
|
"touchend",
|
|
"touchstart",
|
|
];
|
|
|
|
const initEventCount = Object.freeze(
|
|
eventsToTest.reduce(
|
|
(eventCounts, eventName) => ({
|
|
...eventCounts,
|
|
[eventName]: 0,
|
|
}),
|
|
{},
|
|
),
|
|
);
|
|
|
|
let confirmSpy: jest.SpyInstance<boolean, [message?: string]>;
|
|
let windowSpy: jest.SpyInstance<any>;
|
|
let savedURLs: string[] | null = ["https://bitwarden.com"];
|
|
function setMockWindowLocation({
|
|
protocol,
|
|
hostname,
|
|
}: {
|
|
protocol: "http:" | "https:";
|
|
hostname: string;
|
|
}) {
|
|
windowSpy.mockImplementation(() => ({
|
|
location: {
|
|
protocol,
|
|
hostname,
|
|
},
|
|
}));
|
|
}
|
|
|
|
describe("InsertAutofillContentService", () => {
|
|
const domElementVisibilityService = new DomElementVisibilityService();
|
|
const autofillOverlayContentService = new AutofillOverlayContentService();
|
|
const collectAutofillContentService = new CollectAutofillContentService(
|
|
domElementVisibilityService,
|
|
autofillOverlayContentService,
|
|
);
|
|
let insertAutofillContentService: InsertAutofillContentService;
|
|
let fillScript: AutofillScript;
|
|
|
|
beforeEach(() => {
|
|
document.body.innerHTML = mockLoginForm;
|
|
confirmSpy = jest.spyOn(window, "confirm");
|
|
windowSpy = jest.spyOn(window, "window", "get");
|
|
insertAutofillContentService = new InsertAutofillContentService(
|
|
domElementVisibilityService,
|
|
collectAutofillContentService,
|
|
);
|
|
fillScript = {
|
|
script: [
|
|
["click_on_opid", "username"],
|
|
["focus_by_opid", "username"],
|
|
["fill_by_opid", "username", "test"],
|
|
],
|
|
properties: {
|
|
delay_between_operations: 20,
|
|
},
|
|
metadata: {},
|
|
autosubmit: null,
|
|
savedUrls: ["https://bitwarden.com"],
|
|
untrustedIframe: false,
|
|
itemType: "login",
|
|
};
|
|
});
|
|
|
|
afterEach(() => {
|
|
jest.resetAllMocks();
|
|
windowSpy.mockRestore();
|
|
confirmSpy.mockRestore();
|
|
document.body.innerHTML = "";
|
|
});
|
|
|
|
describe("fillForm", () => {
|
|
it("returns early if the passed fill script does not have a script property", async () => {
|
|
fillScript.script = [];
|
|
jest.spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe");
|
|
jest.spyOn(insertAutofillContentService as any, "userCancelledInsecureUrlAutofill");
|
|
jest.spyOn(insertAutofillContentService as any, "userCancelledUntrustedIframeAutofill");
|
|
jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
|
|
|
|
await insertAutofillContentService.fillForm(fillScript);
|
|
|
|
expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).not.toHaveBeenCalled();
|
|
expect(
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"],
|
|
).not.toHaveBeenCalled();
|
|
expect(
|
|
insertAutofillContentService["userCancelledUntrustedIframeAutofill"],
|
|
).not.toHaveBeenCalled();
|
|
expect(insertAutofillContentService["runFillScriptAction"]).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("returns early if the script is filling within a sand boxed iframe", async () => {
|
|
jest
|
|
.spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe")
|
|
.mockReturnValue(true);
|
|
jest.spyOn(insertAutofillContentService as any, "userCancelledInsecureUrlAutofill");
|
|
jest.spyOn(insertAutofillContentService as any, "userCancelledUntrustedIframeAutofill");
|
|
jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
|
|
|
|
await insertAutofillContentService.fillForm(fillScript);
|
|
|
|
expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).toHaveBeenCalled();
|
|
expect(
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"],
|
|
).not.toHaveBeenCalled();
|
|
expect(
|
|
insertAutofillContentService["userCancelledUntrustedIframeAutofill"],
|
|
).not.toHaveBeenCalled();
|
|
expect(insertAutofillContentService["runFillScriptAction"]).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("returns early if the autofill is occurring on an insecure url and the user cancels the autofill", async () => {
|
|
jest
|
|
.spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe")
|
|
.mockReturnValue(false);
|
|
jest
|
|
.spyOn(insertAutofillContentService as any, "userCancelledInsecureUrlAutofill")
|
|
.mockReturnValue(true);
|
|
jest.spyOn(insertAutofillContentService as any, "userCancelledUntrustedIframeAutofill");
|
|
jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
|
|
|
|
await insertAutofillContentService.fillForm(fillScript);
|
|
|
|
expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).toHaveBeenCalled();
|
|
expect(insertAutofillContentService["userCancelledInsecureUrlAutofill"]).toHaveBeenCalled();
|
|
expect(
|
|
insertAutofillContentService["userCancelledUntrustedIframeAutofill"],
|
|
).not.toHaveBeenCalled();
|
|
expect(insertAutofillContentService["runFillScriptAction"]).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("returns early if the iframe is untrusted and the user cancelled the autofill", async () => {
|
|
jest
|
|
.spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe")
|
|
.mockReturnValue(false);
|
|
jest
|
|
.spyOn(insertAutofillContentService as any, "userCancelledInsecureUrlAutofill")
|
|
.mockReturnValue(false);
|
|
jest
|
|
.spyOn(insertAutofillContentService as any, "userCancelledUntrustedIframeAutofill")
|
|
.mockReturnValue(true);
|
|
jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
|
|
|
|
await insertAutofillContentService.fillForm(fillScript);
|
|
|
|
expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).toHaveBeenCalled();
|
|
expect(insertAutofillContentService["userCancelledInsecureUrlAutofill"]).toHaveBeenCalled();
|
|
expect(
|
|
insertAutofillContentService["userCancelledUntrustedIframeAutofill"],
|
|
).toHaveBeenCalled();
|
|
expect(insertAutofillContentService["runFillScriptAction"]).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("runs the fill script action for all scripts found within the fill script", async () => {
|
|
jest
|
|
.spyOn(insertAutofillContentService as any, "fillingWithinSandboxedIframe")
|
|
.mockReturnValue(false);
|
|
jest
|
|
.spyOn(insertAutofillContentService as any, "userCancelledInsecureUrlAutofill")
|
|
.mockReturnValue(false);
|
|
jest
|
|
.spyOn(insertAutofillContentService as any, "userCancelledUntrustedIframeAutofill")
|
|
.mockReturnValue(false);
|
|
jest.spyOn(insertAutofillContentService as any, "runFillScriptAction");
|
|
|
|
await insertAutofillContentService.fillForm(fillScript);
|
|
|
|
expect(insertAutofillContentService["fillingWithinSandboxedIframe"]).toHaveBeenCalled();
|
|
expect(insertAutofillContentService["userCancelledInsecureUrlAutofill"]).toHaveBeenCalled();
|
|
expect(
|
|
insertAutofillContentService["userCancelledUntrustedIframeAutofill"],
|
|
).toHaveBeenCalled();
|
|
expect(insertAutofillContentService["runFillScriptAction"]).toHaveBeenCalledTimes(3);
|
|
expect(insertAutofillContentService["runFillScriptAction"]).toHaveBeenNthCalledWith(
|
|
1,
|
|
fillScript.script[0],
|
|
0,
|
|
fillScript.script,
|
|
);
|
|
expect(insertAutofillContentService["runFillScriptAction"]).toHaveBeenNthCalledWith(
|
|
2,
|
|
fillScript.script[1],
|
|
1,
|
|
fillScript.script,
|
|
);
|
|
expect(insertAutofillContentService["runFillScriptAction"]).toHaveBeenNthCalledWith(
|
|
3,
|
|
fillScript.script[2],
|
|
2,
|
|
fillScript.script,
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("fillingWithinSandboxedIframe", () => {
|
|
afterEach(() => {
|
|
Object.defineProperty(globalThis, "window", {
|
|
value: { frameElement: null },
|
|
writable: true,
|
|
});
|
|
});
|
|
|
|
it("returns false if the `self.origin` value is not null", () => {
|
|
const result = insertAutofillContentService["fillingWithinSandboxedIframe"]();
|
|
|
|
expect(result).toBe(false);
|
|
expect(self.origin).not.toBeNull();
|
|
});
|
|
|
|
it("returns true if the frameElement has a sandbox attribute", () => {
|
|
Object.defineProperty(globalThis, "window", {
|
|
value: { frameElement: { hasAttribute: jest.fn(() => true) } },
|
|
writable: true,
|
|
});
|
|
|
|
const result = insertAutofillContentService["fillingWithinSandboxedIframe"]();
|
|
|
|
expect(result).toBe(true);
|
|
});
|
|
|
|
it("returns true if the window location hostname is empty", () => {
|
|
setMockWindowLocation({ protocol: "http:", hostname: "" });
|
|
|
|
const result = insertAutofillContentService["fillingWithinSandboxedIframe"]();
|
|
|
|
expect(result).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe("userCancelledInsecureUrlAutofill", () => {
|
|
const currentHostname = "bitwarden.com";
|
|
|
|
beforeEach(() => {
|
|
savedURLs = [`https://${currentHostname}`];
|
|
});
|
|
|
|
describe("returns false if Autofill occurring...", () => {
|
|
it("when there are no saved URLs", () => {
|
|
savedURLs = [];
|
|
setMockWindowLocation({ protocol: "http:", hostname: currentHostname });
|
|
|
|
const userCancelledInsecureUrlAutofill =
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"](savedURLs);
|
|
|
|
expect(userCancelledInsecureUrlAutofill).toBe(false);
|
|
|
|
savedURLs = null;
|
|
|
|
const userCancelledInsecureUrlAutofill2 =
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"](savedURLs);
|
|
|
|
expect(confirmSpy).not.toHaveBeenCalled();
|
|
expect(userCancelledInsecureUrlAutofill2).toBe(false);
|
|
});
|
|
|
|
it("on http page and saved URLs contain no https values", () => {
|
|
savedURLs = ["http://bitwarden.com"];
|
|
setMockWindowLocation({ protocol: "http:", hostname: currentHostname });
|
|
|
|
const userCancelledInsecureUrlAutofill =
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"](savedURLs);
|
|
|
|
expect(confirmSpy).not.toHaveBeenCalled();
|
|
expect(userCancelledInsecureUrlAutofill).toBe(false);
|
|
});
|
|
|
|
it("on https page with saved https URL", () => {
|
|
setMockWindowLocation({ protocol: "https:", hostname: currentHostname });
|
|
|
|
const userCancelledInsecureUrlAutofill =
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"](savedURLs);
|
|
|
|
expect(confirmSpy).not.toHaveBeenCalled();
|
|
expect(userCancelledInsecureUrlAutofill).toBe(false);
|
|
});
|
|
|
|
it("on page with no password field", () => {
|
|
setMockWindowLocation({ protocol: "https:", hostname: currentHostname });
|
|
|
|
document.body.innerHTML = `
|
|
<div id="root">
|
|
<form>
|
|
<input type="text" id="username" />
|
|
</form>
|
|
</div>
|
|
`;
|
|
|
|
const userCancelledInsecureUrlAutofill =
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"](savedURLs);
|
|
|
|
expect(confirmSpy).not.toHaveBeenCalled();
|
|
expect(userCancelledInsecureUrlAutofill).toBe(false);
|
|
});
|
|
|
|
it("on http page with saved https URL and user approval", () => {
|
|
setMockWindowLocation({ protocol: "http:", hostname: currentHostname });
|
|
confirmSpy.mockImplementation(jest.fn(() => true));
|
|
|
|
const userCancelledInsecureUrlAutofill =
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"](savedURLs);
|
|
|
|
expect(confirmSpy).toHaveBeenCalled();
|
|
expect(userCancelledInsecureUrlAutofill).toBe(false);
|
|
});
|
|
});
|
|
|
|
it("returns true if Autofill occurring on http page with saved https URL and user disapproval", () => {
|
|
setMockWindowLocation({ protocol: "http:", hostname: currentHostname });
|
|
confirmSpy.mockImplementation(jest.fn(() => false));
|
|
|
|
const userCancelledInsecureUrlAutofill =
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"](savedURLs);
|
|
|
|
expect(confirmSpy).toHaveBeenCalled();
|
|
expect(userCancelledInsecureUrlAutofill).toBe(true);
|
|
});
|
|
|
|
it("returns false if the vault item contains uris with both secure and insecure uris, but a insecure uri is being used on a insecure web page", () => {
|
|
setMockWindowLocation({ protocol: "http:", hostname: currentHostname });
|
|
savedURLs = ["http://bitwarden.com", "https://some-other-uri.com"];
|
|
|
|
const userCancelledInsecureUrlAutofill =
|
|
insertAutofillContentService["userCancelledInsecureUrlAutofill"](savedURLs);
|
|
|
|
expect(confirmSpy).not.toHaveBeenCalled();
|
|
expect(userCancelledInsecureUrlAutofill).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe("userCancelledUntrustedIframeAutofill", () => {
|
|
it("returns false if Autofill occurring within a trusted iframe", () => {
|
|
fillScript.untrustedIframe = false;
|
|
|
|
const result =
|
|
insertAutofillContentService["userCancelledUntrustedIframeAutofill"](fillScript);
|
|
|
|
expect(result).toBe(false);
|
|
expect(confirmSpy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("returns false if Autofill occurring within an untrusted iframe and the user approves", () => {
|
|
fillScript.untrustedIframe = true;
|
|
confirmSpy.mockImplementation(jest.fn(() => true));
|
|
|
|
const result =
|
|
insertAutofillContentService["userCancelledUntrustedIframeAutofill"](fillScript);
|
|
|
|
expect(result).toBe(false);
|
|
expect(confirmSpy).toHaveBeenCalled();
|
|
});
|
|
|
|
it("returns true if Autofill occurring within an untrusted iframe and the user disapproves", () => {
|
|
fillScript.untrustedIframe = true;
|
|
confirmSpy.mockImplementation(jest.fn(() => false));
|
|
|
|
const result =
|
|
insertAutofillContentService["userCancelledUntrustedIframeAutofill"](fillScript);
|
|
|
|
expect(result).toBe(true);
|
|
expect(confirmSpy).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("runFillScriptAction", () => {
|
|
beforeEach(() => {
|
|
jest.useFakeTimers();
|
|
});
|
|
|
|
it("returns early if no opid is provided", async () => {
|
|
const action = "fill_by_opid";
|
|
const opid = "";
|
|
const value = "value";
|
|
const scriptAction: FillScript = [action, opid, value];
|
|
jest.spyOn(insertAutofillContentService["autofillInsertActions"], action);
|
|
|
|
await insertAutofillContentService["runFillScriptAction"](scriptAction, 0);
|
|
jest.advanceTimersByTime(20);
|
|
|
|
expect(insertAutofillContentService["autofillInsertActions"][action]).not.toHaveBeenCalled();
|
|
});
|
|
|
|
describe("given a valid fill script action and opid", () => {
|
|
const fillScriptActions: FillScriptActions[] = [
|
|
"fill_by_opid",
|
|
"click_on_opid",
|
|
"focus_by_opid",
|
|
];
|
|
fillScriptActions.forEach((action) => {
|
|
it(`triggers a ${action} action`, () => {
|
|
const opid = "opid";
|
|
const value = "value";
|
|
const scriptAction: FillScript = [action, opid, value];
|
|
jest.spyOn(insertAutofillContentService["autofillInsertActions"], action);
|
|
|
|
insertAutofillContentService["runFillScriptAction"](scriptAction, 0);
|
|
jest.advanceTimersByTime(20);
|
|
|
|
expect(
|
|
insertAutofillContentService["autofillInsertActions"][action],
|
|
).toHaveBeenCalledWith({
|
|
opid,
|
|
value,
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("handleFillFieldByOpidAction", () => {
|
|
it("finds the field element by opid and inserts the value into the field", () => {
|
|
const opid = "__1";
|
|
const value = "value";
|
|
const textInput = document.querySelector('input[type="text"]') as FormElementWithAttribute;
|
|
textInput.opid = opid;
|
|
textInput.value = value;
|
|
jest.spyOn(
|
|
insertAutofillContentService["collectAutofillContentService"],
|
|
"getAutofillFieldElementByOpid",
|
|
);
|
|
jest.spyOn(insertAutofillContentService as any, "insertValueIntoField");
|
|
|
|
insertAutofillContentService["handleFillFieldByOpidAction"](opid, value);
|
|
|
|
expect(
|
|
insertAutofillContentService["collectAutofillContentService"].getAutofillFieldElementByOpid,
|
|
).toHaveBeenCalledWith(opid);
|
|
expect(insertAutofillContentService["insertValueIntoField"]).toHaveBeenCalledWith(
|
|
textInput,
|
|
value,
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("handleClickOnFieldByOpidAction", () => {
|
|
it("clicks on the elements targeted by the passed opid", () => {
|
|
const textInput = document.querySelector('input[type="text"]') as FormElementWithAttribute;
|
|
textInput.opid = "__1";
|
|
let clickEventCount = 0;
|
|
const expectedClickEventCount = 1;
|
|
const clickEventHandler: (handledEvent: Event) => void = (handledEvent) => {
|
|
const eventTarget = handledEvent.target as HTMLInputElement;
|
|
|
|
if (eventTarget.id === "username") {
|
|
clickEventCount++;
|
|
}
|
|
};
|
|
textInput.addEventListener("click", clickEventHandler);
|
|
jest.spyOn(
|
|
insertAutofillContentService["collectAutofillContentService"],
|
|
"getAutofillFieldElementByOpid",
|
|
);
|
|
jest.spyOn(insertAutofillContentService as any, "triggerClickOnElement");
|
|
|
|
insertAutofillContentService["handleClickOnFieldByOpidAction"]("__1");
|
|
|
|
expect(
|
|
insertAutofillContentService["collectAutofillContentService"].getAutofillFieldElementByOpid,
|
|
).toBeCalledWith("__1");
|
|
expect((insertAutofillContentService as any)["triggerClickOnElement"]).toHaveBeenCalledWith(
|
|
textInput,
|
|
);
|
|
expect(clickEventCount).toBe(expectedClickEventCount);
|
|
|
|
textInput.removeEventListener("click", clickEventHandler);
|
|
});
|
|
|
|
it("should not trigger click when no suitable elements can be found", () => {
|
|
const textInput = document.querySelector('input[type="text"]') as FormElementWithAttribute;
|
|
let clickEventCount = 0;
|
|
const expectedClickEventCount = 0;
|
|
const clickEventHandler: (handledEvent: Event) => void = (handledEvent) => {
|
|
const eventTarget = handledEvent.target as HTMLInputElement;
|
|
|
|
if (eventTarget.id === "username") {
|
|
clickEventCount++;
|
|
}
|
|
};
|
|
textInput.addEventListener("click", clickEventHandler);
|
|
|
|
insertAutofillContentService["handleClickOnFieldByOpidAction"]("__2");
|
|
|
|
expect(clickEventCount).toEqual(expectedClickEventCount);
|
|
|
|
textInput.removeEventListener("click", clickEventHandler);
|
|
});
|
|
});
|
|
|
|
describe("handleFocusOnFieldByOpidAction", () => {
|
|
it("simulates click and focus events on the element targeted by the passed opid", () => {
|
|
const targetInput = document.querySelector('input[type="text"]') as FormElementWithAttribute;
|
|
targetInput.opid = "__0";
|
|
const elementEventCount: { [key: string]: number } = {
|
|
...initEventCount,
|
|
};
|
|
// Testing all the relevant events to ensure downstream side-effects are firing correctly
|
|
const expectedElementEventCount: { [key: string]: number } = {
|
|
...initEventCount,
|
|
click: 1,
|
|
focus: 1,
|
|
focusin: 1,
|
|
};
|
|
const eventHandlers: { [key: string]: EventListener } = {};
|
|
eventsToTest.forEach((eventType) => {
|
|
eventHandlers[eventType] = (handledEvent) => {
|
|
elementEventCount[handledEvent.type]++;
|
|
};
|
|
targetInput.addEventListener(eventType, eventHandlers[eventType]);
|
|
});
|
|
jest.spyOn(
|
|
insertAutofillContentService["collectAutofillContentService"],
|
|
"getAutofillFieldElementByOpid",
|
|
);
|
|
jest.spyOn(
|
|
insertAutofillContentService as any,
|
|
"simulateUserMouseClickAndFocusEventInteractions",
|
|
);
|
|
|
|
insertAutofillContentService["handleFocusOnFieldByOpidAction"]("__0");
|
|
|
|
expect(
|
|
insertAutofillContentService["collectAutofillContentService"].getAutofillFieldElementByOpid,
|
|
).toBeCalledWith("__0");
|
|
expect(
|
|
insertAutofillContentService["simulateUserMouseClickAndFocusEventInteractions"],
|
|
).toHaveBeenCalledWith(targetInput, true);
|
|
expect(elementEventCount).toEqual(expectedElementEventCount);
|
|
});
|
|
});
|
|
|
|
describe("insertValueIntoField", () => {
|
|
it("returns early if an element is not provided", () => {
|
|
const value = "test";
|
|
const element: FormFieldElement | null = null;
|
|
jest.spyOn(insertAutofillContentService as any, "handleInsertValueAndTriggerSimulatedEvents");
|
|
|
|
insertAutofillContentService["insertValueIntoField"](element, value);
|
|
|
|
expect(
|
|
insertAutofillContentService["handleInsertValueAndTriggerSimulatedEvents"],
|
|
).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("returns early if a value is not provided", () => {
|
|
const value = "";
|
|
const element: FormFieldElement | null = document.querySelector('input[type="text"]');
|
|
jest.spyOn(insertAutofillContentService as any, "handleInsertValueAndTriggerSimulatedEvents");
|
|
|
|
insertAutofillContentService["insertValueIntoField"](element, value);
|
|
|
|
expect(
|
|
insertAutofillContentService["handleInsertValueAndTriggerSimulatedEvents"],
|
|
).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("will set the inner text of the element if a span element is passed", () => {
|
|
document.body.innerHTML = `<span id="username"></span>`;
|
|
const value = "test";
|
|
const element = document.getElementById("username") as FormFieldElement;
|
|
jest.spyOn(insertAutofillContentService as any, "handleInsertValueAndTriggerSimulatedEvents");
|
|
|
|
insertAutofillContentService["insertValueIntoField"](element, value);
|
|
|
|
expect(element.innerText).toBe(value);
|
|
expect(
|
|
insertAutofillContentService["handleInsertValueAndTriggerSimulatedEvents"],
|
|
).toHaveBeenCalledWith(element, expect.any(Function));
|
|
});
|
|
|
|
it("will set the `checked` attribute of any passed checkbox or radio elements", () => {
|
|
document.body.innerHTML = `<input type="checkbox" id="checkbox" /><input type="radio" id="radio" />`;
|
|
const checkboxElement = document.getElementById("checkbox") as HTMLInputElement;
|
|
const radioElement = document.getElementById("radio") as HTMLInputElement;
|
|
jest.spyOn(insertAutofillContentService as any, "handleInsertValueAndTriggerSimulatedEvents");
|
|
|
|
const possibleValues = ["true", "y", "1", "yes", "✓"];
|
|
possibleValues.forEach((value) => {
|
|
insertAutofillContentService["insertValueIntoField"](checkboxElement, value);
|
|
insertAutofillContentService["insertValueIntoField"](radioElement, value);
|
|
|
|
expect(checkboxElement.checked).toBe(true);
|
|
expect(radioElement.checked).toBe(true);
|
|
expect(
|
|
insertAutofillContentService["handleInsertValueAndTriggerSimulatedEvents"],
|
|
).toHaveBeenCalledWith(checkboxElement, expect.any(Function));
|
|
expect(
|
|
insertAutofillContentService["handleInsertValueAndTriggerSimulatedEvents"],
|
|
).toHaveBeenCalledWith(radioElement, expect.any(Function));
|
|
|
|
checkboxElement.checked = false;
|
|
radioElement.checked = false;
|
|
});
|
|
});
|
|
|
|
it("will set the `value` attribute of any passed input or textarea elements", () => {
|
|
document.body.innerHTML = `<input type="text" id="username" /><textarea id="bio"></textarea>`;
|
|
const value1 = "test";
|
|
const value2 = "test2";
|
|
const textInputElement = document.getElementById("username") as HTMLInputElement;
|
|
textInputElement.value = value1;
|
|
const textareaElement = document.getElementById("bio") as HTMLTextAreaElement;
|
|
textareaElement.value = value2;
|
|
jest.spyOn(insertAutofillContentService as any, "handleInsertValueAndTriggerSimulatedEvents");
|
|
|
|
insertAutofillContentService["insertValueIntoField"](textInputElement, value1);
|
|
|
|
expect(textInputElement.value).toBe(value1);
|
|
expect(
|
|
insertAutofillContentService["handleInsertValueAndTriggerSimulatedEvents"],
|
|
).toHaveBeenCalledWith(textInputElement, expect.any(Function));
|
|
|
|
insertAutofillContentService["insertValueIntoField"](textareaElement, value2);
|
|
|
|
expect(textareaElement.value).toBe(value2);
|
|
expect(
|
|
insertAutofillContentService["handleInsertValueAndTriggerSimulatedEvents"],
|
|
).toHaveBeenCalledWith(textareaElement, expect.any(Function));
|
|
});
|
|
});
|
|
|
|
describe("handleInsertValueAndTriggerSimulatedEvents", () => {
|
|
it("triggers pre- and post-insert events on the element while filling the value into the element", () => {
|
|
const value = "test";
|
|
const element = document.querySelector('input[type="text"]') as FormFieldElement;
|
|
jest.spyOn(insertAutofillContentService as any, "triggerPreInsertEventsOnElement");
|
|
jest.spyOn(insertAutofillContentService as any, "triggerPostInsertEventsOnElement");
|
|
jest.spyOn(insertAutofillContentService as any, "triggerFillAnimationOnElement");
|
|
const valueChangeCallback = jest.fn(
|
|
() => ((element as FillableFormFieldElement).value = value),
|
|
);
|
|
|
|
insertAutofillContentService["handleInsertValueAndTriggerSimulatedEvents"](
|
|
element,
|
|
valueChangeCallback,
|
|
);
|
|
|
|
expect(insertAutofillContentService["triggerPreInsertEventsOnElement"]).toHaveBeenCalledWith(
|
|
element,
|
|
);
|
|
expect(valueChangeCallback).toHaveBeenCalled();
|
|
expect(insertAutofillContentService["triggerPostInsertEventsOnElement"]).toHaveBeenCalledWith(
|
|
element,
|
|
);
|
|
expect(insertAutofillContentService["triggerFillAnimationOnElement"]).toHaveBeenCalledWith(
|
|
element,
|
|
);
|
|
expect((element as FillableFormFieldElement).value).toBe(value);
|
|
});
|
|
});
|
|
|
|
describe("triggerPreInsertEventsOnElement", () => {
|
|
it("triggers a simulated click and keyboard event on the element", () => {
|
|
const initialElementValue = "test";
|
|
document.body.innerHTML = `<input type="text" id="username" value="${initialElementValue}"/>`;
|
|
const element = document.getElementById("username") as FillableFormFieldElement;
|
|
jest.spyOn(
|
|
insertAutofillContentService as any,
|
|
"simulateUserMouseClickAndFocusEventInteractions",
|
|
);
|
|
jest.spyOn(insertAutofillContentService as any, "simulateUserKeyboardEventInteractions");
|
|
|
|
insertAutofillContentService["triggerPreInsertEventsOnElement"](element);
|
|
|
|
expect(
|
|
insertAutofillContentService["simulateUserMouseClickAndFocusEventInteractions"],
|
|
).toHaveBeenCalledWith(element);
|
|
expect(
|
|
insertAutofillContentService["simulateUserKeyboardEventInteractions"],
|
|
).toHaveBeenCalledWith(element);
|
|
expect(element.value).toBe(initialElementValue);
|
|
});
|
|
});
|
|
|
|
describe("triggerPostInsertEventsOnElement", () => {
|
|
it("triggers simulated event interactions and blurs the element after", () => {
|
|
const elementValue = "test";
|
|
document.body.innerHTML = `<input type="text" id="username" value="${elementValue}"/>`;
|
|
const element = document.getElementById("username") as FillableFormFieldElement;
|
|
jest.spyOn(element, "blur");
|
|
jest.spyOn(insertAutofillContentService as any, "simulateUserKeyboardEventInteractions");
|
|
jest.spyOn(insertAutofillContentService as any, "simulateInputElementChangedEvent");
|
|
|
|
insertAutofillContentService["triggerPostInsertEventsOnElement"](element);
|
|
|
|
expect(
|
|
insertAutofillContentService["simulateUserKeyboardEventInteractions"],
|
|
).toHaveBeenCalledWith(element);
|
|
expect(insertAutofillContentService["simulateInputElementChangedEvent"]).toHaveBeenCalledWith(
|
|
element,
|
|
);
|
|
expect(element.blur).toHaveBeenCalled();
|
|
expect(element.value).toBe(elementValue);
|
|
});
|
|
});
|
|
|
|
describe("triggerFillAnimationOnElement", () => {
|
|
beforeEach(() => {
|
|
jest.useFakeTimers();
|
|
jest.clearAllTimers();
|
|
});
|
|
|
|
describe("will not trigger the animation when...", () => {
|
|
it("the element is a non-hidden hidden input type", async () => {
|
|
document.body.innerHTML = mockLoginForm + '<input type="hidden" />';
|
|
const testElement = document.querySelector(
|
|
'input[type="hidden"]',
|
|
) as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
await jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).not.toHaveBeenCalled();
|
|
expect(testElement.classList.remove).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("the element is a non-hidden textarea", () => {
|
|
document.body.innerHTML = mockLoginForm + "<textarea></textarea>";
|
|
const testElement = document.querySelector("textarea") as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).not.toHaveBeenCalled();
|
|
expect(testElement.classList.remove).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("the element is a unsupported tag", () => {
|
|
document.body.innerHTML = mockLoginForm + '<div id="input-tag"></div>';
|
|
const testElement = document.querySelector("#input-tag") as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).not.toHaveBeenCalled();
|
|
expect(testElement.classList.remove).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("the element has a `visibility: hidden;` CSS rule applied to it", () => {
|
|
const testElement = document.querySelector(
|
|
'input[type="password"]',
|
|
) as FillableFormFieldElement;
|
|
testElement.style.visibility = "hidden";
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).not.toHaveBeenCalled();
|
|
expect(testElement.classList.remove).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("the element has a `display: none;` CSS rule applied to it", () => {
|
|
const testElement = document.querySelector(
|
|
'input[type="password"]',
|
|
) as FillableFormFieldElement;
|
|
testElement.style.display = "none";
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).not.toHaveBeenCalled();
|
|
expect(testElement.classList.remove).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("a parent of the element has an `opacity: 0;` CSS rule applied to it", () => {
|
|
document.body.innerHTML =
|
|
mockLoginForm + '<div style="opacity: 0;"><input type="email" /></div>';
|
|
const testElement = document.querySelector(
|
|
'input[type="email"]',
|
|
) as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).not.toHaveBeenCalled();
|
|
expect(testElement.classList.remove).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("will trigger the animation when...", () => {
|
|
it("the element is a non-hidden password field", () => {
|
|
const testElement = document.querySelector(
|
|
'input[type="password"]',
|
|
) as FillableFormFieldElement;
|
|
jest.spyOn(
|
|
insertAutofillContentService["domElementVisibilityService"],
|
|
"isElementHiddenByCss",
|
|
);
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(
|
|
insertAutofillContentService["domElementVisibilityService"].isElementHiddenByCss,
|
|
).toHaveBeenCalledWith(testElement);
|
|
expect(testElement.classList.add).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
expect(testElement.classList.remove).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
});
|
|
|
|
it("the element is a non-hidden email input", () => {
|
|
document.body.innerHTML = mockLoginForm + '<input type="email" />';
|
|
const testElement = document.querySelector(
|
|
'input[type="email"]',
|
|
) as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
expect(testElement.classList.remove).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
});
|
|
|
|
it("the element is a non-hidden text input", () => {
|
|
document.body.innerHTML = mockLoginForm + '<input type="text" />';
|
|
const testElement = document.querySelector(
|
|
'input[type="text"]',
|
|
) as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
expect(testElement.classList.remove).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
});
|
|
|
|
it("the element is a non-hidden number input", () => {
|
|
document.body.innerHTML = mockLoginForm + '<input type="number" />';
|
|
const testElement = document.querySelector(
|
|
'input[type="number"]',
|
|
) as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
expect(testElement.classList.remove).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
});
|
|
|
|
it("the element is a non-hidden tel input", () => {
|
|
document.body.innerHTML = mockLoginForm + '<input type="tel" />';
|
|
const testElement = document.querySelector('input[type="tel"]') as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
expect(testElement.classList.remove).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
});
|
|
|
|
it("the element is a non-hidden url input", () => {
|
|
document.body.innerHTML = mockLoginForm + '<input type="url" />';
|
|
const testElement = document.querySelector('input[type="url"]') as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
expect(testElement.classList.remove).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
});
|
|
|
|
it("the element is a non-hidden span", () => {
|
|
document.body.innerHTML = mockLoginForm + '<span id="input-tag"></span>';
|
|
const testElement = document.querySelector("#input-tag") as FillableFormFieldElement;
|
|
jest.spyOn(testElement.classList, "add");
|
|
jest.spyOn(testElement.classList, "remove");
|
|
|
|
insertAutofillContentService["triggerFillAnimationOnElement"](testElement);
|
|
jest.advanceTimersByTime(200);
|
|
|
|
expect(testElement.classList.add).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
expect(testElement.classList.remove).toHaveBeenCalledWith(
|
|
"com-bitwarden-browser-animated-fill",
|
|
);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("triggerClickOnElement", () => {
|
|
it("will trigger a click event on the passed element", () => {
|
|
const inputElement = document.querySelector('input[type="text"]') as HTMLElement;
|
|
jest.spyOn(inputElement, "click");
|
|
|
|
insertAutofillContentService["triggerClickOnElement"](inputElement);
|
|
|
|
expect(inputElement.click).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("triggerFocusOnElement", () => {
|
|
it("will trigger a focus event on the passed element and attempt to reset the value", () => {
|
|
const value = "test";
|
|
const inputElement = document.querySelector('input[type="text"]') as HTMLInputElement;
|
|
inputElement.value = "test";
|
|
jest.spyOn(inputElement, "focus");
|
|
jest.spyOn(window, "String");
|
|
|
|
insertAutofillContentService["triggerFocusOnElement"](inputElement, true);
|
|
|
|
expect(window.String).toHaveBeenCalledWith(value);
|
|
expect(inputElement.focus).toHaveBeenCalled();
|
|
expect(inputElement.value).toEqual(value);
|
|
});
|
|
|
|
it("will not attempt to reset the value but will still focus the element", () => {
|
|
const value = "test";
|
|
const inputElement = document.querySelector('input[type="text"]') as HTMLInputElement;
|
|
inputElement.value = "test";
|
|
jest.spyOn(inputElement, "focus");
|
|
jest.spyOn(window, "String");
|
|
|
|
insertAutofillContentService["triggerFocusOnElement"](inputElement, false);
|
|
|
|
expect(window.String).not.toHaveBeenCalledWith();
|
|
expect(inputElement.focus).toHaveBeenCalled();
|
|
expect(inputElement.value).toEqual(value);
|
|
});
|
|
});
|
|
|
|
describe("simulateUserMouseClickAndFocusEventInteractions", () => {
|
|
it("will trigger click and focus events on the passed element", () => {
|
|
const inputElement = document.querySelector('input[type="text"]') as HTMLInputElement;
|
|
jest.spyOn(insertAutofillContentService as any, "triggerClickOnElement");
|
|
jest.spyOn(insertAutofillContentService as any, "triggerFocusOnElement");
|
|
|
|
insertAutofillContentService["simulateUserMouseClickAndFocusEventInteractions"](inputElement);
|
|
|
|
expect(insertAutofillContentService["triggerClickOnElement"]).toHaveBeenCalledWith(
|
|
inputElement,
|
|
);
|
|
expect(insertAutofillContentService["triggerFocusOnElement"]).toHaveBeenCalledWith(
|
|
inputElement,
|
|
false,
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("simulateUserKeyboardEventInteractions", () => {
|
|
it("will trigger `keydown`, `keypress`, and `keyup` events on the passed element", () => {
|
|
const inputElement = document.querySelector('input[type="text"]') as HTMLInputElement;
|
|
jest.spyOn(inputElement, "dispatchEvent");
|
|
|
|
insertAutofillContentService["simulateUserKeyboardEventInteractions"](inputElement);
|
|
|
|
[EVENTS.KEYDOWN, EVENTS.KEYPRESS, EVENTS.KEYUP].forEach((eventName) => {
|
|
expect(inputElement.dispatchEvent).toHaveBeenCalledWith(
|
|
new KeyboardEvent(eventName, { bubbles: true }),
|
|
);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("simulateInputElementChangedEvent", () => {
|
|
it("will trigger `input` and `change` events on the passed element", () => {
|
|
const inputElement = document.querySelector('input[type="text"]') as HTMLInputElement;
|
|
jest.spyOn(inputElement, "dispatchEvent");
|
|
|
|
insertAutofillContentService["simulateInputElementChangedEvent"](inputElement);
|
|
|
|
[EVENTS.INPUT, EVENTS.CHANGE].forEach((eventName) => {
|
|
expect(inputElement.dispatchEvent).toHaveBeenCalledWith(
|
|
new Event(eventName, { bubbles: true }),
|
|
);
|
|
});
|
|
});
|
|
});
|
|
});
|