defect updates

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

@@ -119,7 +119,7 @@ export default {
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
-    },
+  },
     resetDependentState() {
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },

src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js

@@ -4,6 +4,9 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 import store from "@/store";
 
 jest.mock("@/store", () => { return {}; }, { virtual: true });
+store.getters = {
+    pageData: jest.fn()
+};
 
 const featureListData = {
     colorAnswersProp: [
@@ -93,9 +96,9 @@ describe("glass-part-question.vue", () => {
 
         //Act
         await wrapper.vm.$nextTick();
-        wrapper.setData({selectedTint:  {"Rear-Stationary" : 'Green Tint' } });
+        wrapper.setData({ selectedTint: { "Rear-Stationary": 'Green Tint' } });
 
-        expect(wrapper.vm.selectedTint).toStrictEqual({"Rear-Stationary": 'Green Tint'});
+        expect(wrapper.vm.selectedTint).toStrictEqual({ "Rear-Stationary": 'Green Tint' });
 
         await wrapper.vm.ResetTintAndPartSelections();
         expect(wrapper.vm.selectedTint).toStrictEqual({});
@@ -107,7 +110,19 @@ describe("glass-part-question.vue", () => {
 function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
 
     //Mock store
-    const mountOptions = getMountOptions({});
+    store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: {}});
+    store.getters.lineItems = { glassParts: {} }
+
+    const mountOptions = getMountOptions({
+        store: {
+            getters: store.getters,
+        },
+        route: {
+            query: {
+                fmgPage: 'vehicle-parts',
+            }
+        },
+    });
 
     mountOptions.propsData = {
         glassName: glassNameProp,

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -147,10 +147,29 @@ export default {
         },
 
         // Reset selections when tint changes for the same glass to ensure proper selection.
+        // Also checks if only a single part is present for the tint.
         ResetTintAndPartSelections() {
+
             this.selectedTint = {};
             this.selectedPart = {};
+            this.AutoSelectIfSinglePart();
         },
+
+        // Check if only a single part is present for the tint and set the v-model if it is.
+        AutoSelectIfSinglePart(){
+            // Check if the selected tint only has a single feature
+            const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
+
+            Object.keys(partsData.partsOrQuestions).forEach((key) => {
+                const currentGlassSelection = partsData.partsOrQuestions[key];
+
+                if (currentGlassSelection.glassName === this.glassName && currentGlassSelection.glassLocation === this.glassLocation) {
+                    if (currentGlassSelection.parts.length === 1) {
+                        this.selectedPart = { [currentGlassSelection.glassLocation]: [currentGlassSelection.parts[0].partNumber]};
+                    }
+                }
+            });
+        }
     },
 };
 </script>

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

@@ -8,13 +8,10 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
-import baseMixin from "@/mixins/base-mixin";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
-import { storeActions } from "@/constants/store-actions";
-import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
 
 // Mock our module for promises.
@@ -70,33 +67,8 @@ describe("vehicle-parts.vue", () => {
 
     test("Page header is initialized with api data", async (done) => {
         //Arrange
-        store.getters.pageData.mockReturnValueOnce({
+        store.getters.pageData.mockReturnValueOnce(basePartResponse);
-            partsOrQuestions: [
+        store.getters.lineItems = { glassParts: {} }
-                {
-                    glassName: "Stationary",
-                    glassLocation: "Rear",
-                    parts: [
-                        {
-                            partNumber: "DB12209GTYN",
-                            description: "heated glass, solar, 1 hole",
-                            color: "Green Tint",
-                            requiresRecalibration: false,
-                            requiresCapabilityQuestions: false,
-                            childParts: null
-                        },
-                        {
-                            partNumber: "DB12209YPYNOEM",
-                            description: "heated glass, solar, 1 hole",
-                            color: "Gray Tint Privacy",
-                            requiresRecalibration: false,
-                            requiresCapabilityQuestions: false,
-                            childParts: null
-                        }
-                    ],
-                    partQuestions: null
-                }
-            ]
-        });
 
         const pageHeaderWidgetHeaderText = "Select Parts";
         const { wrapper, apiPromise } = setupMocks(
@@ -117,6 +89,7 @@ describe("vehicle-parts.vue", () => {
                 }
             });
 
+
         //Act
         vehicleParts.beforeRouteEnter.call(wrapper.vm,
             { query: { fmgPage: "vehicle-parts" } },
@@ -139,6 +112,7 @@ describe("vehicle-parts.vue", () => {
         };
 
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
 
         const { wrapper, apiPromise } = setupMocks(
             {
@@ -181,6 +155,7 @@ describe("vehicle-parts.vue", () => {
         };
 
         store.getters.pageData.mockReturnValue(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
 
         const { wrapper, apiPromise } = setupMocks(
             {
@@ -219,6 +194,8 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
@@ -250,10 +227,48 @@ describe("vehicle-parts.vue", () => {
         expect(arePagePrerequisitesValid).toBe(true);
     });
 
+    test("Initial data, should populate this.glassParts", async () => {
+
+        //Arrange
+        store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: { 0: { partNumber: 'DB12209YPYNOEM'} } }
+
+        const { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                router: {
+                    navigateAfterSave: jest.fn()
+                },
+                route: {
+                    query: {
+                        fmgPage: 'vehicle-parts',
+                    }
+                },
+                store: {
+                    getters: store.getters
+                },
+            }
+        });
+
+        //Act
+        vehicleParts.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-parts" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        await nextTick();
+
+        //Assert
+        expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } });
+    });
+
     test("BackButtonAction triggers a router.navigate change", async () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
@@ -290,6 +305,9 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+
+
         store.commit = jest.fn();
         
         const { wrapper } = setupMocks({

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -1,26 +1,42 @@
 <template>
-<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" />
     <div class="container-fluid prevent-squish my-5">
-        <div class="row">
+      <div class="row">
-            <div class="col">
+        <div class="col">
-                <alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
+          <alert
-            </div>
+            class="rounded border-0 shadow-sm"
+            alertClass="alert-warning"
+            :alertHeadline="alertWidgetData.headline"
+            :alertCopy="alertWidgetData.copy"
+            :isDismissible="false"
+          />
         </div>
+      </div>
     </div>
 
     <div v-for="(item, i) in PartsForQuestions" :key="i">
-        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+      <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-        <div class="container-fluid">
+      <div class="container-fluid">
-            <hr v-if="i > 0" />
+        <hr v-if="i > 0" />
-        </div>
+      </div>
 
-        <glassPartQuestion :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
+      <glassPartQuestion
+        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+        v-model="glassParts[item.glassLocation + '-' + item.glassName]"
+        :glassLocation="item.glassLocation"
+        :glassName="item.glassName"
+        :colorAnswers="item.colorAnswers"
+      />
     </div>
-    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+    <funnelFooter
-</div>
+      ref="funnelFooter"
+      @back-clicked="backButtonAction"
+      @ForwardClicked="forwardButtonAction"
+    />
+  </div>
 </template>
 
 <script>
@@ -32,178 +48,183 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import alert from "@/ux-components/alert/alert";
 // Supporting Files
-import {
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    fetchCmsContentForPage
+import { settleAllPromises } from "@/helpers/layout-helper";
-} from "@/helpers/cms-content-helper";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
-import {
+import { storeMutations } from "@/constants/store-mutations";
-    settleAllPromises
-} from "@/helpers/layout-helper";
-import {
-    fmgPageValues
-} from "@/router/router-constants/fmgPage-values";
-import {
-    storeMutations
-} from "@/constants/store-mutations";
 import store from "@/store";
 
 export default {
-    name: "vehicle-parts",
+  name: "vehicle-parts",
-    async beforeRouteEnter(to, from, next) {
+  async beforeRouteEnter(to, from, next) {
-        // Call APIs
+    // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-        // Settle promises and get results
+    // Settle promises and get results
-        const promiseResultMap = [{
+    const promiseResultMap = [
-            resultKey: "cmsContent",
+      {
-            promise: cmsContentPromise,
+        resultKey: "cmsContent",
-        }, ];
+        promise: cmsContentPromise,
-        const resultMap = await settleAllPromises(promiseResultMap);
+      },
-        // Call the "next" function to complete the transition to this page.
+    ];
-        next((vm) => {
+    const resultMap = await settleAllPromises(promiseResultMap);
-            vm.$refs.funnelHeader.initializeComponent(
+    // Call the "next" function to complete the transition to this page.
-                resultMap.cmsContent.FunnelHeaderWidget
+    next((vm) => {
-            );
+      vm.$refs.funnelHeader.initializeComponent(
-            vm.$refs.vehicleBanner.initializeComponent(
+        resultMap.cmsContent.FunnelHeaderWidget
-                resultMap.cmsContent.VehicleBannerWidget
+      );
-            );
+      vm.$refs.vehicleBanner.initializeComponent(
-            vm.$refs.funnelSubHeader.initializeComponent(
+        resultMap.cmsContent.VehicleBannerWidget
-                resultMap.cmsContent.FunnelSubHeaderWidget
+      );
-            );
+      vm.$refs.funnelSubHeader.initializeComponent(
-            vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelSubHeaderWidget
-                resultMap.cmsContent.FunnelFooterWidget
+      );
-            );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
 
-            // Glass Part Question dynamic component
+      // Glass Part Question dynamic component
 
-            Object.keys(vm.$refs)
+      Object.keys(vm.$refs)
-                .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
+        .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-                .forEach((c) =>
+        .forEach((c) =>
-                    vm.$refs[c][0].initializeComponent({
+          vm.$refs[c][0].initializeComponent({
-                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+            ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+            FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
-                    })
+          })
-                );
+        );
 
-            // Set alertData for the page alert. These use props so we don't call
+      // Set alertData for the page alert. These use props so we don't call
-            // initializeComponent here.
+      // initializeComponent here.
-            vm.alertWidgetData = {
+      vm.alertWidgetData = {
-                copy: resultMap.cmsContent.AlertWidget.BodyText,
+        copy: resultMap.cmsContent.AlertWidget.BodyText,
-                headline: resultMap.cmsContent.AlertWidget.HeadlineText
+        headline: resultMap.cmsContent.AlertWidget.HeadlineText,
-            };
+      };
+    });
+  },
+  data() {
+    return {
+      glassParts: {},
+      alertWidgetData: Object,
+    };
+  },
+  components: {
+    glassPartQuestion,
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    funnelFooter,
+    alert,
+  },
+  computed: {
+    PartsForQuestions() {
+      const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
+      const alreadyPopulatedPartsData =
+        this.$store.getters.lineItems.glassParts === null
+          ? {}
+          : this.$store.getters.lineItems.glassParts;
 
+      // Map API result data, to vehicle-parts data structure
+      const mappedData = partsData.partsOrQuestions.map((g) => {
+        // If the part is already populated, use the value from the store and populate the v-model.
+        Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+          const partNumber = alreadyPopulatedPartsData[key].partNumber;
+          g.parts.forEach((p) => {
+            if (p.partNumber === partNumber) {
+              this.glassParts[g.glassLocation + "-" + g.glassName] = {
+                [g.glassLocation]: [partNumber],
+              };
+            }
+          });
         });
-    },
+
-    data() {
         return {
-            glassParts: {},
+          glassName: g.glassName,
-            alertWidgetData: Object,
+          glassLocation: g.glassLocation,
-        };
+          colorAnswers: g.parts.reduce((arr, p) => {
-    },
+            arr.push({
-    components: {
+              ColorAnswerText: p.color,
-        glassPartQuestion,
+              FeatureAnswers: [
-        funnelHeader,
+                {
-        vehicleBanner,
+                  FeatureAnswerText:
-        funnelSubHeader,
+                    p.description === "" ? p.color : p.description,
-        funnelFooter,
+                  PartNumber: p.partNumber,
-        alert,
+                },
-    },
+              ],
-    computed: {
-        PartsForQuestions() {
-            const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
-            const alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts === null ? {} : this.$store.getters.lineItems.glassParts;
-
-            // Map API result data, to vehicle-parts data structure
-            const mappedData = partsData.partsOrQuestions.map(g => {
-
-                // If the part is already populated, use the value from the store and populate the v-model.
-                Object.keys(alreadyPopulatedPartsData).forEach((key) => {
-                    const partNumber = alreadyPopulatedPartsData[key].partNumber;
-                    g.parts.forEach(p => {
-                        if (p.partNumber === partNumber) {
-                            this.glassParts[g.glassLocation + '-' + g.glassName] = {
-                                [g.glassLocation]: [partNumber]
-                            }
-                        }
-                    });
-                });
-
-                return {
-                    glassName: g.glassName,
-                    glassLocation: g.glassLocation,
-                    colorAnswers: g.parts.reduce((arr, p) => {
-                        arr.push({
-                            ColorAnswerText: p.color,
-                            FeatureAnswers: [{
-                                FeatureAnswerText: p.description === '' ? p.color : p.description,
-                                PartNumber: p.partNumber
-                            }]
-                        });
-                        return arr;
-                    }, [])
-                }
             });
+            return arr;
+          }, []),
+        };
+      });
 
-            return mappedData;
+      return mappedData;
-        },
-
-        PartsFromApi() {
-            return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
-        },
-
-        RefPrefix() {
-            return 'partQuestion';
-        }
-
     },
-    methods: {
-        arePagePrerequisitesValid() {
-            // Check if isRepair is populated and if the pageData we need is here (Parts data)
-            if (store.getters.damage.isRepair !== null && Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0) {
-                return true;
-            }
-
-            return false
-        },
-        backButtonAction() {
-            this.$router.navigate(
-                this.navigationScenarios.CLICKED_BACK,
-                this.$route
-            );
-        },
-        forwardButtonAction() {
-            const selectedGlassPartNumbers = [];
-            const matchedParts = [];
-
-            // Compile all selected parts from the page.
-            for (let [key, value] of Object.entries(this.glassParts)) {
-                for (let [glassKey, glassValue] of Object.entries(value)) {
-                    selectedGlassPartNumbers.push(glassValue[0]);
-                }
-            }
-
-            // Match them to the parts from the API.
-            for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
-                for (let [partKey, partValue] of Object.entries(value.parts)) {
-                    const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
-                    const isMatched = selectedGlassPartNumbers.some(p => p === currentPart.partNumber);
-
-                    if (isMatched) {
-                        matchedParts.push(currentPart);
-                    }
-                }
-            }
-
-            // If no parts could be matched, throw an error.
-            if (matchedParts.length === 0) {
-                throw new Error("Could not match any parts to the selected parts");
-            }
-
-            // Save parts to the store.
-            store.commit(storeMutations.UPDATE_PARTS, matchedParts);
-
-            // Navigate to the next page.
-            this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_PARTS, this.$route);
-        }
 
+    PartsFromApi() {
+      return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
     },
+
+    RefPrefix() {
+      return "partQuestion";
+    },
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      // Check if isRepair is populated and if the pageData we need is here (Parts data)
+      if (
+        store.getters.damage.isRepair !== null &&
+        Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
+          .length !== 0
+      ) {
+        return true;
+      }
+
+      return false;
+    },
+    backButtonAction() {
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    forwardButtonAction() {
+      const selectedGlassPartNumbers = [];
+      const matchedParts = [];
+
+      // Compile all selected parts from the page.
+      for (let [key, value] of Object.entries(this.glassParts)) {
+        for (let [glassKey, glassValue] of Object.entries(value)) {
+          selectedGlassPartNumbers.push(glassValue[0]);
+        }
+      }
+
+      // Match them to the parts from the API.
+      for (let [key, value] of Object.entries(
+        this.PartsFromApi.partsOrQuestions
+      )) {
+        for (let [partKey, partValue] of Object.entries(value.parts)) {
+          const currentPart =
+            this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+          const isMatched = selectedGlassPartNumbers.some(
+            (p) => p === currentPart.partNumber
+          );
+
+          if (isMatched) {
+            matchedParts.push(currentPart);
+          }
+        }
+      }
+
+      // If no parts could be matched, throw an error.
+      if (matchedParts.length === 0) {
+        throw new Error("Could not match any parts to the selected parts");
+      }
+
+      // Save parts to the store.
+      store.commit(storeMutations.UPDATE_PARTS, matchedParts);
+
+      // Navigate to the next page.
+      this.$router.navigateAfterSave(
+        this.navigationScenarios.SELECTED_PARTS,
+        this.$route
+      );
+    },
+  },
 };
 </script>

src/ux-components/radio/radio.spec.js

@@ -77,7 +77,7 @@ describe("radio.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {