Merge pull request #241 from Safelite/feature/CSR-296

Feature/CSR-296

src/common-components/button-question/button-question.vue

@@ -4,7 +4,7 @@
       <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
+      <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
           <div :class="getComponentWrapperClasses">
             <component

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

@@ -1,76 +1,124 @@
 import { shallowMount } from "@vue/test-utils";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
 import store from "@/store";
 jest.mock("@/store", () => { return {}; }, {virtual: true});
 
 describe("replace-options-question.vue", () => {
-    test("Selected damage option is emitted upon selection.", async () => {
+  test("Selected damage option is emitted upon selection.", async () => {
 
-      //Arrange
+    //Arrange
-      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+    const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
-      const damageToSelect = ["Backseat"];
+    const damageToSelect = ["Backseat"];
 
-      //Act
+    //Act
-      wrapper.setValue({ modelValue: damageToSelect });
+    wrapper.setValue({ modelValue: damageToSelect });
-      await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
 
-      //Assert
+    //Assert
-      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
-    });
   });
+});
 
-  describe("replace-options-question.vue", () => {
+describe("replace-options-question.vue", () => {
-    test("Answers to display filtered by data from api.", async () => {
+  test("Answers to display filtered by data from api.", async () => {
 
-      //Arrange
+    //Arrange
-      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
+    const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
 
-      //Act
+    //Act
-      replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+    replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
 
-      //Assert
+    //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ])
+    expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ])
-    });
   });
+});
 
-  function setupMocks({
+describe("replace-options-question.vue", () => {
-    modelValueProp = ["Windshield"],
+  test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedValues", async () => {
-    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
+    //Arrange
-    store.dispatch = jest.fn(() => dataFromStoreApi);
+    const { wrapper, cmsContent, replaceOptions
-    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+     } = setupMocks({ 
-    const mountOptions = getMountOptions({
+      modelValueProp: [],
-      store: {
+     });
-        dispatch: store.dispatch,
+    wrapper.setData({answersFromCms: [
-        getters: store.getters,
+      {
+          "Name": "Stationary",
       },
-    });
+      {
+          "Name": "Slider",
+      }
+    ]});
+    wrapper.setData({replaceOptions: ["Stationary"]});
 
-    //Mock props
+    //Act
-    mountOptions.propsData = {
+    wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);
-      modelValue: modelValueProp,
-      isAvailable: isAvailale,
-      isMultiSelect: isMultiSelect,
-      filterByVehicleCategory: filterByVehicleCategory
-    };
 
-    const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([['Stationary']]);
+  });
+});
 
-    //Mock CMS content
+describe("replace-options-question.vue", () => {
-    const cmsContent = {
+  test("when isAvailable is true, will run updateSelectedValues method", async () => {
-      groupName: groupName,
+
-      QuestionText: cmsQuestionText,
+    //Arrange
-      Answers: cmsAnswers,
+    const { wrapper, cmsContent, replaceOptions } = setupMocks({ isAvailable: false, methodsToMock: ["updateSelectedValues"] });
-    };
+
-    const replaceOptions = dataFromStoreApi;
+    //Act
-    return { wrapper, cmsContent, replaceOptions };
+    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 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();
+  });
+  
+  const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    groupName: groupName,
+    QuestionText: cmsQuestionText,
+    Answers: cmsAnswers,
+  };
+  const replaceOptions = dataFromStoreApi;
+  return { wrapper, cmsContent, replaceOptions };
+}

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -1,10 +1,10 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" aria-live="polite">
             <buttonQuestion
                 isWide
                 :questionText="questionText"
-                isMultiSelect
+                :isMultiSelect="isMultiSelect"
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
@@ -42,6 +42,7 @@ export default ({
         filterByVehicleCategory: Boolean,
         groupName: String,
         modelValue: Array,
+        isMultiSelect: Boolean,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
@@ -49,6 +50,12 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
+                this.selectedValues = [this.answersToDisplay[0].Name];
+            }
+        },
     },
     computed: {
         selectedValues: {
@@ -75,11 +82,10 @@ export default ({
             });
         },
     },
-    mounted(){
+    watch: {
-        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
+        isAvailable(val) {
-            const newSelectedValues = this.selectedValues;
+            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
-            newSelectedValues.push(this.answersToDisplay[0].Name);
+            val && this.updateSelectedValues();
-            this.selectedValues = newSelectedValues;
         }
     },
     components: {

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -7,6 +7,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 { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -166,9 +167,57 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+describe("vehicle-damage.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.backButtonAction();
+
+    //Assert
+    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+
+  });
+});
+
+describe("vehicle-damage.vue", () => {
+  test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.selectedDamageLocations = ["RearWindow"];
+
+    //Assert
+    expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
+
+  });
+});
+
 function setupMocks({
   pageHeaderWidgetHeaderText = {},
-  mountOptionsMockData = {},
+  mountOptionsMockData = {
+    router: {
+      navigate: jest.fn(),
+    },
+  },
 }) {
   //Mock api responses
   baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
@@ -194,6 +243,9 @@ function setupMocks({
       windshieldOptions: {
         availableReplacementOptions: ["Single", "Driver", "Passenger"],
       },
+      backGlassOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
     },
   };
 
@@ -227,6 +279,10 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
+  replaceOptionsQuestion.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   funnelFooter.methods = {
     initializeComponent: jest.fn(),
   }
@@ -259,6 +315,12 @@ function setupMocks({
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
+  const backGlassOptionsWrapper = wrapper.findComponent({
+    name: "replaceOptionsQuestion",
+  });
+  backGlassOptionsWrapper.vm.initializeComponent =
+  replaceOptionsQuestion.methods.initializeComponent;
+
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
   });

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

@@ -3,12 +3,28 @@
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
-        <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
+        <damageLocationQuestion
-        <windshieldOptions ref="windshieldOptions" 
+          ref="damageLocation"
+          v-model="selectedDamageLocations"
+          groupName="DamageLocationQuestion"
+        />
+        <windshieldOptions
+          ref="windshieldOptions" 
           v-model="selectedWindshieldOptions" 
           :selectedDamageLocations="selectedDamageLocations"
         />
-        <sideDoorOptions ref="sideDoorOptions" groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" :selectedDamageLocations="selectedDamageLocations" />
+        <sideDoorOptions 
+          ref="sideDoorOptions"
+          groupName="SideDoorSideQuestion"
+          v-model="sideDoorOptionsData"
+          :selectedDamageLocations="selectedDamageLocations"
+        />
+        <replaceOptionsQuestion
+          ref="backGlassOptions"
+          :isAvailable="isRearWindowDamageLocation"
+          v-model="selectedRearReplaceOptions"
+          groupName="BackGlassReplaceOptionsQuestion"
+        />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -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,
   },
 };
 </script>