Merge pull request #166 from Safelite/feature/Digital/SSR-226

Feature/digital/ssr 226

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -23,7 +23,7 @@
                     :answerKey="questionsDatum.answerKey"
                     :validationRules="validationRules" />
             </div>
-            <site-footer
+            <siteFooter
                 ref="siteFooter"
                 cmsWidgetName="SiteFooterWidget"
                 :isForwardActionDisabled="!isMetaValid"

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

@@ -32,6 +32,7 @@ describe("glass-part-question.vue", () => {
         //Act
         await wrapper.vm.$nextTick();
 
+        console.log(wrapper.vm.featureListData["Green Tint"][0].Text)
         //Assert
         expect(Object.keys(wrapper.vm.featureListData).length).toBe(2);
         expect(wrapper.vm.featureListData["Green Tint"][0].Text).toBe(
@@ -101,36 +102,7 @@ describe("glass-part-question.vue", () => {
         expect(listCard.attributes("groupname")).toBe("Rear-Stationary");
         expect(listCard.attributes("validationrules")).toBe("Rear-Stationary-tint-required");
     });
-
+    
-    test("ResetTintAndPartSelections, should reset data elements ", async () => {
-        //Arrange
-
-        featureListData.pageData = {
-            partsOrQuestions: [
-                {
-                    glassName: "Stationary",
-                    glassLocation: "Rear",
-                    parts: [{ partNumber: "DB12209GTYN", color: "Green Tint" },
-                            { partNumber: "DB12209GTYN2", color: "Green Tint" }
-                        ],
-                },
-            ],
-        };
-        const { wrapper } = setupMocks(featureListData);
-
-        //Act
-        await wrapper.vm.$nextTick();
-        await wrapper.setData({ selectedTint: "Green Tint", selectedPartNumber: "DB12209GTYN" });
-
-        expect(wrapper.vm.selectedTint).toEqual("Green Tint");
-        expect(wrapper.vm.selectedPartNumber).toEqual("DB12209GTYN");
-
-        await wrapper.vm.ResetTintAndPartSelections();
-
-        expect(wrapper.vm.selectedTint).toEqual("Green Tint");
-        expect(wrapper.vm.selectedPartNumber).toEqual(null);
-    });
-
     test("default is selected if only one option", async () => {
         // Arrange
         featureListData.pageData = {
@@ -156,7 +128,7 @@ describe("glass-part-question.vue", () => {
         expect(wrapper.vm.selectedPartNumber).toBe("DB12209GTYN");
     });
 
-    test("default is not selected if more than one option", async () => {
+    test("first is selected if more than one option", async () => {
         // Arrange
         featureListData.pageData = {
             partsOrQuestions: [
@@ -178,8 +150,7 @@ describe("glass-part-question.vue", () => {
         await wrapper.vm.$nextTick();
 
         // Assert
-        expect(wrapper.emitted()["update:modelValue"]).toBeFalsy();
+        expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
-        expect(wrapper.vm.selectedPartNumber).toBeFalsy();
     });
  
     const partsForSelectedTintTestCases = [
@@ -266,11 +237,10 @@ describe("glass-part-question.vue", () => {
 
 function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp, pageData }) {
 
-
     const mountOptions = getMountOptions({
         route: {
             query: {
-                iisPage: "vehicle-parts",
+                issPage: "vehicle-parts",
             },
         },
     });
@@ -288,7 +258,7 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV
     //Mock store
     const partsOrQuestions = pageData ?? { partsOrQuestions: [{ glassName: "Stationary", glassLocation: "Rear", parts: [] }] };
     useMainStore().pageData = jest.fn();
-    useMainStore().pageData.mockReturnValueOnce(partsOrQuestions);
+    useMainStore().pageData.mockReturnValue(partsOrQuestions);
-
+    document.querySelector = jest.fn().mockReturnValue({checked: false});
     return { wrapper };
 }

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

@@ -4,7 +4,7 @@
     </div>
     <div class="nested-radio">
         <div class="row my-2">
-            <div class="col">
+            <div class="col mx-1">
                 <buttonQuestion
                     v-model="selectedTint"
                     :answers="tintSelectionOptions"
@@ -117,7 +117,7 @@ export default {
             set(newValue) {
                 this.$emit(
                     "update:modelValue",
-                    this.partsForSelectedTint.filter((part) => part.partNumber == newValue)[0]
+                    this.partsForSelectedTint.filter((part) => part.partNumber == newValue.value)[0]
                 );
             },
         },
@@ -150,7 +150,6 @@ export default {
 
                 // Add onto the final object
                 arr[itemColor].push(mappedItem);
-
                 return arr;
             }, {});
 
@@ -158,7 +157,7 @@ export default {
         },
 
         PartDataFromApi() {
-            return this.mainStore.pageData(this.$route.query.iisPage) ?? {};
+            return this.mainStore.pageData(this.$route.query.issPage) ?? {};
         },
     },
     methods: {
@@ -180,33 +179,48 @@ export default {
             return tintSourceObject.src;
         },
 
-        // Reset selections when tint changes for the same glass to ensure proper selection.
+        AutoSelect() {
-        // Also checks if only a single part is present for the tint.
+            if(this.partsForSelectedTint?.length > 0)
-        ResetTintAndPartSelections() {
+            {
-            this.selectedPartNumber = null;
+                // Check if only a single part is present for the tint and set the v-model if it is.
-            this.AutoSelectIfSinglePart();
+                if (this.partsForSelectedTint?.length == 1) {
-        },
+                    this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
+                }
+                else{
+                    // If selected part isn't in the current list or it's null, select the first part
+                    if(!this.selectedPartNumber || this.partsForSelectedTint.filter(x => x.partNumber == this.selectedPartNumber).length === 0)
+                    {
+                        this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
+                    }
+                }
 
-        // Check if only a single part is present for the tint and set the v-model if it is.
+                //select element with matching partNumber
-        AutoSelectIfSinglePart() {
+                this.$nextTick(() => {
-            if (this.partsForSelectedTint?.length == 1) {
+                    document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true;
-                this.selectedPartNumber = this.partsForSelectedTint[0].partNumber;
+                });
             }
         },
-
+        
         // Loads the preselected values from the store.
         LoadPreselectedValues() {
             this.$nextTick(() => {
-                if (this.modelValue !== undefined) {
+                // Populate button-question model-value if parts data already exists in store
-                    // Populate button-question model-value if parts data already exists in VueX
+                if(this.modelValue)
-                    this.selectedTint = this.modelValue?.color;
+                {
+                    this.selectedTint = this.modelValue.color;
                 }
-            });
+                else{
+                    // If one item in list, select it
+                    if (this.tintSelectionOptions?.length == 1) {
+                        this.selectedTint = this.tintSelectionOptions[0].value;
+                    }
+                }
+            });              
         },
     },
     watch: {
         selectedTint() {
-            this.AutoSelectIfSinglePart();
+            this.AutoSelect();
         },
     },
 };

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

@@ -8,7 +8,7 @@
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
             <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
+            <div class="fade-on-route-transition sub-container make-tall overflow-auto">
                 <div class="prevent-squish my-5">
                     <div class="row">
                         <div class="col">
@@ -32,11 +32,10 @@
                         :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
                 </div>
                 <siteFooter
-                    cmsWidgetName="siteFooterWidget"
+                    cmsWidgetName="SiteFooterWidget"
                     ref="siteFooter"
                     :isForwardActionDisabled="isForwardActionDisabled"
-                    @tempButtonClicked="() => handleTempButtonClicked(this)"
+                    @backClicked="navigateBack"
-                    @back-click="navigateBack"
                     @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
@@ -179,7 +178,7 @@ export default {
             }
             // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
             if (this.isForwardActionDisabled) {
-                this.$refs.funnelFooter.removeLoader();
+                this.$refs.siteFooter.removeLoader();
                 throw new Error("Could not match any parts to the selected parts");
             }
 

src/router/index.js

@@ -208,7 +208,7 @@ function getNavigationMap (scenario, currentRoute) {
 };
 
 function GoToStartOn404(next) {
-    const errorPageName = issPageValues.VEHICLE_YEAR;
+    const errorPageName = issPageValues.WELCOME_PAGE;
     router.addRoute({
         path: "/",
         name: errorPageName,