jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-762 Add/fix tests

Browse source
This commit is contained in:
Katie 2022-10-19 13:53:22 -04:00
commit bd56273fd1
3 changed files with 286 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

373
src/common-components/base-input-button/base-input-button.spec.js
View file

@ -3,7 +3,7 @@ import baseInputButton from "./base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin" import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"
// TODO KO // TODO KO
describe.skip("baseInputButton.vue", () => { describe("baseInputButton.vue", () => {
describe("general", () => { describe("general", () => {
describe("checkbox", () => { describe("checkbox", () => {
test("isMultiSelect => baseInputButton is a checkbox", () => { test("isMultiSelect => baseInputButton is a checkbox", () => {
@ -74,11 +74,13 @@ describe.skip("baseInputButton.vue", () => {
}); });
// Act // Act
await wrapper.trigger("mousedown.left"); // await wrapper.trigger("mousedown.left");
await wrapper.trigger("click"); await wrapper.trigger("click");
// Assert // Assert
expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(["X"]); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
"X",
]);
}); });
}); });
@ -99,18 +101,20 @@ describe.skip("baseInputButton.vue", () => {
await wrapper.trigger("click"); await wrapper.trigger("click");
// Assert // Assert
expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("X"); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
"X"
);
}); });
}); });
}); });
describe("keyboard navigation and events", () => { describe("keyboard navigation and events", () => {
describe("checkbox", () => { describe("checkbox", () => {
test.todo("focus on a checkbox => inputButtonClicked is not emitted"); test.todo("focus on a checkbox => update:modelValue is not emitted");
test.todo("blur from a checkbox => inputButtonClicked is not emitted"); test.todo("blur from a checkbox => update:modelValue is not emitted");
test("change event fired from checkbox => inputButtonClicked is emitted with correct value", async () => { test("change event fired from checkbox => update:modelValue is emitted with correct value", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
@ -127,10 +131,12 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("change"); await input.trigger("change");
// Assert // Assert
expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(["Hi"]); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
"Hi",
]);
}); });
test("focus and click space on a checkbox => inputButtonClicked is not emitted", async () => { test("focus and click space on a checkbox => update:modelValue is not emitted", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
@ -147,10 +153,12 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("keypress", { key: "space" }); await input.trigger("keypress", { key: "space" });
// Assert // Assert
expect(wrapper.emitted()).not.toHaveProperty("inputButtonClicked"); expect(wrapper.emitted()).not.toHaveProperty(
"update:modelValue"
);
}); });
test("focus and click enter on a checkbox => inputButtonClicked is emitted with correct value", async () => { test("focus and click enter on a checkbox => update:modelValue is emitted with correct value", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
@ -167,16 +175,18 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("keypress", { key: "enter" }); await input.trigger("keypress", { key: "enter" });
// Assert // Assert
expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(["Hi"]); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
"Hi",
]);
}); });
}); });
describe("radio", () => { describe("radio", () => {
test.todo("focus on a radio button => inputButtonClicked is not emitted"); test.todo("focus on a radio button => update:modelValue is not emitted");
test.todo("blur from a radio button => inputButtonClicked is not emitted"); test.todo("blur from a radio button => update:modelValue is not emitted");
test("focus and click space on a radio button => inputButtonClicked is emitted with correct value", async () => { test("focus and click space on a radio button => update:modelValue is emitted with correct value", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
@ -193,11 +203,13 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("keypress", { key: "space" }); await input.trigger("keypress", { key: "space" });
// Assert // Assert
expect(wrapper.emitted()).toHaveProperty("inputButtonClicked"); expect(wrapper.emitted()).toHaveProperty("update:modelValue");
expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("Hi"); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
"Hi"
);
}); });
test("focus and click enter on a radio button => inputButtonClicked is emitted with correct value", async () => { test("focus and click enter on a radio button => update:modelValue is emitted with correct value", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
@ -214,8 +226,10 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("keypress", { key: "enter" }); await input.trigger("keypress", { key: "enter" });
// Assert // Assert
expect(wrapper.emitted()).toHaveProperty("inputButtonClicked"); expect(wrapper.emitted()).toHaveProperty("update:modelValue");
expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("Hi"); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
"Hi"
);
}); });
}); });
}); });
@ -411,37 +425,13 @@ describe.skip("baseInputButton.vue", () => {
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
}); });
test("eventType === eventTypes.MOUNT => call correct methods", () => { test("eventType === eventTypes.CHANGE && !selectingInitiatesLoad => call correct methods", () => {
// Arrange // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
propsData: { propsData: {
isMultiSelect: false, isMultiSelect: false,
}, selectingInitiatesLoad: false,
},
});
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).toHaveBeenCalledWith({
myEvent: "test",
});
expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click");
expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled();
});
test("eventType === eventTypes.CHANGE && selectOnKeypress => call correct methods", () => {
// Arrange
const { wrapper } = setupMocks({
mockData: {
propsData: {
isMultiSelect: false,
selectOnKeypress: true,
}, },
}, },
}); });
@ -460,13 +450,13 @@ describe.skip("baseInputButton.vue", () => {
expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled();
}); });
test("eventType === eventTypes.CHANGE && !selectOnKeypress => call correct methods", () => { test("eventType === eventTypes.CHANGE && selectingInitiatesLoad => call correct methods", () => {
// Arrange // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
propsData: { propsData: {
isMultiSelect: false, isMultiSelect: false,
selectOnKeypress: false, selectingInitiatesLoad: true,
}, },
}, },
}); });
@ -688,7 +678,7 @@ describe.skip("baseInputButton.vue", () => {
expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ myEvent: "Test" }); expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ myEvent: "Test" });
}); });
test.each(isCheckbox)("inputButtonClicked is emitted with valueToEmit", async () => { test.each(isCheckbox)("update:modelValue is emitted with valueToEmit", async (isMultiSelect) => {
// Arrange // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
@ -706,7 +696,7 @@ describe.skip("baseInputButton.vue", () => {
wrapper.vm.handleClick({ myEvent: "Test" }); wrapper.vm.handleClick({ myEvent: "Test" });
// Assert // Assert
expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("HELLO WORLD"); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("HELLO WORLD");
}); });
}); });
@ -949,37 +939,171 @@ describe.skip("baseInputButton.vue", () => {
describe("integration testing", () => { describe("integration testing", () => {
describe("checkbox", () => { describe("checkbox", () => {
test.only("click on both => both are selected", async () => { test("click on both => both are selected", async () => {
// Arrange // Arrange
const { wrapper } = setupBaseInputButtonWrapper({ const { wrapper } = setupBaseInputButtonWrapper({
isMultiSelect: true, mockData: {
value1: "value1" isMultiSelect: true,
}) },
});
// Act // Act
const buttonWrappers = wrapper.findAllComponents({name: "baseInputButtonWrapper"}) const buttonWrappers = wrapper.findAllComponents({
name: "baseInputButtonWrapper",
// The two together simulate a click });
const inputOne = buttonWrappers.at(0); const inputButtonOne = buttonWrappers.at(0);
await inputOne.trigger("mousedown.left") const inputButtonTwo = buttonWrappers.at(1);
await inputOne.trigger("change") expect(inputButtonOne.vm.isMultiSelect).toBe(true);
await inputOne.trigger("click") expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
expect(wrapper.vm.value).toEqual([]);
console.log({
html: wrapper.html(),
buttonWrapper1: inputOne,
a: inputOne.vm.selectedValue,
c: inputOne.vm.modelValue,
d: inputOne.modelValue,
e: inputOne.vm.value,
f: inputOne.value,
})
await inputButtonOne.find("input").trigger("click");
await inputButtonTwo.find("input").trigger("click");
// Assert // Assert
expect(wrapper.vm.value).toEqual(["value1"]) 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);
});
}) })
}); });
}); });
@ -989,6 +1113,16 @@ describe.skip("baseInputButton.vue", () => {
// that this acts like a regular input aside from a different emitted event) // that this acts like a regular input aside from a different emitted event)
function setupMocks({ mockData = {}, shouldShallowMount = true }) { function setupMocks({ mockData = {}, shouldShallowMount = true }) {
const baseInputButtonWrapper = {
components: { baseInputButton },
template: '<baseInputButton v-model="myValue" />',
data() {
return {
myValue: "",
};
},
};
const mountMockData = { const mountMockData = {
...mockData, ...mockData,
propsData: { propsData: {
@ -1018,32 +1152,83 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
} }
function setupBaseInputButtonWrapper({ mockData = {} }) { 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 = { const baseInputButtonWrapper = {
name: "baseInputButtonWrapper", name: "baseInputButtonWrapper",
components: { baseInputButton }, components: { baseInputButton },
template: template:
'<div><baseInputButton v-bind="$props" @inputButtonClicked="handleAnswerChange" />Test</div>', '<div><baseInputButton v-bind="$props" v-model="selectedValue" /></div>',
data() { mixins: [inputButtonWrapperMixin],
return {
isMultiSelect: mockData.isMultiSelect,
};
},
mixins: [inputButtonWrapperMixin]
}; };
let parentComponentTemplate = "<div>" let parentComponentTemplate = `<div>`;
parentComponentTemplate += `<baseInputButtonWrapper v-model="selectedValue" :isMultiSelect="${mockData.isMultiSelect}" groupName="myGroupName" value="value1" />` parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value1" />`;
parentComponentTemplate += `<baseInputButtonWrapper v-model="selectedValue" :isMultiSelect="${mockData.isMultiSelect}" groupName="myGroupName" value="value2" />` parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value2" />`;
parentComponentTemplate += `</div>` parentComponentTemplate += `</div>`;
const wrapper = mount({ const wrapper = mount(
data() { {
return { data() {
value: mockData.initialValue, return {
} value:
mockData.initialValue ??
(mockData.isMultiSelect ? [] : ""),
$route: {
query: {
fmgPage: "myPage",
},
},
};
},
template: parentComponentTemplate,
components: { baseInputButtonWrapper },
}, },
template: parentComponentTemplate, {}
components: { baseInputButtonWrapper } );
}) // >>>>>>> feature/CSR-762
return { wrapper }; return { wrapper };
} }

6
src/common-components/base-input-button/base-input-button.vue
View file

@ -48,10 +48,6 @@ export default {
}, },
methods: { methods: {
handleEventAction(eventType, e) { handleEventAction(eventType, e) {
console.log("HANDLE EVENT ACTION: ", {
eventType,
e
})
if (this.isMultiSelect) { if (this.isMultiSelect) {
switch (eventType) { switch (eventType) {
case this.eventTypes.ENTER: case this.eventTypes.ENTER:
@ -130,6 +126,8 @@ export default {
} }
}, },
pushClickEventToGA(value) { pushClickEventToGA(value) {
console.log("PUSHHH")
console.log(this.$route)
this.pushEventToGA( this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE], this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED, this.GaActions.CLICKED,

6
src/mixins/input-button-wrapper-mixin.js
View file

@ -1,6 +1,10 @@
import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props"; import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
export default { export default {
model: {
prop: "modelValue",
event: "change",
},
props: { props: {
...inputButtonProps, ...inputButtonProps,
buttonLabel: [Number, String], buttonLabel: [Number, String],
@ -28,4 +32,4 @@ export default {
}, },
}, },
}, },
}; };