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

CSR-762 Fix broken/remove outdated tests

Browse source
This commit is contained in:
Katie 2022-09-30 14:13:35 -04:00
parent 7f64513a03
commit 37207cab3c
11 changed files with 451 additions and 667 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
jest.config.js
View file

@ -28,8 +28,7 @@ module.exports = {
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
coverageThreshold: { coverageThreshold: {
global: { global: {
// TODO KO statements: 85,
statements: 55,
// Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90 // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
}, },
}, },

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

@ -2,189 +2,170 @@ import { shallowMount } from "@vue/test-utils";
import buttonQuestion from "@/common-components/button-question/button-question"; import buttonQuestion from "@/common-components/button-question/button-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { getMountOptions } from "@/helpers/unit-test-helper.js";
jest.mock("@/store", () => { return {}; }, { virtual: true }); jest.mock(
"@/store",
() => {
return {};
},
{ virtual: true }
);
// TODO KO describe("buttonQuestion.vue", () => {
describe.skip("buttonQuestion.vue", () => {
it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => { it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
// Act // Act
const wrapper = shallowMount(buttonQuestion, { const wrapper = shallowMount(buttonQuestion, {
propsData: { propsData: {
isOverflowScrollable: true, isOverflowScrollable: true,
groupName: "group-name" groupName: "group-name",
} },
}); });
// Assert // Assert
const fieldSet = wrapper.find('fieldset'); const fieldSet = wrapper.find("fieldset");
expect(fieldSet.classes()).toContain("overflow-scroll"); expect(fieldSet.classes()).toContain("overflow-scroll");
}); });
}); });
// describe("buttonQuestion.vue", () => { describe("buttonQuestion.vue", () => {
// it("Fieldset classes should contain row if button type is listCard", () => { it("Fieldset classes should contain row if button type is listCard", () => {
// // Act // Act
// const wrapper = shallowMount(buttonQuestion, { const wrapper = shallowMount(buttonQuestion, {
// propsData: { propsData: {
// buttonType: "listCard", buttonType: "listCard",
// groupName: "group-name" groupName: "group-name",
// } },
// }); });
// // Assert // Assert
// const Div = wrapper.find('fieldset div'); const Div = wrapper.find("fieldset div");
// expect(Div.classes()).toContain("row"); expect(Div.classes()).toContain("row");
// }); });
// }); });
// describe("buttonQuestion.vue", () => { describe("buttonQuestion.vue", () => {
// it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => { it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
// // Act // Act
// const wrapper = shallowMount(buttonQuestion, { const wrapper = shallowMount(buttonQuestion, {
// propsData: { propsData: {
// buttonType: "listButtonHorizontal", buttonType: "listButtonHorizontal",
// groupName: "group-name" groupName: "group-name",
// } },
// }); });
// // Assert // Assert
// const Div = wrapper.find('fieldset div'); const Div = wrapper.find("fieldset div");
// expect(Div.classes()).toContain("d-flex"); expect(Div.classes()).toContain("d-flex");
// }); });
// }); });
// describe("buttonQuestion.vue", () => { describe("buttonQuestion.vue", () => {
// it("Fieldset classes should contain ui-radio if button type is radio", () => { it("Fieldset classes should contain ui-radio if button type is radio", () => {
// // Act // Act
// const wrapper = shallowMount(buttonQuestion, { const wrapper = shallowMount(buttonQuestion, {
// propsData: { propsData: {
// buttonType: "radio", buttonType: "radio",
// groupName: "group-name" groupName: "group-name",
// } },
// }); });
// // Assert // Assert
// const Div = wrapper.find('fieldset div'); const Div = wrapper.find("fieldset div");
// expect(Div.classes()).toContain("ui-radio"); expect(Div.classes()).toContain("ui-radio");
// }); });
// }); });
// testing a computed property
describe("buttonQuestion.vue", () => {
it("getColLength should return '12' if prop isWide is set to true", () => {
// Act
const localThis = { isWide: true };
// // testing a computed property expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12");
// describe("buttonQuestion.vue", () => { });
// it("getColLength should return '12' if prop isWide is set to true", () => { });
// // Act
// const localThis = { isWide: true }
// expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12"); describe("buttonQuestion.vue", () => {
// }); it("getColLength should return '' if prop isWide is set to false", () => {
// }); // Act
const localThis = {
isWide: false,
answers: ["a", "b"],
groupName: "group-name",
};
// describe("buttonQuestion.vue", () => { expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("");
// it("getColLength should return '' if prop isWide is set to false", () => { });
// // Act });
// const localThis = {
// isWide: false,
// answers: ['a', 'b'],
// groupName: "group-name"
// }
// expect(buttonQuestion.computed.getColLength.call(localThis)).toBe(""); describe("buttonQuestion.vue", () => {
// }); it("Should return answer.Text if prop useTextForValue is true", async () => {
// }); // Act
const localThis = { useTextForValue: true };
const answer = { Name: "testName", Text: "testText" };
// describe("buttonQuestion.vue", () => { // Assert
// it("Should return answer.Text if prop useTextForValue is true", async () => { expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe(
// // Act "testText"
// const localThis = { useTextForValue: true }; );
// const answer = { 'Name': 'testName', 'Text': 'testText' }; });
});
// // Assert describe("buttonQuestion.vue", () => {
// expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testText'); it("Should return answer.Name if prop useTextForValue is false and there's not buttonLabel and answer.Name exists", async () => {
// }); // Act
// }); const localThis = { useTextForValue: false };
const answer = { Name: "testName", Text: "testText" };
// describe("buttonQuestion.vue", () => { // Assert
// it("Should return answer.Name if prop useTextForValue is false and answer.Name exists", async () => { expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe(
// // Act "testName"
// const localThis = { useTextForValue: false }; );
// const answer = { 'Name': 'testName', 'Text': 'testText' }; });
});
// // Assert describe("buttonQuestion.vue", () => {
// expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testName'); describe("handleAnswerChange", () => {
// }); test("is radio => should emit captured value", async () => {
// }); // Act
const wrapper = shallowMount(
buttonQuestion,
setupMocks({ propsData: { groupName: "group-name" } })
);
await wrapper.setProps({
answers: ["2022", "2021", "2020"],
isMultiSelect: false,
modelValue: "",
});
const val = "2021";
wrapper.vm.handleAnswerChange(val);
// describe("buttonQuestion.vue", () => { // Assert
// it("Should trigger event modelValue change to new value on when radio button selected", async () => { expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]);
// // Act });
// const wrapper = shallowMount(buttonQuestion, setupMocks({propsData: {groupName: "group-name"}}));
// await wrapper.setProps({
// answers: ["2022", "2021", "2020"],
// isMultiSelect: false,
// modelValue: []
// });
// const val = { checkValue: true, value: "2021", }
// wrapper.vm.handleCheckedChanged(val);
// // Assert
// expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
// });
// });
// describe("buttonQuestion.vue", () => { test("is checkbox => should emit captured value", async () => {
// it("Should add values to array on checkbox click", () => { const wrapper = shallowMount(
// // Act buttonQuestion,
// const wrapper = shallowMount(buttonQuestion, setupMocks({ setupMocks({ propsData: { groupName: "group-name" } })
// propsData: { );
// modelValue: ["2022", "2021", "2020"], await wrapper.setProps({
// isMultiSelect: true, answers: ["2022", "2021", "2020"],
// groupName: "group-name" isMultiSelect: false,
// } modelValue: "",
// })); });
// const val = { checkValue: true, value: "2019", } const val = ["2022", "2021", , "2019", "2020"];
// wrapper.vm.handleCheckedChanged(val); wrapper.vm.handleAnswerChange(val);
// // Assert
// expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
// });
// });
// describe("buttonQuestion.vue", () => { // Assert
// it("Should add a value to this.selectedValues if prop isMultiSelect is true, checkValue is true and this.selectedValues already exists", () => { expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
// // Act ["2022", "2021", , "2019", "2020"],
// const wrapper = shallowMount(buttonQuestion, setupMocks({ ]);
// propsData: { });
// isMultiSelect: true, });
// modelValue: ['a', 'b'], });
// groupName: "group-name"
// }
// }));
// const val = { checkValue: true, value: "2021", }
// wrapper.vm.handleCheckedChanged(val);
// // Assert
// expect(wrapper.vm.selectedValues).toEqual(["a", "b", "2021"]);
// });
// });
// describe("buttonQuestion.vue", () => {
// it("Should remove a value to this.selectedValues if prop isMultiSelect is true, checkValue is false and this.selectedValues already exists", () => {
// // Act
// const wrapper = shallowMount(buttonQuestion, setupMocks({
// propsData: {
// isMultiSelect: true,
// modelValue: ['a', 'b'],
// groupName: "group-name"
// }
// }));
// const val = { checkValue: false, value: "a", }
// wrapper.vm.handleCheckedChanged(val);
// // Assert
// expect(wrapper.vm.selectedValues).toEqual(["b"]);
// });
// });
function setupMocks(mountOptionsMockData = {}) { function setupMocks(mountOptionsMockData = {}) {
const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } }; const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } };
const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData)); const baseMountOptions = getMountOptions(
Object.assign(defaultMountOptions, mountOptionsMockData)
);
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
return allMountOptions; return allMountOptions;

