CSR-269

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);

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;

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

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -4,12 +4,12 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" v-model="windshieldOptionsData" />
         <windshieldOptions ref="windshieldOptions" 
           v-model="selectedWindshieldOptions" 
           :selectedDamageLocations="selectedDamageLocations"
         />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
-        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" v-model="windshieldOptionsData" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -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);

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 { wrapper } = setupMocks({modelValueProp: ["One"]});
-      const chipCountToSelect = "Two";
   
       //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);

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 };
+  }

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";

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;
         },