diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue index e8cdd5d7..c8fc745a 100644 --- a/src/iss-components/questions-page-layout/questions-page-layout.vue +++ b/src/iss-components/questions-page-layout/questions-page-layout.vue @@ -23,7 +23,7 @@ :answerKey="questionsDatum.answerKey" :validationRules="validationRules" /> - { //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.vm.selectedPartNumber).toBeFalsy(); + expect(wrapper.emitted()["update:modelValue"]).toBeTruthy(); }); 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 }; } diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 69ff2cc2..a9477134 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -4,7 +4,7 @@
-
+
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. - // Also checks if only a single part is present for the tint. - ResetTintAndPartSelections() { - this.selectedPartNumber = null; - this.AutoSelectIfSinglePart(); - }, + AutoSelect() { + 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 }; + } + 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. - AutoSelectIfSinglePart() { - if (this.partsForSelectedTint?.length == 1) { - this.selectedPartNumber = this.partsForSelectedTint[0].partNumber; + //select element with matching partNumber + this.$nextTick(() => { + document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true; + }); } }, - + // 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 VueX - this.selectedTint = this.modelValue?.color; + // Populate button-question model-value if parts data already exists in store + if(this.modelValue) + { + 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(); }, }, }; diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 61415037..051d8eb6 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -8,7 +8,7 @@ cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> -
+
@@ -32,11 +32,10 @@ :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
@@ -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"); } diff --git a/src/router/index.js b/src/router/index.js index df451aa2..ca0dcee3 100644 --- a/src/router/index.js +++ b/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,