5
src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
View file

@ -36,8 +36,7 @@ describe("replace-options-question.vue", () => {
}); });
describe("replace-options-question.vue", () => { describe("replace-options-question.vue", () => {
// TODO KO test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedReplaceOptions", async () => {
test.skip("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedValues", async () => {
//Arrange //Arrange
const { wrapper, cmsContent, replaceOptions const { wrapper, cmsContent, replaceOptions
@ -57,7 +56,7 @@ describe("replace-options-question.vue", () => {
//Act //Act
wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm); wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);
expect(wrapper.vm.selectedValues).toEqual([]); expect(wrapper.vm.selectedReplaceOptions).toEqual([]);
}); });
}); });

2
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -57,7 +57,7 @@ export default ({
name: "sideDoorOptions", name: "sideDoorOptions",
props: { props: {
groupName: String, groupName: String,
modelValue: Array, modelValue: [Array, Object], // TODO Does this take an array?
selectedDamageLocations: Array, selectedDamageLocations: Array,
cmsWidgetName: String, cmsWidgetName: String,
}, },

43
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -55,8 +55,7 @@ jest.mock("@/store", () => ({
}, },
})); }));
// TODO KO describe("vehicle-damage.vue", () => {
describe.skip("vehicle-damage.vue", () => {
describe("navigation", () => { describe("navigation", () => {
test("BackButtonAction triggers a router.navigateWithoutSaving change", async () => { test("BackButtonAction triggers a router.navigateWithoutSaving change", async () => {
@ -130,20 +129,20 @@ describe.skip("vehicle-damage.vue", () => {
}, },
}); });
wrapper.vm.selectedDamageLocations = ["Windshield", "SideDoor", "RearWindow"]; wrapper.setData({
wrapper.vm.selectedWindshieldOptions = { selectedDamageLocations: ["Windshield", "SideDoor", "RearWindow"],
selectedWindshieldChipCount: null, selectedWindshieldOptions: {
selectedWindshieldReplaceOptions: ["Single"], selectedWindshieldChipCount: null,
selectedWindshieldDamageType: "Replace" selectedWindshieldReplaceOptions: ["Single"],
}; selectedWindshieldDamageType: "Replace"
},
wrapper.vm.sideDoorOptionsData = { sideDoorOptionsData: {
selectedDoorSides: ["DriverSide", "PassengerSide"], selectedDoorSides: ["DriverSide", "PassengerSide"],
selectedDriverSideReplaceOptions: ["Back"], selectedDriverSideReplaceOptions: ["Back"],
selectedPassengerSideReplaceOptions: ["Quarter"] selectedPassengerSideReplaceOptions: ["Quarter"]
}; },
selectedRearReplaceOptions: "Stationary",
wrapper.vm.selectedRearReplaceOptions = ["Stationary"]; })
const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" }, { glassLocation: "Driver", glassName: "Back" }, const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" }, { glassLocation: "Driver", glassName: "Back" },
{ glassLocation: "Passenger", glassName: "Quarter" }, { glassLocation: "Rear", glassName: "Stationary" }]; { glassLocation: "Passenger", glassName: "Quarter" }, { glassLocation: "Rear", glassName: "Stationary" }];
@ -520,19 +519,19 @@ describe.skip("vehicle-damage.vue", () => {
const storeWindshieldOptions = [[1, false, "Windshield", "Single", { const storeWindshieldOptions = [[1, false, "Windshield", "Single", {
selectedWindshieldDamageType: damageLocationsSelected.REPLACE, selectedWindshieldDamageType: damageLocationsSelected.REPLACE,
selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE] selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]
}], }],
[2, false, "Windshield", "Driver", { [2, false, "Windshield", "Driver", {
selectedWindshieldDamageType: damageLocationsSelected.REPLACE, selectedWindshieldDamageType: damageLocationsSelected.REPLACE,
selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER] selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]
}], }],
[3, false, "Windshield", "Passenger", { [3, false, "Windshield", "Passenger", {
selectedWindshieldDamageType: damageLocationsSelected.REPLACE, selectedWindshieldDamageType: damageLocationsSelected.REPLACE,
selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER] selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]
}], }],
[4, true, "", "", { [4, true, "", "", {
selectedWindshieldDamageType: damageLocationsSelected.REPAIR, selectedWindshieldDamageType: damageLocationsSelected.REPAIR,
selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: [] selectedWindshieldChipCount: 2, selectedWindshieldReplaceOptions: []
}] }]
]; ];
test.each(storeWindshieldOptions)("getWindshieldOptionsFromStore test #%s", async (testNum, isRepair, damageLocation, damageName, expectedWindshieldOptions) => { test.each(storeWindshieldOptions)("getWindshieldOptionsFromStore test #%s", async (testNum, isRepair, damageLocation, damageName, expectedWindshieldOptions) => {
@ -619,8 +618,8 @@ describe.skip("vehicle-damage.vue", () => {
expect(glassSelections).toEqual(expectedGlass); expect(glassSelections).toEqual(expectedGlass);
}); });
const rearReplaceOptions = [["Rear", "Stationary", [damageLocationsSelected.STATIONARY]], const rearReplaceOptions = [["Rear", "Stationary", damageLocationsSelected.STATIONARY],
["Rear", "Slider", [damageLocationsSelected.SLIDER]] ["Rear", "Slider", damageLocationsSelected.SLIDER]
]; ];
test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => { test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {

2
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -83,7 +83,7 @@ export default ({
}, },
props: { props: {
modelValue: String, modelValue: [Object, String], // TODO Does this take a string?
selectedDamageLocations: Array, selectedDamageLocations: Array,
hasRepairReplaceConflict: Boolean, hasRepairReplaceConflict: Boolean,
hasSplitSingleConflict: Boolean, hasSplitSingleConflict: Boolean,

4
src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js
View file

@ -18,9 +18,7 @@ const featureListData = {
modelValueProp: {} modelValueProp: {}
} }
// TODO KO describe("glass-part-question.vue", () => {
describe.skip("glass-part-question.vue", () => {
test("Part data passed in, should map data for ButtonQuestion (radio type)", async () => { test("Part data passed in, should map data for ButtonQuestion (radio type)", async () => {
//Arrange //Arrange

5
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -63,7 +63,10 @@ export default {
glassLocation: String, glassLocation: String,
colorAnswers: Array, colorAnswers: Array,
modelValue: Object, modelValue: Object,
alreadyPopulatedPartsData: Array alreadyPopulatedPartsData: {
type: Array,
default: () => []
}
}, },
mounted() { mounted() {
this.LoadPreselectedValues(); this.LoadPreselectedValues();

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

@ -1,272 +1,128 @@
import { shallowMount } from "@vue/test-utils"; import { shallowMount, mount } from "@vue/test-utils";
import listButtonHorizontal from "./list-button-horizontal"; import listButtonHorizontal from "./list-button-horizontal";
import { nextTick } from "vue"; import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics"; import { GaActions } from "@/constants/analytics";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
// TODO KO // TODO KO
describe.skip("list-button-horizontal.vue", () => { describe("list-button-horizontal.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => { describe("baseInputButton checks", () => {
// Act it("Should return input type checkbox if isMultiSelect is true", async () => {
const wrapper = shallowMount(listButtonHorizontal, { // Act
propsData: { const { wrapper } = setupMocks({
isMultiSelect: true, mockData: {
}, propsData: {
isMultiSelect: true,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("checkbox");
}); });
// Assert it("Should return input type radio if isMultiSelect is false or not specified", async () => {
const input = wrapper.find("input"); // Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isMultiSelect: false,
},
},
});
expect(input.attributes().type).toEqual("checkbox"); // Assert
}); const input = wrapper.find("input");
expect(input.attributes().type).toEqual("radio");
it("Should return input type radio if isMultiSelect is false or not specified", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isMultiSelect: false,
},
}); });
// Assert it("Should emit button value on click", async () => {
const input = wrapper.find("input"); // 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",
},
},
});
expect(input.attributes().type).toEqual("radio"); // Act
wrapper.vm.handleAnswerChange("test");
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.emitted()["change"][0]).toEqual(["test"]);
});
}); });
it("Should return primary label text (buttonID)", async () => { describe("styling/UI", () => {
// Act it("Should return screen reader text", async () => {
const wrapper = shallowMount(listButtonHorizontal, { // Act
propsData: { const { wrapper } = setupMocks({
buttonID: "List Card Checkbox", mockData: {
}, propsData: {
screenReaderOnlyText: "Screen Reader Only Text",
},
},
});
// Assert
const paragraph = wrapper.find("span.sr-only");
expect(paragraph.text()).toEqual("Screen Reader Only Text");
}); });
// Assert it("Should return text alignment class", async () => {
const label = wrapper.find("label"); // Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
textPosition: "text-center",
},
},
});
expect(label.attributes().for).toEqual("List Card Checkbox"); // Assert
}); const paragraph = wrapper.find("span.m-0");
it("Should return screen reader text", async () => { expect(paragraph.attributes("class")).toContain("text-center");
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
screenReaderOnlyText: "Screen Reader Only Text",
},
}); });
// Assert it("Should return aria-required state", async () => {
const paragraph = wrapper.find("span.sr-only"); // Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isRequired: true,
},
},
});
expect(paragraph.text()).toEqual("Screen Reader Only Text"); // Assert
}); const input = wrapper.find("input");
it("Should return text alignment class", async () => { expect(input.attributes()["aria-required"]).toEqual("true");
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
textPosition: "text-center",
},
}); });
// Assert
const paragraph = wrapper.find("span.m-0");
expect(paragraph.attributes("class")).toContain("text-center");
}); });
it("Should return aria-required state", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isRequired: true,
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes()["aria-required"]).toEqual("true");
});
it("Should return loader enabled true", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
selectingInitiatesLoad: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.exists()).toBe(true);
});
it("Should return loader color", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
loaderColor: "blue",
selectingInitiatesLoad: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("class")).toContain("blue");
});
it("Should return loader position", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
loaderPosition: "right",
selectingInitiatesLoad: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("class")).toContain("right");
});
it("Should emit button value on click", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
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"],
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: undefined, checkValue: false}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
isMultiSelect: false,
value: "Car-Front",
selectedValues: ["Car-Front"]
},
});
// Assert
expect(wrapper.vm.checkValue).toEqual(true);
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
selectingInitiatesLoad: false,
},
});
// Assert
wrapper.vm.handleInputChange();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
isMultiSelect: true,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
selectingInitiatesLoad: false,
isMultiSelect: false,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
}); });
function setupMocks({ mockData }) {
console.log(mockData);
const wrapper = mount(listButtonHorizontal, {
...mockData,
mixins: [inputButtonWrapperMixin],
});
return { wrapper };
}

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

