From 37207cab3c8401d4cba60bf5bd046e216da69cbf Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 30 Sep 2022 14:13:35 -0400 Subject: [PATCH] CSR-762 Fix broken/remove outdated tests --- jest.config.js | 3 +- .../button-question/button-question.spec.js | 289 ++++++------- .../replace-options-question.spec.js | 5 +- .../side-door-options/side-door-options.vue | 2 +- .../vehicle-damage/vehicle-damage.spec.js | 43 +- .../windshield-options/windshield-options.vue | 2 +- .../glass-part-question.spec.js | 4 +- .../glass-part-question.vue | 5 +- .../list-button-horizontal.spec.js | 352 +++++---------- .../list-button/list-button.spec.js | 409 ++++++++---------- src/ux-components/list-button/list-button.vue | 4 + 11 files changed, 451 insertions(+), 667 deletions(-) diff --git a/jest.config.js b/jest.config.js index 83e6a5c70..ded486df9 100644 --- a/jest.config.js +++ b/jest.config.js @@ -28,8 +28,7 @@ module.exports = { testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { - // TODO KO - statements: 55, + statements: 85, // 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 }, }, diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index c53ced0a1..2c7a80996 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -2,189 +2,170 @@ import { shallowMount } from "@vue/test-utils"; import buttonQuestion from "@/common-components/button-question/button-question"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; -jest.mock("@/store", () => { return {}; }, { virtual: true }); +jest.mock( + "@/store", + () => { + return {}; + }, + { virtual: true } +); -// TODO KO -describe.skip("buttonQuestion.vue", () => { +describe("buttonQuestion.vue", () => { it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => { // Act const wrapper = shallowMount(buttonQuestion, { propsData: { isOverflowScrollable: true, - groupName: "group-name" - } + groupName: "group-name", + }, }); // Assert - const fieldSet = wrapper.find('fieldset'); + const fieldSet = wrapper.find("fieldset"); expect(fieldSet.classes()).toContain("overflow-scroll"); }); }); -// describe("buttonQuestion.vue", () => { -// it("Fieldset classes should contain row if button type is listCard", () => { -// // Act -// const wrapper = shallowMount(buttonQuestion, { -// propsData: { -// buttonType: "listCard", -// groupName: "group-name" -// } -// }); -// // Assert -// const Div = wrapper.find('fieldset div'); -// expect(Div.classes()).toContain("row"); -// }); -// }); +describe("buttonQuestion.vue", () => { + it("Fieldset classes should contain row if button type is listCard", () => { + // Act + const wrapper = shallowMount(buttonQuestion, { + propsData: { + buttonType: "listCard", + groupName: "group-name", + }, + }); + // Assert + const Div = wrapper.find("fieldset div"); + expect(Div.classes()).toContain("row"); + }); +}); -// describe("buttonQuestion.vue", () => { -// it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => { -// // Act -// const wrapper = shallowMount(buttonQuestion, { -// propsData: { -// buttonType: "listButtonHorizontal", -// groupName: "group-name" -// } -// }); -// // Assert -// const Div = wrapper.find('fieldset div'); -// expect(Div.classes()).toContain("d-flex"); -// }); -// }); +describe("buttonQuestion.vue", () => { + it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => { + // Act + const wrapper = shallowMount(buttonQuestion, { + propsData: { + buttonType: "listButtonHorizontal", + groupName: "group-name", + }, + }); + // Assert + const Div = wrapper.find("fieldset div"); + expect(Div.classes()).toContain("d-flex"); + }); +}); -// describe("buttonQuestion.vue", () => { -// it("Fieldset classes should contain ui-radio if button type is radio", () => { -// // Act -// const wrapper = shallowMount(buttonQuestion, { -// propsData: { -// buttonType: "radio", -// groupName: "group-name" -// } -// }); -// // Assert -// const Div = wrapper.find('fieldset div'); -// expect(Div.classes()).toContain("ui-radio"); -// }); -// }); +describe("buttonQuestion.vue", () => { + it("Fieldset classes should contain ui-radio if button type is radio", () => { + // Act + const wrapper = shallowMount(buttonQuestion, { + propsData: { + buttonType: "radio", + groupName: "group-name", + }, + }); + // Assert + const Div = wrapper.find("fieldset div"); + 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 -// 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"); + }); +}); -// 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", () => { -// 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(""); + }); +}); -// 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", () => { -// it("Should return answer.Text if prop useTextForValue is true", async () => { -// // Act -// const localThis = { useTextForValue: true }; -// const answer = { 'Name': 'testName', 'Text': 'testText' }; + // Assert + expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe( + "testText" + ); + }); +}); -// // Assert -// expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testText'); -// }); -// }); +describe("buttonQuestion.vue", () => { + 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", () => { -// it("Should return answer.Name if prop useTextForValue is false and answer.Name exists", async () => { -// // Act -// const localThis = { useTextForValue: false }; -// const answer = { 'Name': 'testName', 'Text': 'testText' }; + // Assert + expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe( + "testName" + ); + }); +}); -// // Assert -// expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testName'); -// }); -// }); +describe("buttonQuestion.vue", () => { + 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", () => { -// it("Should trigger event modelValue change to new value on when radio button selected", async () => { -// // 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"]]); -// }); -// }); + // Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]); + }); -// describe("buttonQuestion.vue", () => { -// it("Should add values to array on checkbox click", () => { -// // Act -// const wrapper = shallowMount(buttonQuestion, setupMocks({ -// propsData: { -// modelValue: ["2022", "2021", "2020"], -// isMultiSelect: true, -// groupName: "group-name" -// } -// })); -// const val = { checkValue: true, value: "2019", } -// wrapper.vm.handleCheckedChanged(val); -// // Assert -// expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]); -// }); -// }); + test("is checkbox => should emit captured value", async () => { + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ propsData: { groupName: "group-name" } }) + ); + await wrapper.setProps({ + answers: ["2022", "2021", "2020"], + isMultiSelect: false, + modelValue: "", + }); + const val = ["2022", "2021", , "2019", "2020"]; + wrapper.vm.handleAnswerChange(val); -// describe("buttonQuestion.vue", () => { -// it("Should add a value to this.selectedValues if prop isMultiSelect is true, checkValue is true and this.selectedValues already exists", () => { -// // Act -// 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"]); -// }); -// }); + // Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ + ["2022", "2021", , "2019", "2020"], + ]); + }); + }); +}); function setupMocks(mountOptionsMockData = {}) { - const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } }; - const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData)); + const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } }; + const baseMountOptions = getMountOptions( + Object.assign(defaultMountOptions, mountOptionsMockData) + ); const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); return allMountOptions; diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js index 8571f4f24..411bf4e90 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js @@ -36,8 +36,7 @@ describe("replace-options-question.vue", () => { }); describe("replace-options-question.vue", () => { - // TODO KO - test.skip("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedValues", async () => { + test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedReplaceOptions", async () => { //Arrange const { wrapper, cmsContent, replaceOptions @@ -57,7 +56,7 @@ describe("replace-options-question.vue", () => { //Act wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm); - expect(wrapper.vm.selectedValues).toEqual([]); + expect(wrapper.vm.selectedReplaceOptions).toEqual([]); }); }); diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue index c1c9ba3b3..9af96c117 100644 --- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue +++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue @@ -57,7 +57,7 @@ export default ({ name: "sideDoorOptions", props: { groupName: String, - modelValue: Array, + modelValue: [Array, Object], // TODO Does this take an array? selectedDamageLocations: Array, cmsWidgetName: String, }, diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 4109b9312..4cf6b87c0 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -55,8 +55,7 @@ jest.mock("@/store", () => ({ }, })); -// TODO KO -describe.skip("vehicle-damage.vue", () => { +describe("vehicle-damage.vue", () => { describe("navigation", () => { test("BackButtonAction triggers a router.navigateWithoutSaving change", async () => { @@ -130,20 +129,20 @@ describe.skip("vehicle-damage.vue", () => { }, }); - wrapper.vm.selectedDamageLocations = ["Windshield", "SideDoor", "RearWindow"]; - wrapper.vm.selectedWindshieldOptions = { - selectedWindshieldChipCount: null, - selectedWindshieldReplaceOptions: ["Single"], - selectedWindshieldDamageType: "Replace" - }; - - wrapper.vm.sideDoorOptionsData = { - selectedDoorSides: ["DriverSide", "PassengerSide"], - selectedDriverSideReplaceOptions: ["Back"], - selectedPassengerSideReplaceOptions: ["Quarter"] - }; - - wrapper.vm.selectedRearReplaceOptions = ["Stationary"]; + wrapper.setData({ + selectedDamageLocations: ["Windshield", "SideDoor", "RearWindow"], + selectedWindshieldOptions: { + selectedWindshieldChipCount: null, + selectedWindshieldReplaceOptions: ["Single"], + selectedWindshieldDamageType: "Replace" + }, + sideDoorOptionsData: { + selectedDoorSides: ["DriverSide", "PassengerSide"], + selectedDriverSideReplaceOptions: ["Back"], + selectedPassengerSideReplaceOptions: ["Quarter"] + }, + selectedRearReplaceOptions: "Stationary", + }) const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" }, { glassLocation: "Driver", glassName: "Back" }, { glassLocation: "Passenger", glassName: "Quarter" }, { glassLocation: "Rear", glassName: "Stationary" }]; @@ -520,19 +519,19 @@ describe.skip("vehicle-damage.vue", () => { const storeWindshieldOptions = [[1, false, "Windshield", "Single", { selectedWindshieldDamageType: damageLocationsSelected.REPLACE, - selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE] + selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE] }], [2, false, "Windshield", "Driver", { selectedWindshieldDamageType: damageLocationsSelected.REPLACE, - selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER] + selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER] }], [3, false, "Windshield", "Passenger", { selectedWindshieldDamageType: damageLocationsSelected.REPLACE, - selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER] + selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER] }], [4, true, "", "", { selectedWindshieldDamageType: damageLocationsSelected.REPAIR, - selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: [] + selectedWindshieldChipCount: 2, selectedWindshieldReplaceOptions: [] }] ]; 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); }); - const rearReplaceOptions = [["Rear", "Stationary", [damageLocationsSelected.STATIONARY]], - ["Rear", "Slider", [damageLocationsSelected.SLIDER]] + const rearReplaceOptions = [["Rear", "Stationary", damageLocationsSelected.STATIONARY], + ["Rear", "Slider", damageLocationsSelected.SLIDER] ]; test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => { diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index f22370d69..0d8d6bf9f 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -83,7 +83,7 @@ export default ({ }, props: { - modelValue: String, + modelValue: [Object, String], // TODO Does this take a string? selectedDamageLocations: Array, hasRepairReplaceConflict: Boolean, hasSplitSingleConflict: Boolean, diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js index 6c0ac1e4b..6f8c063fb 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js @@ -18,9 +18,7 @@ const featureListData = { modelValueProp: {} } -// TODO KO -describe.skip("glass-part-question.vue", () => { - +describe("glass-part-question.vue", () => { test("Part data passed in, should map data for ButtonQuestion (radio type)", async () => { //Arrange diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 158c7642e..19cf4524b 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -63,7 +63,10 @@ export default { glassLocation: String, colorAnswers: Array, modelValue: Object, - alreadyPopulatedPartsData: Array + alreadyPopulatedPartsData: { + type: Array, + default: () => [] + } }, mounted() { this.LoadPreselectedValues(); diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js index ef7236a56..a205022ad 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js @@ -1,272 +1,128 @@ -import { shallowMount } from "@vue/test-utils"; +import { shallowMount, mount } from "@vue/test-utils"; import listButtonHorizontal from "./list-button-horizontal"; import { nextTick } from "vue"; import { GaActions } from "@/constants/analytics"; +import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; // TODO KO -describe.skip("list-button-horizontal.vue", () => { - it("Should return input type checkbox if isMultiSelect is true", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - isMultiSelect: true, - }, +describe("list-button-horizontal.vue", () => { + describe("baseInputButton checks", () => { + it("Should return input type checkbox if isMultiSelect is true", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + + // Assert + const input = wrapper.find("input"); + + expect(input.attributes().type).toEqual("checkbox"); }); - // Assert - const input = wrapper.find("input"); + it("Should return input type radio if isMultiSelect is false or not specified", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); - expect(input.attributes().type).toEqual("checkbox"); - }); - - it("Should return input type radio if isMultiSelect is false or not specified", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - isMultiSelect: false, - }, + // Assert + const input = wrapper.find("input"); + expect(input.attributes().type).toEqual("radio"); }); - // Assert - const input = wrapper.find("input"); + it("Should emit button value on click", 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", + }, + }, + }); - 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 () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - buttonID: "List Card Checkbox", - }, + describe("styling/UI", () => { + it("Should return screen reader text", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + screenReaderOnlyText: "Screen Reader Only Text", + }, + }, + }); + + // Assert + const paragraph = wrapper.find("span.sr-only"); + + expect(paragraph.text()).toEqual("Screen Reader Only Text"); }); - // Assert - const label = wrapper.find("label"); + it("Should return text alignment class", async () => { + // 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 () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - screenReaderOnlyText: "Screen Reader Only Text", - }, + expect(paragraph.attributes("class")).toContain("text-center"); }); - // Assert - const paragraph = wrapper.find("span.sr-only"); + it("Should return aria-required state", async () => { + // 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 () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - textPosition: "text-center", - }, + expect(input.attributes()["aria-required"]).toEqual("true"); }); - - // 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 }; +} diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js index 95b3cb523..a7ff986bd 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -1,264 +1,209 @@ -import { shallowMount } from "@vue/test-utils"; +import { shallowMount, mount } from "@vue/test-utils"; import listButton from "./list-button"; import { nextTick } from "vue"; import { GaActions } from "@/constants/analytics"; +import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; -// TODO KO -describe.skip("list-button.vue", () => { - it("Should return input type checkbox if isMultiSelect is true", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - isMultiSelect: true, - }, +describe("list-button.vue", () => { + describe("loader", () => { + it("Should return loader enabled true", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + 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 - const input = wrapper.find("input"); + it("Should return loader color", async () => { + // 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 () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - isMultiSelect: false, - }, + // Assert + const loader = wrapper.findComponent({ name: "loader" }); + expect(loader.attributes("class")).toContain("blue"); }); - // Assert - const input = wrapper.find("input"); + it("Should return loader position", async () => { + // 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 () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - buttonID: "List Card Checkbox", - }, + describe("baseInputButton checks", () => { + it("Should return input type checkbox if isMultiSelect is true", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + + // Assert + const input = wrapper.find("input"); + + expect(input.attributes().type).toEqual("checkbox"); }); - // Assert - const label = wrapper.find("label"); + it("Should return input type radio if isMultiSelect is false or not specified", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); - expect(label.attributes().for).toEqual("List Card Checkbox"); - }); - - it("Should return screen reader text", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - screenReaderOnlyText: "Screen Reader Only Text", - }, + // Assert + const input = wrapper.find("input"); + expect(input.attributes().type).toEqual("radio"); }); - // Assert - const paragraph = wrapper.find("span.sr-only"); + it("Should emit button value on click", 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", + }, + }, + }); - 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 () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - textPosition: "text-center", - }, + describe("styling/UI", () => { + it("Should return screen reader text", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + screenReaderOnlyText: "Screen Reader Only Text", + }, + }, + }); + + // Assert + const paragraph = wrapper.find("span.sr-only"); + + expect(paragraph.text()).toEqual("Screen Reader Only Text"); }); - // Assert - const paragraph = wrapper.find("span.m-0"); + it("Should return text alignment class", async () => { + // 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 () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - isRequired: true, - }, + expect(paragraph.attributes("class")).toContain("text-center"); }); - // Assert - const input = wrapper.find("input"); + it("Should return aria-required state", async () => { + // 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 () => { - // Act - const wrapper = shallowMount(listButton, { - global: { - mocks: { - '$route': { query: { fmgPage: 'page-name' } }, - GaActions: GaActions, - pushEventToGA: jest.fn(), - } - }, - propsData: { - selectingInitiatesLoad: true, - }, + expect(input.attributes()["aria-required"]).toEqual("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 }; +} diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index f1f07932d..e069f4de2 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -48,10 +48,14 @@ export default { }, methods: { displayLoader() { + console.log("Display me!") + console.log(this.selectingInitiatesLoad) this.isLoaderDisplayed = true; }, preHandleAnswerChange() { + console.log("HIII") if (this.selectingInitiatesLoad) { + console.log("EYY") this.displayLoader(); } },