Merge pull request #584 from Safelite/feature/CSR-343

Feature/csr 343

src/layouts/quote/quote.vue

@@ -0,0 +1,10 @@
+<script>
+export default {
+    name: "quote",
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        }
+    }
+}
+</script>

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

@@ -108,9 +108,87 @@ describe("glass-part-question.vue", () => {
         expect(wrapper.vm.selectedPartNumber).toEqual(null);
     });
 
+    test("default is selected if only one option", async () => {
+        // Arrange
+        store.getters.pageData.mockReset();
+        store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: [{ partNumber: "DB12209GTYN", color: "Green Tint"}]}] });
+        const { wrapper } = setupMocks(featureListData);
+
+        // Act
+        await wrapper.vm.$nextTick();
+        await wrapper.setData({ selectedTint: "Green Tint" });
+        // take emitted value, pass down as modelValue
+        // yes, yes, it's not ideal
+        await wrapper.setProps({ modelValue: wrapper.emitted()["update:modelValue"][0][0] })
+        await wrapper.vm.$nextTick();
+        
+        // Assert
+        expect(wrapper.vm.selectedPartNumber).toBe("DB12209GTYN");
+    });
+
+    test("default is not selected if more than one option", async () => {
+        // Arrange
+        store.getters.pageData.mockReset();
+        store.getters.pageData.mockReturnValueOnce({ 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"]).toBeFalsy();
+        expect(wrapper.vm.selectedPartNumber).toBeFalsy();
+    })
+
+    const partsForSelectedTintTestCases = [
+        ["Rear", "Stationary", "Green Tint", [{ partNumber: "Glass1", color: "Green Tint"}, { partNumber: "Glass3", color: "Green Tint"}, { partNumber: "Glass4", color: "Green Tint"}, { partNumber: "Glass6", color: "Green Tint"} ]],
+        ["Rear", "Stationary", "Blue Tint", [{ partNumber: "Glass2", color: "Blue Tint"}, { partNumber: "Glass5", color: "Blue Tint"}]],
+        ["Rear", "Stationary", "Red Tint", [{ partNumber: "Glass7", color: "Red Tint"}]],
+        ["Windshield", "Single", "Green Tint", [{ partNumber: "Windshield1", color: "Green Tint"}, { partNumber: "Windshield2", color: "Green Tint"}]],
+        ["Windshield", "Single", "Blue Tint", []],
+        ["Driver", "Quarter", "Green Tint", []]
+    ];
+    test.each(partsForSelectedTintTestCases)("partsForSelectedTint returns correct parts", async (glassLocation, glassName, selectedTint, expectedResults) => {
+        // Arrange
+        store.getters.pageData.mockReset();
+        store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [
+            {
+                glassName: "Stationary", 
+                glassLocation: "Rear", 
+                parts: [
+                    { partNumber: "Glass1", color: "Green Tint"},
+                    { partNumber: "Glass2", color: "Blue Tint"},
+                    { partNumber: "Glass3", color: "Green Tint"},
+                    { partNumber: "Glass4", color: "Green Tint"},
+                    { partNumber: "Glass5", color: "Blue Tint"},
+                    { partNumber: "Glass6", color: "Green Tint"},
+                    { partNumber: "Glass7", color: "Red Tint"}
+                ] 
+            },
+            {
+                glassName: "Single", 
+                glassLocation: "Windshield", 
+                parts: [{ partNumber: "Windshield1", color: "Green Tint"}, { partNumber: "Windshield2", color: "Green Tint"}]
+            }
+        ]});
+        const { wrapper } = setupMocks({
+            glassLocationProp: glassLocation,
+            glassNameProp: glassName,
+            colorAnswersProp: [],
+        });
+
+        // Act
+        await wrapper.setData({ selectedTint: selectedTint });
+
+        // Assert
+        expect(expectedResults).toEqual(wrapper.vm.partsForSelectedTint);
+    });
 });
 
 
+
 function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
     //Mock store
     store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: []}] });

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

@@ -116,10 +116,11 @@ export default {
         },
 
         partsForSelectedTint() {
-            return this.PartDataFromApi.partsOrQuestions?.filter(dataForGlassLocationAndName => 
+            const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(dataForGlassLocationAndName => 
                 dataForGlassLocationAndName.glassName == this.glassName &&
-                dataForGlassLocationAndName.glassLocation == this.glassLocation)[0]
+                dataForGlassLocationAndName.glassLocation == this.glassLocation);
-                .parts?.filter(part => part.color == this.selectedTint) ?? [];
+            const matchingGlassParts = matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
+            return matchingGlassParts.filter(part => part.color == this.selectedTint) ?? [];
         },
 
         // Creates a map of the feature list data in the correct Name/Value

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -223,18 +223,26 @@ export default {
     span {
       font-size: .875rem;
     }
-  }
+  }  
+}
+
+.col {
   &:first-of-type {
-    label {
+    .list-button-horizontal {
-      border-bottom-left-radius: 0.5rem;
+      label {
-      border-top-left-radius: 0.5rem;
+        border-bottom-left-radius: 0.5rem;
-      z-index: 2;
+        border-top-left-radius: 0.5rem;
+        z-index: 2;
+      }
     }
   }
+
   &:last-of-type {
-    label {
+    .list-button-horizontal {
-      border-bottom-right-radius: 0.5rem;
+      label {
-      border-top-right-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
+        border-top-right-radius: 0.5rem;
+      }
     }
   }
 }