@ -1,264 +1,209 @@
import { shallowMount } from "@vue/test-utils"; import { shallowMount, mount } from "@vue/test-utils";
import listButton from "./list-button"; import listButton from "./list-button";
import { nextTick } from "vue"; import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics"; import { GaActions } from "@/constants/analytics";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
// TODO KO describe("list-button.vue", () => {
describe.skip("list-button.vue", () => { describe("loader", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => { it("Should return loader enabled true", async () => {
// Act // Act
const wrapper = shallowMount(listButton, { const { wrapper } = setupMocks({
propsData: { mockData: {
isMultiSelect: true, global: {
}, mocks: {
$route: { query: { fmgPage: "page-name" } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
},
},
propsData: {
selectingInitiatesLoad: true,
},
},
});
// Act
wrapper.vm.handleAnswerChange("something");
await wrapper.vm.$nextTick();
// Assert
const loader = wrapper.findComponent({ name: "loader" });
expect(loader.exists()).toBe(true);
}); });
// Assert it("Should return loader color", async () => {
const input = wrapper.find("input"); // Act
const { wrapper } = setupMocks({
mockData: {
global: {
mocks: {
$route: { query: { fmgPage: "page-name" } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
},
},
propsData: {
loaderColor: "blue",
selectingInitiatesLoad: true,
},
},
});
expect(input.attributes().type).toEqual("checkbox"); // Act
}); wrapper.vm.handleAnswerChange("something");
await nextTick();
it("Should return input type radio if isMultiSelect is false or not specified", async () => { // Assert
// Act const loader = wrapper.findComponent({ name: "loader" });
const wrapper = shallowMount(listButton, { expect(loader.attributes("class")).toContain("blue");
propsData: {
isMultiSelect: false,
},
}); });
// Assert it("Should return loader position", async () => {
const input = wrapper.find("input"); // Act
const { wrapper } = setupMocks({
mockData: {
global: {
mocks: {
$route: { query: { fmgPage: "page-name" } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
},
},
propsData: {
loaderPosition: "right",
selectingInitiatesLoad: true,
},
},
});
expect(input.attributes().type).toEqual("radio"); // Act
wrapper.vm.handleAnswerChange("test");
await nextTick();
// Assert
const loader = wrapper.findComponent({ name: "loader" });
expect(loader.attributes("class")).toContain("right");
});
}); });
it("Should return primary label text (buttonID)", async () => { describe("baseInputButton checks", () => {
// Act it("Should return input type checkbox if isMultiSelect is true", async () => {
const wrapper = shallowMount(listButton, { // Act
propsData: { const { wrapper } = setupMocks({
buttonID: "List Card Checkbox", mockData: {
}, propsData: {
isMultiSelect: true,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("checkbox");
}); });
// Assert it("Should return input type radio if isMultiSelect is false or not specified", async () => {
const label = wrapper.find("label"); // Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isMultiSelect: false,
},
},
});
expect(label.attributes().for).toEqual("List Card Checkbox"); // Assert
}); const input = wrapper.find("input");
expect(input.attributes().type).toEqual("radio");
it("Should return screen reader text", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
screenReaderOnlyText: "Screen Reader Only Text",
},
}); });
// Assert it("Should emit button value on click", async () => {
const paragraph = wrapper.find("span.sr-only"); // 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",
},
},
});
expect(paragraph.text()).toEqual("Screen Reader Only Text"); // Act
wrapper.vm.handleAnswerChange("test");
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.emitted()["change"][0]).toEqual(["test"]);
});
}); });
it("Should return text alignment class", async () => { describe("styling/UI", () => {
// Act it("Should return screen reader text", async () => {
const wrapper = shallowMount(listButton, { // Act
propsData: { const { wrapper } = setupMocks({
textPosition: "text-center", mockData: {
}, propsData: {
screenReaderOnlyText: "Screen Reader Only Text",
},
},
});
// Assert
const paragraph = wrapper.find("span.sr-only");
expect(paragraph.text()).toEqual("Screen Reader Only Text");
}); });
// Assert it("Should return text alignment class", async () => {
const paragraph = wrapper.find("span.m-0"); // Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
textPosition: "text-center",
},
},
});
expect(paragraph.attributes("class")).toContain("text-center"); // Assert
}); const paragraph = wrapper.find("span.m-0");
it("Should return aria-required state", async () => { expect(paragraph.attributes("class")).toContain("text-center");
// Act
const wrapper = shallowMount(listButton, {
propsData: {
isRequired: true,
},
}); });
// Assert it("Should return aria-required state", async () => {
const input = wrapper.find("input"); // Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isRequired: true,
},
},
});
expect(input.attributes()["aria-required"]).toEqual("true"); // Assert
}); const input = wrapper.find("input");
it("Should return loader enabled true", async () => { expect(input.attributes()["aria-required"]).toEqual("true");
// Act
const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
selectingInitiatesLoad: true,
},
}); });
// Assert
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.exists()).toBe(true);
}); });
it("Should return loader color", async () => {
// Act
const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
loaderColor: "blue",
selectingInitiatesLoad: true,
},
});
// Assert
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("class")).toContain("blue");
});
it("Should return loader position", async () => {
// Act
const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: {
loaderPosition: "right",
selectingInitiatesLoad: true,
},
});
// Assert
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.triggerButton();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("class")).toContain("right");
});
it("Should emit button value on click", async () => {
// Act
const wrapper = shallowMount(listButton, {
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'
},
});
wrapper.vm.handleCheckChange();
// Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: false, buttonId: 'list-card-id'}]);
});
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
selectedValues: "Car-Front"
},
});
// Assert
expect(wrapper.componentVM.checkValue).toEqual(false);
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
selectingInitiatesLoad: false,
},
});
// Assert
wrapper.vm.handleInputChange();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
isMultiSelect: true,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
});
it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
selectingInitiatesLoad: false,
isMultiSelect: false,
},
});
// Assert
wrapper.vm.handleKeyupArrow();
await nextTick();
expect(wrapper.vm.handleCheckChange).toBeCalled;
});
}); });
function setupMocks({ mockData }) {
console.log(mockData);
const wrapper = mount(listButton, {
...mockData,
mixins: [inputButtonWrapperMixin],
});
return { wrapper };
}

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

@ -48,10 +48,14 @@ export default {
}, },
methods: { methods: {
displayLoader() { displayLoader() {
console.log("Display me!")
console.log(this.selectingInitiatesLoad)
this.isLoaderDisplayed = true; this.isLoaderDisplayed = true;
}, },
preHandleAnswerChange() { preHandleAnswerChange() {
console.log("HIII")
if (this.selectingInitiatesLoad) { if (this.selectingInitiatesLoad) {
console.log("EYY")
this.displayLoader(); this.displayLoader();
} }
}, },