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

CSR-762 tests

Browse source
This commit is contained in:
Katie 2022-10-20 12:36:45 -04:00
parent 33faaac7bc
commit 78bb3f5e8c
9 changed files with 856 additions and 870 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +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";
// TODO KO
describe("baseInputButton.vue", () => { describe("baseInputButton.vue", () => {
describe("general", () => { describe("general", () => {
describe("checkbox", () => { describe("checkbox", () => {
@ -96,11 +94,10 @@ describe("baseInputButton.vue", () => {
// Act // Act
await wrapper.trigger("click"); await wrapper.trigger("click");
// Assert // Assert
expect(input.element.checked).toBe(true); expect(input.element.checked).toBe(true);
}); });
}) });
describe("clicked twice", () => { describe("clicked twice", () => {
test("input is unchecked", async () => { test("input is unchecked", async () => {
@ -122,7 +119,7 @@ describe("baseInputButton.vue", () => {
// Assert // Assert
expect(input.element.checked).toBe(false); expect(input.element.checked).toBe(false);
}); });
}) });
describe("is initially checked, click once", () => { describe("is initially checked, click once", () => {
test("input is unchecked", async () => { test("input is unchecked", async () => {
@ -132,7 +129,7 @@ describe("baseInputButton.vue", () => {
propsData: { propsData: {
isMultiSelect: true, isMultiSelect: true,
value: "X", value: "X",
modelValue:["X"] modelValue: ["X"],
}, },
}, },
}); });
@ -152,7 +149,7 @@ describe("baseInputButton.vue", () => {
propsData: { propsData: {
isMultiSelect: true, isMultiSelect: true,
value: "X", value: "X",
modelValue:["X"] modelValue: ["X"],
}, },
}, },
}); });
@ -164,7 +161,7 @@ describe("baseInputButton.vue", () => {
// Assert // Assert
expect(input.element.checked).toBe(false); expect(input.element.checked).toBe(false);
}); });
}) });
}); });
describe("radio", () => { describe("radio", () => {
@ -189,12 +186,8 @@ describe("baseInputButton.vue", () => {
}); });
}); });
describe("keyboard navigation and events", () => { describe("events", () => {
describe("checkbox", () => { 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 () => { test("change event fired from checkbox => update:modelValue is emitted with correct value", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
@ -257,10 +250,6 @@ describe("baseInputButton.vue", () => {
}); });
describe("radio", () => { 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 () => { 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({
@ -775,7 +764,19 @@ describe("baseInputButton.vue", () => {
}); });
describe("handlePushClickEventToGACheck", () => { describe("handlePushClickEventToGACheck", () => {
test.todo(""); test.todo("called from click or click-like event => call pushClickEventToGA");
describe("called from keyboard navigation/button-question-focus-helper", () => {
test.todo("valueToEmit is null => pushClickEventToGA not called");
test.todo("isMultiSelect => pushClickEventToGA not called");
test.todo("!isMultiSelect and selectingInitiatesLoad => pushClickEventToGA not called");
test.todo("valueToEmit is null => pushClickEventToGA not called");
test.todo("valueToEmit is null => pushClickEventToGA not called");
});
}); });
describe("pushClickEventToGA", () => { describe("pushClickEventToGA", () => {
@ -1011,179 +1012,17 @@ describe("baseInputButton.vue", () => {
}); });
}); });
describe("integration testing", () => { describe("keyboard navigation", () => {
describe("checkbox", () => { describe("checkbox", () => {
test("click on both => both are selected", async () => { test.todo("focus on a checkbox => update:modelValue is not emitted");
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: true,
},
});
// Act test.todo("blur from a checkbox => update:modelValue is not emitted");
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", () => { describe("radio", () => {
test("click on both => last clicked is selected", async () => { test.todo("focus on a radio button => update:modelValue is not emitted");
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: false,
},
});
// Act test.todo("blur from a radio button => update:modelValue is not emitted");
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);
}
);
}); });
}); });
}); });
@ -1216,50 +1055,3 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
return { wrapper }; return { wrapper };
} }
function setupBaseInputButtonWrapper({ mockData = {} }) {
const originalData = baseInputButton.data();
baseInputButton.data = () => {
return {
...originalData,
// $route: {
// query: {
// fmgPage: "myPage",
// },
// },
};
};
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 },
},
{}
);
return { wrapper };
}

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

