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

CSR-762 Add integration tests for base-input-button

Browse source
This commit is contained in:
Katie 2022-10-17 16:45:18 -04:00
parent 4d90df5f76
commit a57565065b
3 changed files with 218 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,10 @@
import { shallowMount, mount } from "@vue/test-utils"; import { shallowMount, mount } from "@vue/test-utils";
import { EXPECTATION_FAILED } from "http-status-codes";
import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin";
import baseInputButton from "./base-input-button"; import baseInputButton from "./base-input-button";
// 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", () => {
@ -73,11 +75,11 @@ 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([ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
"X", "X",
]); ]);
}); });
@ -100,7 +102,7 @@ describe.skip("baseInputButton.vue", () => {
await wrapper.trigger("click"); await wrapper.trigger("click");
// Assert // Assert
expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
"X" "X"
); );
}); });
@ -134,7 +136,7 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("change"); await input.trigger("change");
// Assert // Assert
expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
"Hi", "Hi",
]); ]);
}); });
@ -157,7 +159,7 @@ describe.skip("baseInputButton.vue", () => {
// Assert // Assert
expect(wrapper.emitted()).not.toHaveProperty( expect(wrapper.emitted()).not.toHaveProperty(
"inputButtonClicked" "update:modelValue"
); );
}); });
@ -178,7 +180,7 @@ 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([ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
"Hi", "Hi",
]); ]);
}); });
@ -210,8 +212,8 @@ 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( expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
"Hi" "Hi"
); );
}); });
@ -233,8 +235,8 @@ 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( expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
"Hi" "Hi"
); );
}); });
@ -474,21 +476,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: {
}) isMultiSelect: true,
// console.log(wrapper.html()) },
});
// Act // Act
const buttonWrappers = wrapper.findAllComponents({name: "baseInputButtonWrapper"}) const buttonWrappers = wrapper.findAllComponents({
console.log(buttonWrappers[0].find("input")) name: "baseInputButtonWrapper",
await buttonWrappers[0].find("input").trigger("mousedown.left") });
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 // 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);
});
}) })
}); });
}); });
@ -503,6 +655,7 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
}; };
}, },
}; };
const mountMockData = { const mountMockData = {
...mockData, ...mockData,
propsData: { propsData: {
@ -524,7 +677,7 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
wrapper.vm.$route = { wrapper.vm.$route = {
query: {}, query: {},
}; };
wrapper.vm.GaActions = {} wrapper.vm.GaActions = {};
return { wrapper }; return { wrapper };
} }
@ -534,38 +687,50 @@ function setupBaseInputButtonWrapper({ mockData = {} }) {
baseInputButton.data = () => { baseInputButton.data = () => {
return { return {
...originalData, ...originalData,
$route: { // $route: {
query: { // query: {
fmgPage: "myPage" // fmgPage: "myPage",
} // },
} // },
} };
} };
// console.log({
// test: baseInputButton.vm.$route
// })
baseInputButton.methods.pushClickEventToGA = jest.fn(); baseInputButton.methods.pushClickEventToGA = jest.fn();
const baseInputButtonWrapper = { const baseInputButtonWrapper = {
name: "baseInputButtonWrapper",
components: { baseInputButton }, components: { baseInputButton },
template: template:
'<div><baseInputButton v-model="myValue" groupName="myGroupName" value="X" :isMultiSelect="isMultiSelect" /></div>', '<div><baseInputButton v-bind="$props" v-model="selectedValue" /></div>',
data() { mixins: [inputButtonWrapperMixin],
return {
myValue: "",
isMultiSelect: mockData.isMultiSelect,
};
},
// const parentComponent = mount({
// data() {
// return {
// value: "value1",
// }
// },
// template: '<div><baseInputButton v-model="value" value="value1" /><baseInputButton v-model="value" value="value2" /></div>',
// components: { baseInputButton }
// })
}; };
const wrapper = mount(baseInputButtonWrapper, {}); 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 },
},
{}
);
return { wrapper }; return { wrapper };
} }

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

@ -48,7 +48,10 @@ export default {
}, },
methods: { methods: {
handleEventAction(eventType, e) { handleEventAction(eventType, e) {
console.log("AHHHHHH") // console.log({
// eventType,
// e
// })
if (this.isMultiSelect) { if (this.isMultiSelect) {
switch (eventType) { switch (eventType) {
case this.eventTypes.ENTER: case this.eventTypes.ENTER:
@ -126,6 +129,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,

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

@ -18,7 +18,6 @@ export default {
screenReaderOnlyText: String, screenReaderOnlyText: String,
isWide: Boolean, isWide: Boolean,
}, },
<<<<<<< Updated upstream
computed: { computed: {
selectedValue: { selectedValue: {
get() { get() {
@ -28,14 +27,6 @@ export default {
if (this.preHandleAnswerChange) { if (this.preHandleAnswerChange) {
this.preHandleAnswerChange(e); this.preHandleAnswerChange(e);
} }
=======
methods: {
handleAnswerChange(e) {
console.log("HANDLING IT")
if (this.preHandleAnswerChange) {
this.preHandleAnswerChange(e);
}
>>>>>>> Stashed changes
this.$emit("update:modelValue", e); this.$emit("update:modelValue", e);
}, },