1262 lines
49 KiB
JavaScript
1262 lines
49 KiB
JavaScript
import { shallowMount, mount } from "@vue/test-utils";
|
|
import baseInputButton from "./base-input-button";
|
|
|
|
describe("baseInputButton.vue", () => {
|
|
describe("general", () => {
|
|
describe("checkbox", () => {
|
|
test("isMultiSelect => baseInputButton is a checkbox", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(inputElement.attributes().type).toEqual("checkbox");
|
|
});
|
|
});
|
|
|
|
describe("radio", () => {
|
|
test("!isMultiSelect => baseInputButton is a radio button", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(inputElement.attributes().type).toEqual("radio");
|
|
});
|
|
});
|
|
|
|
// tests in here should be test.each
|
|
describe("shared", () => {
|
|
const isMultiSelectOptions = [true, false];
|
|
test.each(isMultiSelectOptions)("groupName", (isMultiSelect) => {
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
groupName: "boogly",
|
|
isMultiSelect: isMultiSelect,
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
const inputElementAttributes = inputElement.attributes();
|
|
expect(inputElementAttributes.name).toEqual("boogly");
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("mouse clicks", () => {
|
|
describe("checkbox", () => {
|
|
describe("clicked once", () => {
|
|
test("correct event and value are emitted", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "X",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Act
|
|
await wrapper.trigger("click");
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["X"]);
|
|
});
|
|
|
|
test("input is checked", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "X",
|
|
},
|
|
},
|
|
});
|
|
const input = wrapper.find("input");
|
|
|
|
// Act
|
|
await wrapper.trigger("click");
|
|
|
|
// Assert
|
|
expect(input.element.checked).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe("clicked twice", () => {
|
|
test("input is unchecked", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "X",
|
|
},
|
|
},
|
|
});
|
|
const input = wrapper.find("input");
|
|
|
|
// Act
|
|
await wrapper.trigger("click");
|
|
await wrapper.trigger("click");
|
|
|
|
// Assert
|
|
expect(input.element.checked).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe("is initially checked, click once", () => {
|
|
test("input is unchecked", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "X",
|
|
modelValue: ["X"],
|
|
},
|
|
},
|
|
});
|
|
const input = wrapper.find("input");
|
|
|
|
// Act
|
|
await wrapper.trigger("click");
|
|
|
|
// Assert
|
|
expect(input.element.checked).toBe(false);
|
|
});
|
|
|
|
test("input is unchecked", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "X",
|
|
modelValue: ["X"],
|
|
},
|
|
},
|
|
});
|
|
const input = wrapper.find("input");
|
|
|
|
// Act
|
|
await wrapper.trigger("click");
|
|
|
|
// Assert
|
|
expect(input.element.checked).toBe(false);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("radio", () => {
|
|
test("clicked => correct event and value are emitted", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
value: "X",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Act
|
|
await wrapper.trigger("mousedown.left");
|
|
await wrapper.trigger("click");
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("X");
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("events", () => {
|
|
describe("checkbox", () => {
|
|
test("change event fired from checkbox => update:modelValue is emitted with correct value", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "Hi",
|
|
},
|
|
},
|
|
});
|
|
|
|
const input = wrapper.find("input");
|
|
|
|
// Act
|
|
await input.trigger("change");
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["Hi"]);
|
|
});
|
|
|
|
test("focus and click space on a checkbox => update:modelValue is not emitted", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "Hi",
|
|
},
|
|
},
|
|
});
|
|
|
|
const input = wrapper.find("input");
|
|
|
|
// Act
|
|
await input.trigger("keypress", { key: "space" });
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()).not.toHaveProperty("update:modelValue");
|
|
});
|
|
|
|
test("focus and click enter on a checkbox => nothing should happen", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "Hi",
|
|
},
|
|
},
|
|
});
|
|
|
|
const input = wrapper.find("input");
|
|
|
|
// Act
|
|
await input.trigger("keypress", { key: "enter" });
|
|
console.log(wrapper.emitted()["update:modelValue"]);
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()["update:modelValue"]).toBe(undefined);
|
|
});
|
|
});
|
|
|
|
describe("radio", () => {
|
|
test("focus and click space on a radio button => update:modelValue is emitted with correct value", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
value: "Hi",
|
|
},
|
|
},
|
|
});
|
|
|
|
const input = wrapper.find("input");
|
|
|
|
// Act
|
|
await input.trigger("keypress", { key: "space" });
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()).toHaveProperty("update:modelValue");
|
|
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("Hi");
|
|
});
|
|
|
|
test("focus and click enter on a radio button => update:modelValue is emitted with correct value", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
value: "Hi",
|
|
},
|
|
},
|
|
});
|
|
|
|
const input = wrapper.find("input");
|
|
|
|
// Act
|
|
await input.trigger("keypress", { key: "enter" });
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()).toHaveProperty("update:modelValue");
|
|
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("Hi");
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("methods", () => {
|
|
describe("handleEventAction", () => {
|
|
describe("isMultiSelect", () => {
|
|
test("eventType === eventTypes.CLICK => do nothing", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("click", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleClick).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("eventType === eventTypes.ENTER => do nothing", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("enter", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleClick).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("eventType === eventTypes.CHANGE => call handleClick and handlePushClickEventToGACheck", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("change", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
|
|
myEvent: "test",
|
|
});
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
|
|
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("eventType === eventTypes.MOUNT => do nothing", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("mount", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleClick).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("eventType === eventTypes.SPACE => do nothing", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("space", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleClick).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("!isMultiSelect", () => {
|
|
test("eventType === eventTypes.CLICK => call correct methods", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("click", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
|
|
myEvent: "test",
|
|
});
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
|
|
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("eventType === eventTypes.ENTER => call correct methods", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("enter", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
|
|
myEvent: "test",
|
|
});
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
|
|
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("eventType === eventTypes.SPACE => call correct methods", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("space", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
|
|
myEvent: "test",
|
|
});
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
|
|
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("eventType === eventTypes.CHANGE && !selectingInitiatesLoad => call correct methods", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
selectingInitiatesLoad: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("change", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handleClick).toHaveBeenCalledWith({
|
|
myEvent: "test",
|
|
});
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("eventType === eventTypes.CHANGE && selectingInitiatesLoad => call correct methods", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
selectingInitiatesLoad: true,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.handleClick = jest.fn();
|
|
wrapper.vm.handlePushClickEventToGACheck = jest.fn();
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleEventAction("change", { myEvent: "test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({
|
|
myEvent: "test",
|
|
});
|
|
expect(wrapper.vm.handleClick).not.toHaveBeenCalled();
|
|
expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("handleSelectionChange", () => {
|
|
const isCheckbox = [
|
|
[true, ["Hi"]],
|
|
[false, "Hi"],
|
|
];
|
|
test.each(isCheckbox)(
|
|
"handleChange is called with valueToEmit",
|
|
(isMultiSelect, resultingValueToEmit) => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: isMultiSelect,
|
|
value: "Hi",
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.vm.handleChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleSelectionChange({ myEvent: "TEST" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleChange).toHaveBeenCalledWith(resultingValueToEmit);
|
|
},
|
|
);
|
|
|
|
describe("checkbox", () => {
|
|
test("modelValue is null => valueToEmit is correct value", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "Bello",
|
|
modelValue: null,
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.vm.handleChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleSelectionChange({ myEvent: "TEST" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.valueToEmit).toEqual(["Bello"]);
|
|
expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]);
|
|
});
|
|
|
|
test("modelValue is undefined => valueToEmit is correct value", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "Bello",
|
|
modelValue: undefined,
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.vm.handleChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleSelectionChange({ myEvent: "TEST" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.valueToEmit).toEqual(["Bello"]);
|
|
expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]);
|
|
});
|
|
|
|
test("modelValue is empty => valueToEmit is correct value", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "Bello",
|
|
modelValue: [],
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.vm.handleChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleSelectionChange({ myEvent: "TEST" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.valueToEmit).toEqual(["Bello"]);
|
|
expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]);
|
|
});
|
|
|
|
test("modelValue is not empty and does not contain this button's value => valueToEmit is correct value", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "Bello",
|
|
modelValue: ["Hello"],
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.vm.handleChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleSelectionChange({ myEvent: "TEST" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.valueToEmit).toEqual(["Hello", "Bello"]);
|
|
expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Hello", "Bello"]);
|
|
});
|
|
|
|
// testing when value is at start/middle/end of modelValue
|
|
const modelValues = [
|
|
[["Bello", "Hello", "Mello"]],
|
|
[["Hello", "Bello", "Mello"]],
|
|
[["Hello", "Mello", "Bello"]],
|
|
];
|
|
test.each(modelValues)(
|
|
"modelValue is not empty and does contain this button's value => valueToEmit is correct value",
|
|
(modelValue) => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "Bello",
|
|
modelValue: modelValue,
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.vm.handleChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleSelectionChange({ myEvent: "TEST" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.valueToEmit).toEqual(["Hello", "Mello"]);
|
|
expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Hello", "Mello"]);
|
|
},
|
|
);
|
|
});
|
|
|
|
describe("radio", () => {
|
|
const modelValues = [null, undefined, "Bello", "Hello"];
|
|
test.each(modelValues)(
|
|
"regardless of modelValue, set valueToEmit to correct value",
|
|
(modelValue) => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
value: "Bello",
|
|
modelValue: modelValue,
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.vm.handleChange = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handleSelectionChange({ myEvent: "TEST" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.valueToEmit).toEqual("Bello");
|
|
expect(wrapper.vm.handleChange).toHaveBeenCalledWith("Bello");
|
|
},
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("handleClick", () => {
|
|
const isCheckbox = [[true], [false]];
|
|
test.each(isCheckbox)("handleSelectionChange is also called", async (isMultiSelect) => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: isMultiSelect,
|
|
value: "Bello",
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
await wrapper.setData({ valueToEmit: "HELLO WORLD" });
|
|
|
|
// Act
|
|
wrapper.vm.handleClick({ myEvent: "Test" });
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ myEvent: "Test" });
|
|
});
|
|
|
|
test.each(isCheckbox)(
|
|
"update:modelValue is emitted with valueToEmit",
|
|
async (isMultiSelect) => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: isMultiSelect,
|
|
value: "Bello",
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.vm.handleSelectionChange = jest.fn();
|
|
await wrapper.setData({ valueToEmit: "HELLO WORLD" });
|
|
|
|
// Act
|
|
wrapper.vm.handleClick({ myEvent: "Test" });
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("HELLO WORLD");
|
|
},
|
|
);
|
|
});
|
|
|
|
describe("handlePushClickEventToGACheck", () => {
|
|
test("called from click or click-like event => call pushClickEventToGA", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({});
|
|
wrapper.vm.pushEventToGA = jest.fn();
|
|
|
|
// Act
|
|
wrapper.vm.handlePushClickEventToGACheck("click");
|
|
|
|
// Assert
|
|
expect(wrapper.vm.pushEventToGA).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
describe("called from keyboard navigation/button-question-focus-helper", () => {
|
|
test("valueToEmit is not null, is a checked radio without selectingInitiatesLoad, and the last value pushed to GA was not this input button's value => pushClickEventToGA is called", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
modelValue: "value2",
|
|
value: "value2",
|
|
selectingInitiatesLoad: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.pushEventToGA = jest.fn();
|
|
await wrapper.setData({
|
|
valueToEmit: "value2",
|
|
lastValuePushedToGa: "value1",
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.handlePushClickEventToGACheck();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isChecked).toBe(true);
|
|
expect(wrapper.find("input").attributes().type).toBe("radio");
|
|
expect(wrapper.vm.pushEventToGA).toHaveBeenCalled();
|
|
});
|
|
|
|
test("valueToEmit is not null, is a checked radio with selectingInitiatesLoad, and the last value pushed to GA was not this input button's value => pushClickEventToGA is called", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
modelValue: "value2",
|
|
value: "value2",
|
|
selectingInitiatesLoad: true,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.pushEventToGA = jest.fn();
|
|
await wrapper.setData({
|
|
valueToEmit: "value2",
|
|
lastValuePushedToGa: "value1",
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.handlePushClickEventToGACheck();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isChecked).toBe(true);
|
|
expect(wrapper.find("input").attributes().type).toBe("radio");
|
|
expect(wrapper.vm.pushEventToGA).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("valueToEmit is not null, is a checkbox that's checked, and the last value pushed to GA was not this input button's value => pushClickEventToGA is not called", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
modelValue: ["value2"],
|
|
value: "value2",
|
|
selectingInitiatesLoad: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.pushEventToGA = jest.fn();
|
|
await wrapper.setData({
|
|
valueToEmit: "value2",
|
|
lastValuePushedToGa: "value1",
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.handlePushClickEventToGACheck();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isChecked).toBe(true);
|
|
expect(wrapper.find("input").attributes().type).toBe("checkbox");
|
|
expect(wrapper.vm.pushEventToGA).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("valueToEmit is null => pushClickEventToGA not called", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
modelValue: "value2",
|
|
value: "value2",
|
|
selectingInitiatesLoad: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.pushEventToGA = jest.fn();
|
|
await wrapper.setData({
|
|
valueToEmit: null,
|
|
lastValuePushedToGa: "value1",
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.handlePushClickEventToGACheck();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isChecked).toBe(true);
|
|
expect(wrapper.find("input").attributes().type).toBe("radio");
|
|
expect(wrapper.vm.pushEventToGA).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("valueToEmit is not null, is an unchecked checkbox, and the last value pushed to GA was not this input button's value => pushClickEventToGA is not called", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
modelValue: ["value1"],
|
|
value: "value2",
|
|
selectingInitiatesLoad: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.pushEventToGA = jest.fn();
|
|
await wrapper.setData({
|
|
valueToEmit: "value2",
|
|
lastValuePushedToGa: "value1",
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.handlePushClickEventToGACheck();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isChecked).toBe(false);
|
|
expect(wrapper.find("input").attributes().type).toBe("checkbox");
|
|
expect(wrapper.vm.pushEventToGA).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("is an unchecked radio => pushClickEventToGA not called", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
modelValue: "value1",
|
|
value: "value2",
|
|
selectingInitiatesLoad: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.pushEventToGA = jest.fn();
|
|
await wrapper.setData({
|
|
valueToEmit: "value2",
|
|
lastValuePushedToGa: "value1",
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.handlePushClickEventToGACheck();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isChecked).toBe(false);
|
|
expect(wrapper.find("input").attributes().type).toBe("radio");
|
|
expect(wrapper.vm.pushEventToGA).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("lastValuePushedToGa is the same as this input button's value => pushClickEventToGA not called", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
modelValue: "value2",
|
|
value: "value2",
|
|
selectingInitiatesLoad: false,
|
|
},
|
|
},
|
|
});
|
|
wrapper.vm.pushEventToGA = jest.fn();
|
|
await wrapper.setData({
|
|
valueToEmit: "value2",
|
|
lastValuePushedToGa: "value2",
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.handlePushClickEventToGACheck();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.isChecked).toBe(true);
|
|
expect(wrapper.find("input").attributes().type).toBe("radio");
|
|
expect(wrapper.vm.pushEventToGA).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("pushClickEventToGA", () => {
|
|
test("pushEventToGA is called correctly", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
value: "Bello",
|
|
setLastValuePushedToGa: jest.fn(),
|
|
},
|
|
},
|
|
});
|
|
|
|
wrapper.setData({
|
|
GaActions: {
|
|
CLICKED: "Clicked",
|
|
},
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.pushClickEventToGA();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.pushEventToGA).toHaveBeenCalledWith(
|
|
"myPage",
|
|
"Clicked",
|
|
"Bello",
|
|
true,
|
|
undefined,
|
|
);
|
|
expect(wrapper.vm.setLastValuePushedToGa).toHaveBeenCalledWith("Bello");
|
|
});
|
|
|
|
test("pass in a value => setLastValuePushedToGa is called with value", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
setLastValuePushedToGa: jest.fn(),
|
|
},
|
|
},
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.pushClickEventToGA("hi there");
|
|
|
|
// Assert
|
|
expect(wrapper.vm.setLastValuePushedToGa).toHaveBeenCalledWith("hi there");
|
|
});
|
|
|
|
test("don't pass in a value => setLastValuePushedToGa is called with input button's value", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
value: "hello there",
|
|
setLastValuePushedToGa: jest.fn(),
|
|
},
|
|
},
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.pushClickEventToGA();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.setLastValuePushedToGa).toHaveBeenCalledWith("hello there");
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("computed", () => {
|
|
describe("isChecked", () => {
|
|
describe("checkbox", () => {
|
|
const falsyModelValues = [[], null, undefined];
|
|
test.each(falsyModelValues)(
|
|
"modelValue is falsy/empty => checkbox isn't checked",
|
|
(modelValue) => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
modelValue,
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.isChecked).toEqual(false);
|
|
expect(inputElement.element.checked).toBe(false);
|
|
},
|
|
);
|
|
|
|
test("modelValue doesn't contain this button's value => checkbox isn't checked", async () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
modelValue: ["Aaa", "Bbb", "Ccc"],
|
|
value: "Ddd",
|
|
},
|
|
},
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.isChecked).toEqual(false);
|
|
expect(inputElement.element.checked).toBe(false);
|
|
});
|
|
|
|
test("modelValue contains this button's value => checkbox is checked", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
modelValue: ["Aaa", "Bbb", "Ddd", "Ccc"],
|
|
value: "Ddd",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.isChecked).toEqual(true);
|
|
expect(inputElement.element.checked).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe("radio", () => {
|
|
const falsyModelValues = ["", null, undefined, []];
|
|
test.each(falsyModelValues)(
|
|
"modelValue is falsy/empty => radio button isn't checked",
|
|
(modelValue) => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
modelValue,
|
|
value: "Aaa",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.isChecked).toEqual(false);
|
|
expect(inputElement.element.checked).toBe(false);
|
|
},
|
|
);
|
|
|
|
test("modelValue equals this button's value => radio button is checked", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
modelValue: "Ddd",
|
|
value: "Ddd",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.isChecked).toEqual(true);
|
|
expect(inputElement.element.checked).toBe(true);
|
|
});
|
|
|
|
test("modelValue doesn't equal this button's value => radio button isn't checked", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
modelValue: "Aaa",
|
|
value: "Ddd",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.isChecked).toEqual(false);
|
|
expect(inputElement.element.checked).toBe(false);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("buttonId", () => {
|
|
test("groupName and value combo yield correct id for input button with string value", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
groupName: "my test-name",
|
|
value: "Aaa-BBB CcC",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.buttonId).toBe("my-test-name-Aaa-BBB-CcC");
|
|
expect(inputElement.attributes().id).toBe("my-test-name-Aaa-BBB-CcC");
|
|
});
|
|
|
|
test("groupName and value combo yield correct id for input button with number value", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
groupName: "my test-name",
|
|
value: 2,
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.buttonId).toBe("my-test-name-2");
|
|
expect(inputElement.attributes().id).toBe("my-test-name-2");
|
|
});
|
|
});
|
|
|
|
describe("inputType", () => {
|
|
test("isMultiSelect is true => inputType is 'checkbox'", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.inputType).toEqual("checkbox");
|
|
expect(inputElement.attributes().type).toBe("checkbox");
|
|
});
|
|
|
|
test("isMultiSelect is false => inputType is 'radio'", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const inputElement = wrapper.find("input");
|
|
expect(wrapper.vm.inputType).toEqual("radio");
|
|
expect(inputElement.attributes().type).toBe("radio");
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
function setupMocks({ mockData = {}, shouldShallowMount = true }) {
|
|
const mountMockData = {
|
|
...mockData,
|
|
propsData: {
|
|
// to get rid of some annoying warnings
|
|
groupName: "groupName",
|
|
modelValue: mockData.propsData?.isMultiSelect ? [] : "",
|
|
value: "5",
|
|
setLastValuePushedToGa: () => {},
|
|
// should override the above if they exist
|
|
...mockData.propsData,
|
|
},
|
|
};
|
|
|
|
const wrapper = shouldShallowMount
|
|
? shallowMount(baseInputButton, mountMockData)
|
|
: mount(baseInputButton, mountMockData);
|
|
|
|
wrapper.vm.pushEventToGA = jest.fn();
|
|
wrapper.vm.$route = {
|
|
query: {
|
|
fmgPage: "myPage",
|
|
},
|
|
};
|
|
wrapper.vm.GaActions = {};
|
|
|
|
return { wrapper };
|
|
}
|