@ -97,7 +97,6 @@ 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() {

33
src/common-components/button-question/button-question.spec.js
View file

@ -101,9 +101,7 @@ describe("buttonQuestion.vue", () => {
const answer = { Name: "testName", Text: "testText" }; const answer = { Name: "testName", Text: "testText" };
// Assert // Assert
expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe( expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe("testText");
"testText"
);
}); });
}); });
@ -114,17 +112,14 @@ describe("buttonQuestion.vue", () => {
const answer = { Name: "testName", Text: "testText" }; const answer = { Name: "testName", Text: "testText" };
// Assert // Assert
expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe( expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe("testName");
"testName"
);
}); });
}); });
// TODO KO
describe("buttonQuestion.vue", () => { describe("buttonQuestion.vue", () => {
describe.skip("handleAnswerChange", () => { describe("selectedValues", () => {
test("is radio => should emit captured value", async () => { test("is radio => should emit captured value", async () => {
// Act // Arrange
const wrapper = shallowMount( const wrapper = shallowMount(
buttonQuestion, buttonQuestion,
setupMocks({ propsData: { groupName: "group-name" } }) setupMocks({ propsData: { groupName: "group-name" } })
@ -134,11 +129,12 @@ describe("buttonQuestion.vue", () => {
isMultiSelect: false, isMultiSelect: false,
modelValue: "", modelValue: "",
}); });
const val = "2021";
wrapper.vm.handleAnswerChange(val); // Act
wrapper.vm.selectedValues = "2021";
// Assert // Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("2021");
}); });
test("is checkbox => should emit captured value", async () => { test("is checkbox => should emit captured value", async () => {
@ -151,12 +147,17 @@ describe("buttonQuestion.vue", () => {
isMultiSelect: false, isMultiSelect: false,
modelValue: "", modelValue: "",
}); });
const val = ["2022", "2021", , "2019", "2020"];
wrapper.vm.handleAnswerChange(val); // Act
wrapper.vm.selectedValues = ["2022", "2021", "2020", "2019", "2020"];
// Assert // Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
["2022", "2021", , "2019", "2020"], "2022",
"2021",
"2020",
"2019",
"2020",
]); ]);
}); });
}); });

1
src/helpers/button-question-focus-helper.js
View file

@ -8,7 +8,6 @@
let lastFocusedInputGroupName = ""; let lastFocusedInputGroupName = "";
let onButtonQuestionLostFocusCallback = null; let onButtonQuestionLostFocusCallback = null;
// TODO KO add tests
const handleAnyComponentFocus = (e) => { const handleAnyComponentFocus = (e) => {
const targetType = e.target.type; const targetType = e.target.type;
if (targetType !== "radio" && targetType !== "checkbox") { if (targetType !== "radio" && targetType !== "checkbox") {

2
src/layouts/vehicle-parts/vehicle-parts.spec.js
View file

@ -148,7 +148,7 @@ describe("vehicle-parts.vue", () => {
expect(arePagePrerequisitesValid).toBe(true); expect(arePagePrerequisitesValid).toBe(true);
}); });
test.only("Initial data, should populate this.selectedGlassParts", async () => { test("Initial data, should populate this.selectedGlassParts", async () => {
//Arrange //Arrange
store.getters.pageData.mockReturnValue(basePartResponse); store.getters.pageData.mockReturnValue(basePartResponse);

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

@ -1,81 +1,234 @@
import { mount } from "@vue/test-utils";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
describe("input-button-wrapper-mixin", () => { describe("input-button-wrapper-mixin", () => {
describe("mouse clicks", () => { describe("mouse clicks", () => {
describe("checkbox", () => { describe("checkbox", () => {
test.todo("clicking once checks the baseInputButton"); test("click on both => both are selected", async () => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: true,
},
});
test.todo("clicking twice unchecks the baseInputButton"); // 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([]);
test.todo( await inputButtonOne.find("input").trigger("click");
"is initially checked => checking unchecks the baseInputButton" await inputButtonTwo.find("input").trigger("click");
);
test.todo("clicked => correct event and value are emitted"); // 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"]);
});
}); });
describe("radio", () => { describe("radio", () => {
test.todo("clicking once selects the baseInputButton"); test("click on both => last clicked is selected", async () => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
mockData: {
isMultiSelect: false,
},
});
test.todo("clicking twice keeps the baseInputButton selected"); // 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("");
test.todo( await inputButtonOne.find("input").trigger("click");
"is initially selected => click keeps the baseInputButton selected" await inputButtonTwo.find("input").trigger("click");
);
test.todo("clicked => correct event and value are emitted"); // 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");
});
}); });
}); });
describe("keyboard navigation and", () => { describe("initial values", () => {
describe("checkbox", () => { describe("checkbox", () => {
test.todo( const defaultCheckedCases = [
"focus on a checkbox => inputButtonClicked is not emitted" [["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,
},
});
test.todo( // Act
"blur from a checkbox => inputButtonClicked is not emitted" const buttonWrappers = wrapper.findAllComponents({
); name: "baseInputButtonWrapper",
});
const inputs = wrapper.findAll("input");
const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1);
test.todo( // Assert
"focus and click space on a checkbox => inputButtonClicked is emitted with correct value" expect(inputButtonOne.vm.isMultiSelect).toBe(true);
); expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
test.todo( expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
"focus and click space on a checkbox that is already checked => inputButtonClicked is emitted with correct value" expect(wrapper.vm.value).toEqual(modelValue);
); }
test.todo(
"focus and click enter on a checkbox => inputButtonClicked is emitted with correct value"
);
test.todo(
"focus and click enter on a checkbox that is already checked => inputButtonClicked is emitted with correct value"
); );
}); });
describe("radio", () => { describe("radio", () => {
test.todo( const defaultCheckedCases = [
"focus on a radio button => inputButtonClicked is not emitted" ["", 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,
},
});
test.todo( // Act
"blur from a radio button => inputButtonClicked is not emitted" const buttonWrappers = wrapper.findAllComponents({
); name: "baseInputButtonWrapper",
});
const inputs = wrapper.findAll("input");
const inputButtonOne = buttonWrappers.at(0);
const inputButtonTwo = buttonWrappers.at(1);
test.todo( // Assert
"focus and click space on a radio button => inputButtonClicked is emitted with correct value" expect(inputButtonOne.vm.isMultiSelect).toBe(false);
); expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
test.todo( expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
"focus and click space on a radio button that is already selected => inputButtonClicked is emitted with correct value" expect(wrapper.vm.value).toEqual(modelValue);
); }
test.todo(
"focus and click enter on a radio button => inputButtonClicked is emitted with correct value"
);
test.todo(
"focus and click enter on a radio button that is already selected => inputButtonClicked is emitted with correct value"
); );
}); });
}); });
}); });
function setupBaseInputButtonWrapper({ mockData = {} }) {
const originalData = baseInputButton.data();
baseInputButton.data = () => {
return {
...originalData,
// $route: {
// query: {
// fmgPage: "myPage",
// },
// },
};
};
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 },
},
{}
);
return { wrapper };
}

