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

WIP

Browse source
This commit is contained in:
Katie 2022-10-20 08:29:35 -04:00
parent bd56273fd1
commit b77aded229
2 changed files with 185 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { shallowMount, mount } from "@vue/test-utils"; import { shallowMount, mount } from "@vue/test-utils";
import baseInputButton from "./base-input-button"; 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("baseInputButton.vue", () => { describe("baseInputButton.vue", () => {
@ -62,26 +62,109 @@ describe("baseInputButton.vue", () => {
describe("mouse clicks", () => { describe("mouse clicks", () => {
describe("checkbox", () => { describe("checkbox", () => {
test("clicked => correct event and value are emitted", async () => { describe("clicked once", () => {
// Arrange test("correct event and value are emitted", async () => {
const { wrapper } = setupMocks({ // Arrange
mockData: { const { wrapper } = setupMocks({
propsData: { mockData: {
isMultiSelect: true, propsData: {
value: "X", 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 describe("is initially checked, click once", () => {
// await wrapper.trigger("mousedown.left"); test("input is unchecked", async () => {
await wrapper.trigger("click"); // Arrange
const { wrapper } = setupMocks({
// Assert mockData: {
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([ propsData: {
"X", 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", () => { describe("radio", () => {
@ -101,9 +184,7 @@ describe("baseInputButton.vue", () => {
await wrapper.trigger("click"); await wrapper.trigger("click");
// Assert // Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual( expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("X");
"X"
);
}); });
}); });
}); });
@ -131,9 +212,7 @@ describe("baseInputButton.vue", () => {
await input.trigger("change"); await input.trigger("change");
// Assert // Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["Hi"]);
"Hi",
]);
}); });
test("focus and click space on a checkbox => update:modelValue is not emitted", async () => { 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" }); await input.trigger("keypress", { key: "space" });
// Assert // Assert
expect(wrapper.emitted()).not.toHaveProperty( expect(wrapper.emitted()).not.toHaveProperty("update:modelValue");
"update:modelValue"
);
}); });
test("focus and click enter on a checkbox => update:modelValue is emitted with correct value", async () => { 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" }); await input.trigger("keypress", { key: "enter" });
// Assert // Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["Hi"]);
"Hi",
]);
}); });
}); });
@ -204,9 +279,7 @@ describe("baseInputButton.vue", () => {
// Assert // Assert
expect(wrapper.emitted()).toHaveProperty("update:modelValue"); expect(wrapper.emitted()).toHaveProperty("update:modelValue");
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual( expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("Hi");
"Hi"
);
}); });
test("focus and click enter on a radio button => update:modelValue is emitted with correct value", async () => { 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 // Assert
expect(wrapper.emitted()).toHaveProperty("update:modelValue"); expect(wrapper.emitted()).toHaveProperty("update:modelValue");
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual( expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("Hi");
"Hi"
);
}); });
}); });
}); });
@ -678,26 +749,29 @@ describe("baseInputButton.vue", () => {
expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ myEvent: "Test" }); expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ myEvent: "Test" });
}); });
test.each(isCheckbox)("update:modelValue is emitted with valueToEmit", async (isMultiSelect) => { test.each(isCheckbox)(
// Arrange "update:modelValue is emitted with valueToEmit",
const { wrapper } = setupMocks({ async (isMultiSelect) => {
mockData: { // Arrange
propsData: { const { wrapper } = setupMocks({
isMultiSelect: isMultiSelect, mockData: {
value: "Bello", propsData: {
isMultiSelect: isMultiSelect,
value: "Bello",
},
}, },
}, });
});
wrapper.vm.handleSelectionChange = jest.fn(); wrapper.vm.handleSelectionChange = jest.fn();
await wrapper.setData({ valueToEmit: "HELLO WORLD" }); await wrapper.setData({ valueToEmit: "HELLO WORLD" });
// Act // Act
wrapper.vm.handleClick({ myEvent: "Test" }); wrapper.vm.handleClick({ myEvent: "Test" });
// Assert // Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("HELLO WORLD"); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("HELLO WORLD");
}); }
);
}); });
describe("handlePushClickEventToGACheck", () => { describe("handlePushClickEventToGACheck", () => {
@ -994,32 +1068,35 @@ describe("baseInputButton.vue", () => {
[["value2"], false, true], [["value2"], false, true],
[["value1", "value2"], true, true], [["value1", "value2"], true, true],
[["value1"], true, false], [["value1"], true, false],
[[], false, false] [[], false, false],
] ];
test.each(defaultCheckedCases)("initial value is %s => correct input buttons are selected", async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => { test.each(defaultCheckedCases)(
// Arrange "initial value is %s => correct input buttons are selected",
const { wrapper } = setupBaseInputButtonWrapper({ async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
mockData: { // Arrange
isMultiSelect: true, const { wrapper } = setupBaseInputButtonWrapper({
initialValue: modelValue mockData: {
}, isMultiSelect: true,
}); initialValue: modelValue,
},
});
// Act // Act
const buttonWrappers = wrapper.findAllComponents({ const buttonWrappers = wrapper.findAllComponents({
name: "baseInputButtonWrapper", name: "baseInputButtonWrapper",
}); });
const inputs = wrapper.findAll("input"); const inputs = wrapper.findAll("input");
const inputButtonOne = buttonWrappers.at(0); const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1); const inputButtonTwo = buttonWrappers.at(1);
// Assert // Assert
expect(inputButtonOne.vm.isMultiSelect).toBe(true); expect(inputButtonOne.vm.isMultiSelect).toBe(true);
expect(inputButtonTwo.vm.isMultiSelect).toBe(true); expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked); expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked); expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
expect(wrapper.vm.value).toEqual(modelValue); expect(wrapper.vm.value).toEqual(modelValue);
}); }
);
}); });
describe("radio", () => { describe("radio", () => {
@ -1078,51 +1155,40 @@ describe("baseInputButton.vue", () => {
["", false, false], ["", false, false],
["value1", true, false], ["value1", true, false],
["value2", false, true], ["value2", false, true],
[[], false, false] [[], false, false],
] ];
test.each(defaultCheckedCases)("initial value is %s => correct input buttons are selected", async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => { test.each(defaultCheckedCases)(
// Arrange "initial value is %s => correct input buttons are selected",
const { wrapper } = setupBaseInputButtonWrapper({ async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
mockData: { // Arrange
isMultiSelect: false, const { wrapper } = setupBaseInputButtonWrapper({
initialValue: modelValue mockData: {
}, isMultiSelect: false,
}); initialValue: modelValue,
},
});
// Act // Act
const buttonWrappers = wrapper.findAllComponents({ const buttonWrappers = wrapper.findAllComponents({
name: "baseInputButtonWrapper", name: "baseInputButtonWrapper",
}); });
const inputs = wrapper.findAll("input"); const inputs = wrapper.findAll("input");
const inputButtonOne = buttonWrappers.at(0); const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1); const inputButtonTwo = buttonWrappers.at(1);
// Assert // Assert
expect(inputButtonOne.vm.isMultiSelect).toBe(false); expect(inputButtonOne.vm.isMultiSelect).toBe(false);
expect(inputButtonTwo.vm.isMultiSelect).toBe(false); expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked); expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked); expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
expect(wrapper.vm.value).toEqual(modelValue); 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 }) { 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: {
@ -1152,34 +1218,6 @@ 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(); const originalData = baseInputButton.data();
baseInputButton.data = () => { baseInputButton.data = () => {
return { return {
@ -1192,19 +1230,15 @@ function setupBaseInputButtonWrapper({ mockData = {} }) {
}; };
}; };
// console.log({
// test: baseInputButton.vm.$route
// })
baseInputButton.methods.pushClickEventToGA = jest.fn(); baseInputButton.methods.pushClickEventToGA = jest.fn();
const baseInputButtonWrapper = { const baseInputButtonWrapper = {
name: "baseInputButtonWrapper", name: "baseInputButtonWrapper",
components: { baseInputButton }, components: { baseInputButton },
template: template: '<div><baseInputButton v-bind="$props" v-model="selectedValue" /></div>',
'<div><baseInputButton v-bind="$props" v-model="selectedValue" /></div>',
mixins: [inputButtonWrapperMixin], mixins: [inputButtonWrapperMixin],
}; };
let parentComponentTemplate = `<div>`; 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="value1" />`;
parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value2" />`; parentComponentTemplate += `<baseInputButtonWrapper v-model="value" groupName="myGroupName" :isMultiSelect="${mockData.isMultiSelect}" value="value2" />`;
@ -1213,9 +1247,7 @@ function setupBaseInputButtonWrapper({ mockData = {} }) {
{ {
data() { data() {
return { return {
value: value: mockData.initialValue ?? (mockData.isMultiSelect ? [] : ""),
mockData.initialValue ??
(mockData.isMultiSelect ? [] : ""),
$route: { $route: {
query: { query: {
fmgPage: "myPage", fmgPage: "myPage",
@ -1228,7 +1260,6 @@ function setupBaseInputButtonWrapper({ mockData = {} }) {
}, },
{} {}
); );
// >>>>>>> feature/CSR-762
return { wrapper }; return { wrapper };
} }

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

@ -97,6 +97,7 @@ export default {
}, },
handleClick(e) { handleClick(e) {
this.handleSelectionChange(e); this.handleSelectionChange(e);
console.log(this.valueToEmit)
this.$emit("update:modelValue", this.valueToEmit); this.$emit("update:modelValue", this.valueToEmit);
}, },
handleFocus() { handleFocus() {
@ -126,8 +127,6 @@ 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,