WIP
This commit is contained in:
Katie
parent
bd56273fd1
commit
b77aded229
2 changed files with 185 additions and 155 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { shallowMount, mount } from "@vue/test-utils";
|
||||
import baseInputButton from "./base-input-button";
|
||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"
|
||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
||||
|
||||
// TODO KO
|
||||
describe("baseInputButton.vue", () => {
|
||||
|
|
@ -62,26 +62,109 @@ describe("baseInputButton.vue", () => {
|
|||
|
||||
describe("mouse clicks", () => {
|
||||
describe("checkbox", () => {
|
||||
test("clicked => correct event and value are emitted", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
value: "X",
|
||||
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);
|
||||
});
|
||||
})
|
||||
|
||||
// Act
|
||||
// await wrapper.trigger("mousedown.left");
|
||||
await wrapper.trigger("click");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
|
||||
"X",
|
||||
]);
|
||||
});
|
||||
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", () => {
|
||||
|
|
@ -101,9 +184,7 @@ describe("baseInputButton.vue", () => {
|
|||
await wrapper.trigger("click");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
|
||||
"X"
|
||||
);
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("X");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -131,9 +212,7 @@ describe("baseInputButton.vue", () => {
|
|||
await input.trigger("change");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
|
||||
"Hi",
|
||||
]);
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["Hi"]);
|
||||
});
|
||||
|
||||
test("focus and click space on a checkbox => update:modelValue is not emitted", async () => {
|
||||
|
|
@ -153,9 +232,7 @@ describe("baseInputButton.vue", () => {
|
|||
await input.trigger("keypress", { key: "space" });
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()).not.toHaveProperty(
|
||||
"update:modelValue"
|
||||
);
|
||||
expect(wrapper.emitted()).not.toHaveProperty("update:modelValue");
|
||||
});
|
||||
|
||||
test("focus and click enter on a checkbox => update:modelValue is emitted with correct value", async () => {
|
||||
|
|
@ -175,9 +252,7 @@ describe("baseInputButton.vue", () => {
|
|||
await input.trigger("keypress", { key: "enter" });
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
|
||||
"Hi",
|
||||
]);
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["Hi"]);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -204,9 +279,7 @@ describe("baseInputButton.vue", () => {
|
|||
|
||||
// Assert
|
||||
expect(wrapper.emitted()).toHaveProperty("update:modelValue");
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
|
||||
"Hi"
|
||||
);
|
||||
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 () => {
|
||||
|
|
@ -227,9 +300,7 @@ describe("baseInputButton.vue", () => {
|
|||
|
||||
// Assert
|
||||
expect(wrapper.emitted()).toHaveProperty("update:modelValue");
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
|
||||
"Hi"
|
||||
);
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("Hi");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -678,26 +749,29 @@ describe("baseInputButton.vue", () => {
|
|||
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",
|
||||
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" });
|
||||
wrapper.vm.handleSelectionChange = jest.fn();
|
||||
await wrapper.setData({ valueToEmit: "HELLO WORLD" });
|
||||
|
||||
// Act
|
||||
wrapper.vm.handleClick({ myEvent: "Test" });
|
||||
// Act
|
||||
wrapper.vm.handleClick({ myEvent: "Test" });
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("HELLO WORLD");
|
||||
});
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("HELLO WORLD");
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
describe("handlePushClickEventToGACheck", () => {
|
||||
|
|
@ -994,32 +1068,35 @@ describe("baseInputButton.vue", () => {
|
|||
[["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
|
||||
},
|
||||
});
|
||||
[[], 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);
|
||||
// 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);
|
||||
});
|
||||
// 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", () => {
|
||||
|
|
@ -1078,51 +1155,40 @@ describe("baseInputButton.vue", () => {
|
|||
["", 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
|
||||
},
|
||||
});
|
||||
[[], 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);
|
||||
// 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);
|
||||
});
|
||||
})
|
||||
// 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: {
|
||||
|
|
@ -1152,34 +1218,6 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
|
|||
}
|
||||
|
||||
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 {
|
||||
|
|
@ -1192,19 +1230,15 @@ function setupBaseInputButtonWrapper({ mockData = {} }) {
|
|||
};
|
||||
};
|
||||
|
||||
// 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>',
|
||||
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" />`;
|
||||
|
|
@ -1213,9 +1247,7 @@ function setupBaseInputButtonWrapper({ mockData = {} }) {
|
|||
{
|
||||
data() {
|
||||
return {
|
||||
value:
|
||||
mockData.initialValue ??
|
||||
(mockData.isMultiSelect ? [] : ""),
|
||||
value: mockData.initialValue ?? (mockData.isMultiSelect ? [] : ""),
|
||||
$route: {
|
||||
query: {
|
||||
fmgPage: "myPage",
|
||||
|
|
@ -1228,7 +1260,6 @@ function setupBaseInputButtonWrapper({ mockData = {} }) {
|
|||
},
|
||||
{}
|
||||
);
|
||||
// >>>>>>> feature/CSR-762
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ export default {
|
|||
},
|
||||
handleClick(e) {
|
||||
this.handleSelectionChange(e);
|
||||
console.log(this.valueToEmit)
|
||||
this.$emit("update:modelValue", this.valueToEmit);
|
||||
},
|
||||
handleFocus() {
|
||||
|
|
@ -126,8 +127,6 @@ export default {
|
|||
}
|
||||
},
|
||||
pushClickEventToGA(value) {
|
||||
console.log("PUSHHH")
|
||||
console.log(this.$route)
|
||||
this.pushEventToGA(
|
||||
this.$route.query[queryStrings.FMG_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
|
|
|
|||
Loading…
Reference in a new issue