Merge pull request #221 from Safelite/feature/CSR-268_fix

Feature/csr 268 fix

src/common-components/button-question/button-question.spec.js

@@ -3,12 +3,14 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import { nextTick } from "vue";
 
 describe("buttonQuestion.vue", () => {
-  it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
+  it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, {
-    await wrapper.setProps({
+      propsData: {
-      isOverflowScrollable: true,
+        isOverflowScrollable: true,
+      }
     });
+
     // Assert
     const fieldSet = wrapper.find('fieldset');
     expect(fieldSet.classes()).toContain("overflow-scroll");
@@ -16,11 +18,12 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Fieldset classes should contain row if button type is listCard", async () => {
+  it("Fieldset classes should contain row if button type is listCard", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, {
-    await wrapper.setProps({
+      propsData: {
-      buttonType: "listCard",
+        buttonType: "listCard",
+      }
     });
     // Assert
     const Div = wrapper.find('fieldset div');
@@ -29,11 +32,12 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => {
+  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, {
-    await wrapper.setProps({
+      propsData: {
-      buttonType: "listButtonHorizontal",
+        buttonType: "listButtonHorizontal",
+      }
     });
     // Assert
     const Div = wrapper.find('fieldset div');
@@ -57,12 +61,13 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Should add values to array on checkbox click", async () => {
+  it("Should add values to array on checkbox click", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, {
-    await wrapper.setProps({
+      propsData: {
-      modelValue: ["2022", "2021", "2020"],
+        modelValue: ["2022", "2021", "2020"],
-      isMultiSelect: true
+        isMultiSelect: true,
+      }
     });
     const val = {isChecked: true, buttonId: "2019", }
     wrapper.vm.handleCheckedChanged(val);

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

@@ -29,7 +29,7 @@
               :buttonImageId="answer.ImageId"
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
-              :colLength="this.answers.length < 3 ? '' : '-4'"
+              :colLength="getColLength"
               :selectedButtonIDs="selectedValues"
               data-test="button"
               :validationRules="validationRules"
@@ -83,8 +83,6 @@ export default {
     isWide: Boolean,
     modelValue: Array,
     validationRules: String,
-    name: String,
-    value: String,
     suppressError: Boolean,
   },
   computed: {
@@ -111,6 +109,13 @@ export default {
       }
       return classes;
     },
+    getColLength(){
+      if(this.isWide) {
+        return "12"
+      } else {
+        return this.answers.length < 3 ? '' : '-4';
+      }
+    },
     selectedValues: {
       get: function() {
         return this.modelValue;
@@ -120,17 +125,16 @@ export default {
       }
     },
   },
-  mounted(){
+  beforeUpdate(){
-    if(Array.isArray(this.answers) && this.answers.length === 1) {
+    const exceptions = ["Windshield", "Crack"];
+    const firstItem = typeof(this.answers[0]) === 'object' ? this.answers[0] : this.answers[0];
+    if(Array.isArray(this.answers) && this.answers.length === 1 && !exceptions.includes(typeof(firstItem) === 'object' ? firstItem.Text : firstItem)) {
       const newSelectedValues = this.selectedValues;
-      newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
+      newSelectedValues.push(typeof(firstItem) === 'object' ? firstItem.Name : firstItem);
       this.selectedValues = newSelectedValues;
     }
   },
   methods: {
-    chooseAnswer(answer) {
-      this.$emit("update:modelValue", answer);
-    },
     handleCheckedChanged(val) {
       if(this.isMultiSelect) {
         // Add or remove item to array of data to emit

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

@@ -1,7 +1,6 @@
 <template>
     <div class="damage-location-question">
         <buttonQuestion
-            v-if="answersToDisplay.length > 1"
             :questionText="questionText"
             isMultiSelect
             :answers="answersToDisplay"

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

@@ -24,7 +24,7 @@ describe("replace-options-question.vue", () => {
     test("Answers to display filtered by data from api.", async () => {
   
       //Arrange
-      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
+      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
   
       //Act
       replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");

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

@@ -1,8 +1,9 @@
 <template>
     <transition name="fade">
-        <div class="replace-options-question">
+        <div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 1"
+                v-if="isAvailable"
+                isWide
                 :questionText="questionText"
                 isMultiSelect
                 :answers="answersToDisplay"
@@ -64,7 +65,7 @@ export default ({
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
-                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
                     }) 
                 : [];
         },

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

@@ -175,7 +175,10 @@ function setupMocks({
     return Promise.resolve({
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
     });
   });
   const apiResponses = {
@@ -193,6 +196,9 @@ function setupMocks({
     damageOptions: {
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
       }
     },
   };
@@ -220,6 +226,11 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
+  const windshieldOptions = replaceOptionsQuestion
+  windshieldOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
@@ -245,12 +256,18 @@ function setupMocks({
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
-  const driverSideOptionsWrapper = wrapper.findComponent({
+  const driverSideOptionsWrapper = wrapper.findAllComponents({
     name: "replaceOptionsQuestion",
-  });
+  }).at(0);
   driverSideOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
+  const windshieldOptionsWrapper = wrapper.findAllComponents({
+    name: "replaceOptionsQuestion",
+  }).at(1);
+  windshieldOptionsWrapper.vm.initializeComponent =
+  replaceOptionsQuestion.methods.initializeComponent;
+
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
   });

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

@@ -4,7 +4,8 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <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>
@@ -68,6 +69,9 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
@@ -77,6 +81,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
+      windshieldOptionsData: [],
     }
   },
   methods: {