diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index e96f15df5..c828f9ff9 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -4,7 +4,7 @@ {{ questionText }}
-
+
{{groupName}}
 { return {}; }, {virtual: true}); describe("replace-options-question.vue", () => { - test("Selected damage option is emitted upon selection.", async () => { - - //Arrange - const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] }); - const damageToSelect = ["Backseat"]; - - //Act - wrapper.setValue({ modelValue: damageToSelect }); - await wrapper.vm.$nextTick(); - - //Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]); - }); - }); + test("Selected damage option is emitted upon selection.", async () => { - describe("replace-options-question.vue", () => { - test("Answers to display filtered by data from api.", async () => { - - //Arrange - const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true}); - - //Act - replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group"); - - //Assert - expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ]) - }); - }); + //Arrange + const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] }); + const damageToSelect = ["Backseat"]; - function setupMocks({ - modelValueProp = ["Windshield"], - isAvailale = true, - isMultiSelect = false, - filterByVehicleCategory = false, - groupName = "damageQuestion", - cmsQuestionText = "CMS text goes here", - cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}], - 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, + //Act + wrapper.setValue({ modelValue: damageToSelect }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]); + }); +}); + +describe("replace-options-question.vue", () => { + test("Answers to display filtered by data from api.", async () => { + + //Arrange + const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true}); + + //Act + replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group"); + + //Assert + expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ]) + }); +}); + +describe("replace-options-question.vue", () => { + test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedValues", async () => { + + //Arrange + const { wrapper, cmsContent, replaceOptions + } = setupMocks({ + modelValueProp: [], + }); + wrapper.setData({answersFromCms: [ + { + "Name": "Stationary", }, - }); + { + "Name": "Slider", + } + ]}); + wrapper.setData({replaceOptions: ["Stationary"]}); + + //Act + wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm); + + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([['Stationary']]); + }); +}); + +describe("replace-options-question.vue", () => { + test("when isAvailable is true, will run updateSelectedValues method", async () => { + + //Arrange + const { wrapper, cmsContent, replaceOptions } = setupMocks({ isAvailable: false, methodsToMock: ["updateSelectedValues"] }); + + //Act + wrapper.vm.$options.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group"); + wrapper.vm.$options.watch.isAvailable.call(wrapper.vm, true); + + //Assert + expect(replaceOptionsQuestion.methods.updateSelectedValues).toHaveBeenCalled(); + wrapper.unmount(); + }); +}); + +function setupMocks({ + modelValueProp = ["Windshield"], + isAvailable = true, + isMultiSelect = false, + filterByVehicleCategory = false, + groupName = "damageQuestion", + cmsQuestionText = "CMS text goes here", + cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}], + dataFromStoreApi = [], + methodsToMock = [], +}) { - //Mock props - mountOptions.propsData = { - modelValue: modelValueProp, - isAvailable: isAvailale, - isMultiSelect: isMultiSelect, - filterByVehicleCategory: filterByVehicleCategory - }; - - const wrapper = shallowMount(replaceOptionsQuestion, mountOptions); + //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, + isAvailable: isAvailable, + isMultiSelect: isMultiSelect, + filterByVehicleCategory: filterByVehicleCategory + }; + + //Mock methods + methodsToMock.forEach((methodName) => { + replaceOptionsQuestion.methods[methodName] = jest.fn(); + }); - //Mock CMS content - const cmsContent = { - groupName: groupName, - QuestionText: cmsQuestionText, - Answers: cmsAnswers, - }; - const replaceOptions = dataFromStoreApi; - return { wrapper, cmsContent, replaceOptions }; - } \ No newline at end of file + const wrapper = shallowMount(replaceOptionsQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + const replaceOptions = dataFromStoreApi; + return { wrapper, cmsContent, replaceOptions }; +} \ No newline at end of file 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 1de360f7b..abe43e429 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 @@ -1,10 +1,10 @@ @@ -22,6 +38,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options"; import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question"; import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options"; +import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question"; // Supporting files import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; @@ -77,11 +94,22 @@ export default { resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion, resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions ); + vm.$refs.backGlassOptions.initializeComponent( + resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions + ); vm.$refs.funnelFooter.initializeComponent( resultMap.cmsContent.FunnelFooterWidget ); }); }, + computed: { + isRearWindowDamageLocation() { + return this.selectedDamageLocations.some(selectedDamages => + { + return selectedDamages.toUpperCase() === "REARWINDOW"; + }); + }, + }, data(){ return { selectedDamageLocations: [], @@ -90,7 +118,8 @@ export default { selectedDriverSideReplacOptions: [], selectedPassengerSideReplaceOptions: [] }, - selectedWindshieldOptions: [] + selectedWindshieldOptions: [], + selectedRearReplaceOptions: [], } }, methods: { @@ -117,6 +146,7 @@ export default { sideDoorOptions, damageLocationQuestion, windshieldOptions, + replaceOptionsQuestion, }, };