diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 823ce79fd..c14c027b9 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -127,7 +127,7 @@ export default { }, methods: { handleCheckedChanged(val) { - if(this.isMultiSelect) { + if(this.isMultiSelect && this.selectedValues) { // Add or remove item to array of data to emit const newSelectedValues = this.selectedValues; val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1); diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue index f47abea5d..28aa0831e 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue @@ -71,7 +71,7 @@ export default ({ }, }, mounted(){ - if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { + if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) { const newSelectedValues = this.selectedValues; newSelectedValues.push(this.answersToDisplay[0].Name); this.selectedValues = newSelectedValues; diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 0e47eb37f..247fce2e9 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -122,6 +122,37 @@ describe("vehicle-damage.vue", () => { }); }); + + +describe("vehicle-damage.vue", () => { + test("Windshield Options ares initailized with api data", async (done) => { + //Arrange + const pageHeaderWidgetHeaderText = "Select Damage"; + const { wrapper, apiPromise } = setupMocks({ + pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText, + }); + + //Act + vehicleDamage.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "vehicle-damage" } }, + undefined, + (c) => c(wrapper.vm) + ); + + //Assert + apiPromise.finally(() => { + expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith( + pageHeaderWidgetHeaderText + ); + done(); + }); + }); +}); + + + + describe("vehicle-damage.vue", () => { test("CarId set, arePagePrerequisitesValid should be true ", async () => { //Arrange diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 3c0df2599..b1ebfc6c8 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -4,12 +4,12 @@ + + - - @@ -34,6 +34,9 @@ import baseMixin from "@/mixins/base-mixin"; export default { name: "vehicle-damage", + updated() { + console.log(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions); + }, async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js index 5811bb1fa..123051d35 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js @@ -8,15 +8,15 @@ jest.mock("@/store", () => { return {}; }, {virtual: true}); describe("windshield-chip-count-question.vue", () => { test("Selected chip count is emitted upon selection.", async () => { //Arrange - const { wrapper } = setupMocks({ modelValueProp: "Two" }); - const chipCountToSelect = "Two"; + const { wrapper } = setupMocks({modelValueProp: ["One"]}); //Act - wrapper.setValue({ modelValue: chipCountToSelect }); + wrapper.setValue({ modelValue: ["Two"] }); await wrapper.vm.$nextTick(); - + //Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Two" }]); + expect(wrapper.vm.selectedChipCountValues).toEqual(["One"]); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Two"] }]); }); }); @@ -24,7 +24,7 @@ describe("windshield-chip-count-question.vue", () => { test("Should display question and answers from api.", async () => { //Arrange - const { wrapper, cmsContent } = setupMocks({modelValueProp: "One"}); + const { wrapper, cmsContent } = setupMocks({modelValueProp: ["One"]}); //Act windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent); diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js new file mode 100644 index 000000000..3bb64d695 --- /dev/null +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js @@ -0,0 +1,71 @@ +import { shallowMount } from "@vue/test-utils"; +import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import store from "@/store"; + +jest.mock("@/store", () => { return {}; }, {virtual: true}); + +describe("windshield-damage-type-question.vue", () => { + test("Selected chip count is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({modelValueProp: ["Repair"]}); + + //Act + wrapper.setValue({ modelValue: ["Replace"] }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.vm.selectedValues).toEqual(["Repair"]); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Replace"] }]); + }); + }); + + describe("windshield-damage-type-question.vue", () => { + test("Should display question and answers from api.", async () => { + + //Arrange + const { wrapper, cmsContent } = setupMocks({modelValueProp: ["Repair"]}); + + //Act + windshieldDamageTypeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent); + + //Assert + expect(wrapper.vm.questionText).toStrictEqual("What's your windshield damage?"); + expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'Repair' }, { Name: 'Replace' } ]); + }); + }); + + function setupMocks({ + modelValueProp = ["Two"], + groupName = "WindshieldDamageTypeQuestion", + cmsQuestionText = "What's your windshield damage?", + cmsAnswers = [{Name: "Repair"}, {Name: "Replace"}], + dataFromStoreApi = [], + }) { + + //Mock store + store.dispatch = jest.fn(() => dataFromStoreApi); + store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} }; + const mountOptions = getMountOptions({ + store: { + dispatch: store.dispatch, + getters: store.getters, + }, + }); + + //Mock props + mountOptions.propsData = { + modelValue: modelValueProp + }; + + const wrapper = shallowMount(windshieldDamageTypeQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + const damageOptions = dataFromStoreApi; + return { wrapper, cmsContent, damageOptions }; + } \ No newline at end of file diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue index bdc3b8cb5..78c72800c 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue @@ -19,7 +19,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"; import { defineRule } from "vee-validate"; -// DEFINE VALIDATION RULES +//DEFINE VALIDATION RULES defineRule("windshield-damage-required", (value) => { if (!value || value.length < 1) { return "Please select windshield damage"; diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index 9db08aa66..c917031aa 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -106,12 +106,12 @@ export default ({ }); }, isRepairOptionSelected(){ - if (this.selectedWindshieldDamageTypeValues === undefined) return false; + if (!this.selectedWindshieldDamageTypeValues) return false; return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation; }, isReplaceOptionSelected(){ - if (this.selectedWindshieldDamageTypeValues === undefined) return false; + if (!this.selectedWindshieldDamageTypeValues) return false; return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation; },