16
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -1,7 +1,5 @@
import { shallowMount, mount } from "@vue/test-utils"; import { mount } from "@vue/test-utils";
import listButtonHorizontal from "./list-button-horizontal"; import listButtonHorizontal from "./list-button-horizontal";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
describe("list-button-horizontal.vue", () => { describe("list-button-horizontal.vue", () => {
@ -37,8 +35,8 @@ describe("list-button-horizontal.vue", () => {
expect(input.attributes().type).toEqual("radio"); expect(input.attributes().type).toEqual("radio");
}); });
// TODO KO const selectedValues = ["something", ["test"]]
it.skip("Should emit button value on click", async () => { it.each(selectedValues)("Should emit button value on click", async (selectedValue) => {
// Act // Act
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
@ -58,11 +56,11 @@ describe("list-button-horizontal.vue", () => {
}); });
// Act // Act
wrapper.vm.handleAnswerChange("test"); wrapper.vm.selectedValue = selectedValue;
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
// Assert // Assert
expect(wrapper.emitted()["change"][0]).toEqual(["test"]); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(selectedValue);
}); });
}); });
@ -171,7 +169,7 @@ describe("list-button-horizontal.vue", () => {
propsData: { propsData: {
buttonLabel: "Surprise!", buttonLabel: "Surprise!",
buttonLabelSubCopy: "Super duper surprise :)", buttonLabelSubCopy: "Super duper surprise :)",
screenReaderOnlyText: "Tests are fun!" screenReaderOnlyText: "Tests are fun!",
}, },
}, },
}); });
@ -193,7 +191,7 @@ function setupMocks({ mockData }) {
...mockData.propsData, ...mockData.propsData,
groupName: "my-group", groupName: "my-group",
modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5", modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
value: mockData.propsData?.isMultiSelect ? ["4"] : "4" value: mockData.propsData?.isMultiSelect ? ["4"] : "4",
}, },
mixins: [inputButtonWrapperMixin], mixins: [inputButtonWrapperMixin],
}); });

73
src/ux-components/list-button/list-button.spec.js
View file

