diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js index 819ddaa4..43f69c74 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js +++ b/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 }; } 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 74bdf103..75609fee 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 @@ -28,8 +28,7 @@ isRequired isSmallQuestionText :groupName="`${glassLocation}-${glassName}-${selectedTint}`" - :validationRules="partValidationRules" - /> + :validationRules="partValidationRules" /> @@ -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. - AutoSelect() { + // 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(); + }, + + 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(); }, }, };