1234 lines
47 KiB
JavaScript
1234 lines
47 KiB
JavaScript
import { shallowMount, mount } from "@vue/test-utils";
|
|
import baseInputButton from "./base-input-button";
|
|
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"
|
|
|
|
// TODO KO
|
|
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", () => {
|
|
test("clicked => correct event and value are emitted", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isMultiSelect: true,
|
|
value: "X",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Act
|
|
// await wrapper.trigger("mousedown.left");
|
|
await wrapper.trigger("click");
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
|
|
"X",
|
|
]);
|
|
});
|
|
});
|
|
|
|
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("keyboard navigation and events", () => {
|
|
describe("checkbox", () => {
|
|
test.todo("focus on a checkbox => update:modelValue is not emitted");
|
|
|
|
test.todo("blur from a checkbox => update:modelValue is not emitted");
|
|
|
|
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 => 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("keypress", { key: "enter" });
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
|
|
"Hi",
|
|
]);
|
|
});
|
|
});
|
|
|
|
describe("radio", () => {
|
|
test.todo("focus on a radio button => update:modelValue is not emitted");
|
|
|
|
test.todo("blur from a radio button => update:modelValue is not emitted");
|
|
|
|
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 => 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("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.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.todo("");
|
|
});
|
|
|
|
describe("pushClickEventToGA", () => {
|
|
test("pushEventToGA is called correctly", () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
value: "Bello",
|
|
setLastValuePushedToGa: jest.fn(),
|
|
},
|
|
},
|
|
});
|
|
|
|
console.log(wrapper.vm.$route);
|
|
|
|
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.todo("set last value pushed to GA");
|
|
});
|
|
});
|
|
|
|
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");
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("integration testing", () => {
|
|
describe("checkbox", () => {
|
|
test("click on both => both are selected", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupBaseInputButtonWrapper({
|
|
mockData: {
|
|
isMultiSelect: true,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
const buttonWrappers = wrapper.findAllComponents({
|
|
name: "baseInputButtonWrapper",
|
|
});
|
|
const inputButtonOne = buttonWrappers.at(0);
|
|
const inputButtonTwo = buttonWrappers.at(1);
|
|
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
|
|
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
|
|
expect(wrapper.vm.value).toEqual([]);
|
|
|
|
await inputButtonOne.find("input").trigger("click");
|
|
await inputButtonTwo.find("input").trigger("click");
|
|
|
|
// Assert
|
|
expect(wrapper.vm.value).toEqual(["value1", "value2"]);
|
|
});
|
|
|
|
test("click input 1, 2, 1 => only input 2 selected", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupBaseInputButtonWrapper({
|
|
mockData: {
|
|
isMultiSelect: true,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
const buttonWrappers = wrapper.findAllComponents({
|
|
name: "baseInputButtonWrapper",
|
|
});
|
|
const inputButtonOne = buttonWrappers.at(0);
|
|
const inputButtonTwo = buttonWrappers.at(1);
|
|
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
|
|
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
|
|
expect(wrapper.vm.value).toEqual([]);
|
|
|
|
await inputButtonOne.find("input").trigger("click");
|
|
await inputButtonTwo.find("input").trigger("click");
|
|
await inputButtonOne.find("input").trigger("click");
|
|
|
|
// Assert
|
|
expect(wrapper.vm.value).toEqual(["value2"]);
|
|
});
|
|
|
|
const defaultCheckedCases = [
|
|
[["value2"], false, true],
|
|
[["value1", "value2"], true, true],
|
|
[["value1"], true, false],
|
|
[[], false, false]
|
|
]
|
|
test.each(defaultCheckedCases)("initial value is %s => correct input buttons are selected", async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
|
|
// Arrange
|
|
const { wrapper } = setupBaseInputButtonWrapper({
|
|
mockData: {
|
|
isMultiSelect: true,
|
|
initialValue: modelValue
|
|
},
|
|
});
|
|
|
|
// Act
|
|
const buttonWrappers = wrapper.findAllComponents({
|
|
name: "baseInputButtonWrapper",
|
|
});
|
|
const inputs = wrapper.findAll("input");
|
|
const inputButtonOne = buttonWrappers.at(0);
|
|
const inputButtonTwo = buttonWrappers.at(1);
|
|
|
|
// Assert
|
|
expect(inputButtonOne.vm.isMultiSelect).toBe(true);
|
|
expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
|
|
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
|
|
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
|
|
expect(wrapper.vm.value).toEqual(modelValue);
|
|
});
|
|
});
|
|
|
|
describe("radio", () => {
|
|
test("click on both => last clicked is selected", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupBaseInputButtonWrapper({
|
|
mockData: {
|
|
isMultiSelect: false,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
const buttonWrappers = wrapper.findAllComponents({
|
|
name: "baseInputButtonWrapper",
|
|
});
|
|
const inputButtonOne = buttonWrappers.at(0);
|
|
const inputButtonTwo = buttonWrappers.at(1);
|
|
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
|
|
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
|
|
expect(wrapper.vm.value).toEqual("");
|
|
|
|
await inputButtonOne.find("input").trigger("click");
|
|
await inputButtonTwo.find("input").trigger("click");
|
|
|
|
// Assert
|
|
expect(wrapper.vm.value).toEqual("value2");
|
|
});
|
|
|
|
test("click input 1, 2, 1 => input 1 is selected", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupBaseInputButtonWrapper({
|
|
mockData: {
|
|
isMultiSelect: false,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
const buttonWrappers = wrapper.findAllComponents({
|
|
name: "baseInputButtonWrapper",
|
|
});
|
|
const inputButtonOne = buttonWrappers.at(0);
|
|
const inputButtonTwo = buttonWrappers.at(1);
|
|
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
|
|
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
|
|
expect(wrapper.vm.value).toEqual("");
|
|
|
|
await inputButtonOne.find("input").trigger("click");
|
|
await inputButtonTwo.find("input").trigger("click");
|
|
await inputButtonOne.find("input").trigger("click");
|
|
|
|
// Assert
|
|
expect(wrapper.vm.value).toEqual("value1");
|
|
});
|
|
|
|
const defaultCheckedCases = [
|
|
["", false, false],
|
|
["value1", true, false],
|
|
["value2", false, true],
|
|
[[], false, false]
|
|
]
|
|
test.each(defaultCheckedCases)("initial value is %s => correct input buttons are selected", async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
|
|
// Arrange
|
|
const { wrapper } = setupBaseInputButtonWrapper({
|
|
mockData: {
|
|
isMultiSelect: false,
|
|
initialValue: modelValue
|
|
},
|
|
});
|
|
|
|
// Act
|
|
const buttonWrappers = wrapper.findAllComponents({
|
|
name: "baseInputButtonWrapper",
|
|
});
|
|
const inputs = wrapper.findAll("input");
|
|
const inputButtonOne = buttonWrappers.at(0);
|
|
const inputButtonTwo = buttonWrappers.at(1);
|
|
|
|
// Assert
|
|
expect(inputButtonOne.vm.isMultiSelect).toBe(false);
|
|
expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
|
|
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
|
|
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
|
|
expect(wrapper.vm.value).toEqual(modelValue);
|
|
});
|
|
})
|
|
});
|
|
});
|
|
|
|
// TODO KO look at how I tested groups of these in SFA
|
|
// (making sure selecting one radio changes the value, etc,
|
|
// that this acts like a regular input aside from a different emitted event)
|
|
|
|
function setupMocks({ mockData = {}, shouldShallowMount = true }) {
|
|
const baseInputButtonWrapper = {
|
|
components: { baseInputButton },
|
|
template: '<baseInputButton v-model="myValue" />',
|
|
data() {
|
|
return {
|
|
myValue: "",
|
|
};
|
|
},
|
|
};
|
|
|
|
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 };
|
|
}
|
|
|
|
function setupBaseInputButtonWrapper({ mockData = {} }) {
|
|
// <<<<<<< HEAD
|
|
// const baseInputButtonWrapper = {
|
|
// name: "baseInputButtonWrapper",
|
|
// components: { baseInputButton },
|
|
// template:
|
|
// '<div><baseInputButton v-bind="$props" @update:modelValue="handleAnswerChange" />Test</div>',
|
|
// data() {
|
|
// return {
|
|
// isMultiSelect: mockData.isMultiSelect,
|
|
// };
|
|
// },
|
|
// mixins: [inputButtonWrapperMixin]
|
|
// };
|
|
|
|
// let parentComponentTemplate = "<div>"
|
|
// parentComponentTemplate += `<baseInputButtonWrapper v-model="selectedValue" :isMultiSelect="${mockData.isMultiSelect}" groupName="myGroupName" value="value1" />`
|
|
// parentComponentTemplate += `<baseInputButtonWrapper v-model="selectedValue" :isMultiSelect="${mockData.isMultiSelect}" groupName="myGroupName" value="value2" />`
|
|
// parentComponentTemplate += `</div>`
|
|
// const wrapper = mount({
|
|
// data() {
|
|
// return {
|
|
// value: mockData.initialValue,
|
|
// }
|
|
// },
|
|
// template: parentComponentTemplate,
|
|
// components: { baseInputButtonWrapper }
|
|
// })
|
|
// =======
|
|
const originalData = baseInputButton.data();
|
|
baseInputButton.data = () => {
|
|
return {
|
|
...originalData,
|
|
// $route: {
|
|
// query: {
|
|
// fmgPage: "myPage",
|
|
// },
|
|
// },
|
|
};
|
|
};
|
|
|
|
// console.log({
|
|
// test: baseInputButton.vm.$route
|
|
// })
|
|
baseInputButton.methods.pushClickEventToGA = jest.fn();
|
|
|
|
const baseInputButtonWrapper = {
|
|
name: "baseInputButtonWrapper",
|
|
components: { baseInputButton },
|
|
template:
|
|
'<div><baseInputButton v-bind="$props" v-model="selectedValue" /></div>',
|
|
mixins: [inputButtonWrapperMixin],
|
|
};
|
|
|
|
let parentComponentTemplate = `<div>`;
|
|
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value1" />`;
|
|
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value2" />`;
|
|
parentComponentTemplate += `</div>`;
|
|
const wrapper = mount(
|
|
{
|
|
data() {
|
|
return {
|
|
value:
|
|
mockData.initialValue ??
|
|
(mockData.isMultiSelect ? [] : ""),
|
|
$route: {
|
|
query: {
|
|
fmgPage: "myPage",
|
|
},
|
|
},
|
|
};
|
|
},
|
|
template: parentComponentTemplate,
|
|
components: { baseInputButtonWrapper },
|
|
},
|
|
{}
|
|
);
|
|
// >>>>>>> feature/CSR-762
|
|
|
|
return { wrapper };
|
|
}
|