Merge pull request #240 from Safelite/feature/digital/SSR-390

Feature/digital/ssr 390

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

@@ -127,31 +127,6 @@ describe("glass-part-question.vue", () => {
         // Assert
         expect(wrapper.vm.selectedPartNumber).toBe("DB12209GTYN");
     });
-
-    test("first is selected if more than one option", async () => {
-        // Arrange
-        featureListData.pageData = {
-            partsOrQuestions: [
-                {
-                    glassName: "Stationary",
-                    glassLocation: "Rear",
-                    parts: [
-                        { partNumber: "DB12209GTYN", color: "Green Tint" },
-                        { partNumber: "DB12209GTYNXXX", color: "Green Tint" },
-                    ],
-                },
-            ],
-        };
-        const { wrapper } = setupMocks(featureListData);
-
-        // Act
-        await wrapper.vm.$nextTick();
-        await wrapper.setData({ selectedTint: "Green Tint" });
-        await wrapper.vm.$nextTick();
-
-        // Assert
-        expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
-    });
  
     const partsForSelectedTintTestCases = [
         [
@@ -259,6 +234,6 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV
     const partsOrQuestions = pageData ?? { partsOrQuestions: [{ glassName: "Stationary", glassLocation: "Rear", parts: [] }] };
     useMainStore().pageData = jest.fn();
     useMainStore().pageData.mockReturnValue(partsOrQuestions);
-    document.querySelector = jest.fn().mockReturnValue({checked: false});
+    document.querySelector = jest.fn().mockReturnValue({clicked: false, click: jest.fn()});
     return { wrapper };
 }

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

@@ -28,8 +28,7 @@
                                 isRequired
                                 isSmallQuestionText
                                 :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
-                                :validationRules="partValidationRules" 
+                                :validationRules="partValidationRules" />
-                                />
                         </div>
                     </div>
                 </buttonQuestion>
@@ -182,25 +181,27 @@ export default {
             return tintSourceObject.src;
         },
 
-        // Check if only a single part is present for the tint and set the v-model if it is.
+        // 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.
+        ResetTintAndPartSelections() {
+            this.selectedPartNumber = null;
+            this.AutoSelectIfSinglePart();
+        },
+
+        AutoSelectIfSinglePart() {
             if (this.partsForSelectedTint?.length > 0) 
             {
+                // Check if only a single part is present for the tint and set the v-model if it is.
                 if (this.partsForSelectedTint?.length == 1) {
                     this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
                     
-                    //select element with matching partNumber
+                    // //select element with matching partNumber
                     this.$nextTick(() => {
-                        document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true;
+                        const radioInput = document.querySelector('input[value=' + this.selectedPartNumber + ']');
+                        // Fire a click event on the input so the field is updated
+                        radioInput?.click();
                     });
                 }
-                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 };
-                    }
-                }
             }
         },
         
@@ -217,7 +218,7 @@ export default {
     },
     watch: {
         selectedTint() {
-            this.AutoSelect();
+            this.AutoSelectIfSinglePart();
         },
     },
 };