From 86a0ba4621068ad5beb446388e7d7bf284096798 Mon Sep 17 00:00:00 2001 From: Kroell Date: Mon, 10 Apr 2023 16:20:39 -0400 Subject: [PATCH 1/8] simulate click event on radio button to fix undefined value --- .../vehicle-parts/glass-part-question/glass-part-question.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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..fe7d1b04 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 @@ -182,16 +182,16 @@ 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() { 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 this.$nextTick(() => { - document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true; + document.querySelector('input[value=' + this.selectedPartNumber + ']').click(); }); } else { From 13693b3d27395c64ffd08c1aaaded0b4ac243b5b Mon Sep 17 00:00:00 2001 From: Kroell Date: Mon, 10 Apr 2023 16:23:15 -0400 Subject: [PATCH 2/8] ensure Continue button stays disabled until all selections are made --- .../glass-part-question/glass-part-question.vue | 7 ------- 1 file changed, 7 deletions(-) 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 fe7d1b04..7ab75e91 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 @@ -194,13 +194,6 @@ export default { document.querySelector('input[value=' + this.selectedPartNumber + ']').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 }; - } - } } }, From 8f18b053f0f09cdc666e55bc795e454d25cc8518 Mon Sep 17 00:00:00 2001 From: Kroell Date: Mon, 10 Apr 2023 16:24:43 -0400 Subject: [PATCH 3/8] change to method name --- .../vehicle-parts/glass-part-question/glass-part-question.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 7ab75e91..c7c607dd 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 @@ -182,7 +182,7 @@ export default { return tintSourceObject.src; }, - AutoSelect() { + 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. @@ -210,7 +210,7 @@ export default { }, watch: { selectedTint() { - this.AutoSelect(); + this.AutoSelectIfSinglePart(); }, }, }; From 1ccc74d34f9cf1ccb2450eb02d1c4b93ee242e0a Mon Sep 17 00:00:00 2001 From: Kroell Date: Mon, 10 Apr 2023 16:26:18 -0400 Subject: [PATCH 4/8] add method to reset selections --- .../glass-part-question/glass-part-question.vue | 7 +++++++ 1 file changed, 7 insertions(+) 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 c7c607dd..46818337 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 @@ -182,6 +182,13 @@ 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(); + }, + AutoSelectIfSinglePart() { if (this.partsForSelectedTint?.length > 0) { From 403b0e5807543a0f8c07051b999f717237193321 Mon Sep 17 00:00:00 2001 From: Kroell Date: Tue, 11 Apr 2023 14:19:21 -0400 Subject: [PATCH 5/8] remove test - no longer applicable --- .../glass-part-question.spec.js | 25 ------------------- 1 file changed, 25 deletions(-) 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..4a3d50e4 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 = [ [ From 4784112577509644b0f88e71c1fd04f4ee13ca37 Mon Sep 17 00:00:00 2001 From: Kroell Date: Tue, 11 Apr 2023 16:46:43 -0400 Subject: [PATCH 6/8] commit --- .../glass-part-question/glass-part-question.spec.js | 2 +- .../glass-part-question/glass-part-question.vue | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) 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 4a3d50e4..1c36c510 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 @@ -234,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}); 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 46818337..baaa6081 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" /> @@ -196,10 +195,12 @@ export default { 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 + ']').click(); + document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true; }); + + } } }, From aac0efd43fc995003633c2c76c0b01f4485df903 Mon Sep 17 00:00:00 2001 From: Kroell Date: Wed, 12 Apr 2023 13:47:18 -0400 Subject: [PATCH 7/8] updates to autoselect method --- .../glass-part-question/glass-part-question.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 baaa6081..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 @@ -197,10 +197,10 @@ export default { // //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(); }); - - } } }, From 179c2cbb8bbf469714e33234e68d6d1ec3e5d83f Mon Sep 17 00:00:00 2001 From: Kroell Date: Wed, 12 Apr 2023 13:48:17 -0400 Subject: [PATCH 8/8] mock click method in unit test --- .../glass-part-question/glass-part-question.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1c36c510..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 @@ -234,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({clicked: false}); + document.querySelector = jest.fn().mockReturnValue({clicked: false, click: jest.fn()}); return { wrapper }; }