@ -1,11 +1,9 @@
import { shallowMount, mount } from "@vue/test-utils"; import { mount } from "@vue/test-utils";
import listButton from "./list-button"; import listButton from "./list-button";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics"; import { GaActions } from "@/constants/analytics";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
// TODO KO describe("list-button.vue", () => {
describe.skip("list-button.vue", () => {
describe("loader", () => { describe("loader", () => {
it("selectingInitiatesLoad is true and answer is changed => show the loader", async () => { it("selectingInitiatesLoad is true and answer is changed => show the loader", async () => {
// Act // Act
@ -25,16 +23,17 @@ describe.skip("list-button.vue", () => {
}); });
// Act // Act
wrapper.vm.handleAnswerChange("something"); wrapper.vm.selectedValue = "something";
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
// Assert // Assert
console.log(wrapper.html())
const loader = wrapper.findComponent({ name: "loader" }); const loader = wrapper.findComponent({ name: "loader" });
expect(loader.exists()).toBe(true); expect(loader.exists()).toBe(true);
}); });
it("Should return loader color", async () => { it("Should return loader color", async () => {
// Act // Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
global: { global: {
@ -52,8 +51,8 @@ describe.skip("list-button.vue", () => {
}); });
// Act // Act
wrapper.vm.handleAnswerChange("something"); wrapper.vm.selectedValue = "something";
await nextTick(); await wrapper.vm.$nextTick();
// Assert // Assert
const loader = wrapper.findComponent({ name: "loader" }); const loader = wrapper.findComponent({ name: "loader" });
@ -79,8 +78,8 @@ describe.skip("list-button.vue", () => {
}); });
// Act // Act
wrapper.vm.handleAnswerChange("test"); wrapper.vm.selectedValue = "something";
await nextTick(); await wrapper.vm.$nextTick();
// Assert // Assert
const loader = wrapper.findComponent({ name: "loader" }); const loader = wrapper.findComponent({ name: "loader" });
@ -120,7 +119,7 @@ describe.skip("list-button.vue", () => {
expect(input.attributes().type).toEqual("radio"); expect(input.attributes().type).toEqual("radio");
}); });
it("Should emit button value on click", async () => { it("(Radio) Should emit button value on selectedValue change", async () => {
// Act // Act
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mockData: { mockData: {
@ -133,18 +132,44 @@ describe.skip("list-button.vue", () => {
buttonImage: "windshield-damage.svg", buttonImage: "windshield-damage.svg",
isRequired: true, isRequired: true,
isWide: false, isWide: false,
modelValue: ["List Card Checkbox"], modelValue: "List Card Checkbox",
buttonID: "list-card-id", buttonID: "list-card-id",
}, },
}, },
}); });
// Act // Act
wrapper.vm.handleAnswerChange("test"); wrapper.vm.selectedValue = "test";
await wrapper.vm.$nextTick();
// Assert // Assert
expect(wrapper.emitted()["change"][0]).toEqual(["test"]); expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("test");
});
it("(Checkbox) Should emit button value on selectedValue change", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: "List Card Checkbox",
buttonID: "list-card-id",
isMultiSelect: true,
},
},
});
// Act
wrapper.vm.selectedValue = ["test"];
// Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["test"]);
}); });
}); });
@ -155,6 +180,9 @@ describe.skip("list-button.vue", () => {
mockData: { mockData: {
propsData: { propsData: {
buttonLabel: "Surprise!", buttonLabel: "Surprise!",
modelValue: "",
groupName: "groupName",
value: "myValue"
}, },
}, },
}); });
@ -172,6 +200,9 @@ describe.skip("list-button.vue", () => {
propsData: { propsData: {
buttonLabel: "Surprise!", buttonLabel: "Surprise!",
buttonLabelSubCopy: "Super duper surprise :)", buttonLabelSubCopy: "Super duper surprise :)",
modelValue: "",
groupName: "groupName",
value: "myValue"
}, },
}, },
}); });
@ -190,6 +221,9 @@ describe.skip("list-button.vue", () => {
buttonLabel: "Surprise!", buttonLabel: "Surprise!",
buttonLabelSubCopy: "Super duper surprise :)", buttonLabelSubCopy: "Super duper surprise :)",
screenReaderOnlyText: "Tests are fun!", screenReaderOnlyText: "Tests are fun!",
modelValue: "",
groupName: "groupName",
value: "myValue"
}, },
}, },
}); });
@ -208,6 +242,9 @@ describe.skip("list-button.vue", () => {
mockData: { mockData: {
propsData: { propsData: {
screenReaderOnlyText: "Screen Reader Only Text", screenReaderOnlyText: "Screen Reader Only Text",
modelValue: "",
groupName: "groupName",
value: "myValue"
}, },
}, },
}); });
@ -224,6 +261,9 @@ describe.skip("list-button.vue", () => {
mockData: { mockData: {
propsData: { propsData: {
textPosition: "text-center", textPosition: "text-center",
modelValue: "",
groupName: "groupName",
value: "myValue"
}, },
}, },
}); });
@ -240,6 +280,9 @@ describe.skip("list-button.vue", () => {
mockData: { mockData: {
propsData: { propsData: {
isRequired: true, isRequired: true,
groupName: "groupName",
modelValue: "",
value: "myValue",
}, },
}, },
}); });

1
src/ux-components/list-button/list-button.vue
View file

@ -52,6 +52,7 @@ export default {
}, },
preHandleAnswerChange() { preHandleAnswerChange() {
if (this.selectingInitiatesLoad) { if (this.selectingInitiatesLoad) {
console.log("DISPLAY LOADER")
this.displayLoader(); this.displayLoader();
} }
}, },