diff --git a/src/common-components/layouts/questions-page-layout/questions-page-layout.vue b/src/common-components/layouts/questions-page-layout/questions-page-layout.vue index d2d6aaab2..1ab40a7b0 100644 --- a/src/common-components/layouts/questions-page-layout/questions-page-layout.vue +++ b/src/common-components/layouts/questions-page-layout/questions-page-layout.vue @@ -27,7 +27,7 @@ ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!isMetaValid" - @back-clicked="handleBackButtonClicked" + @back-clicked="handleBackButtonAction" @ForwardClicked="handleForwardButtonAction" /> diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 11874670b..bf68a4363 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -100,7 +100,7 @@ export default { return false; } - // Example returnedAnswers: + // returnedAnswer examples: // "1|nextQuestion|3|No" // "5|answer|DW02104|Yes" @@ -108,15 +108,12 @@ export default { const questionNum = parseInt(returnedAnswerArray[0]); const questionType = returnedAnswerArray[1]; const questionAnswer = returnedAnswerArray[2]; - const questionAnswerText = returnedAnswerArray[3]; const answeredQuestions = []; this.questions.forEach((q) => { // find this question and mark it as "answered" by populating answerSelected if (q.questionSequence === questionNum) { q.answerSelected = returnedAnswer; - q.answerNumber = questionNum; - q.selectedAnswerText = questionAnswerText; } // remove all answers AFTER this question... // (needed in case user is changing previously answered questions) @@ -126,6 +123,7 @@ export default { if (q.answerSelected) { answeredQuestions.push({ questionText: q.questionText, + selectedAnswer: q.answerSelected, selectedAnswerText: q.answerSelected.split("|")[3], questionNum: q.questionSequence, }); diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js index bfc65da16..d5d1de4e6 100644 --- a/src/common-components/textbox-question/textbox-question.spec.js +++ b/src/common-components/textbox-question/textbox-question.spec.js @@ -53,7 +53,7 @@ describe("textboxQuestion.vue", () => { expect(paragraph.attributes("class")).toContain("rounded-pill"); }); - it.only("Should return form-control class", async () => { + it("Should return form-control class", async () => { // Act const wrapper = shallowMount(textboxQuestion, { global: { diff --git a/src/layouts/capability-questions/capability-questions.spec.js b/src/layouts/capability-questions/capability-questions.spec.js index c59857182..31fc63af8 100644 --- a/src/layouts/capability-questions/capability-questions.spec.js +++ b/src/layouts/capability-questions/capability-questions.spec.js @@ -84,12 +84,14 @@ const baseStoreGettersDamage = () => { { questionText: "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, { questionText: "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?", + selectedAnswer: "2|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 2, }, @@ -166,10 +168,10 @@ describe("capabilityQuestions.vue", () => { }); describe("watch on selectedAnswers should be set up...", () => { - test("Should trigger handleAnswerUpdates if watched data changes", async () => { + test("Should trigger handleCompletedQuestionChainAnswers if watched data changes", async () => { // Arrange const { wrapper } = setupMocks({}); - const spy = jest.spyOn(wrapper.vm, "handleAnswerUpdates"); + const spy = jest.spyOn(wrapper.vm, "handleCompletedQuestionChainAnswers"); // Act wrapper.setData({ @@ -180,12 +182,14 @@ describe("capabilityQuestions.vue", () => { { questionText: "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, { questionText: "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?", + selectedAnswer: "2|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 2, }, diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue index c3122b9a3..ffef2f6fa 100644 --- a/src/layouts/capability-questions/capability-questions.vue +++ b/src/layouts/capability-questions/capability-questions.vue @@ -112,7 +112,7 @@ export default { "selectedAnswers." + glass.answerKey, (newValue) => { if (newValue && Object.keys(newValue).length > 0) { - this.handleAnswerUpdates(newValue, glass.answerKey); + this.handleCompletedQuestionChainAnswers(newValue, glass.answerKey); } }, { deep: true } diff --git a/src/layouts/molding-questions/molding-questions.spec.js b/src/layouts/molding-questions/molding-questions.spec.js index a408a406f..cff119c73 100644 --- a/src/layouts/molding-questions/molding-questions.spec.js +++ b/src/layouts/molding-questions/molding-questions.spec.js @@ -88,12 +88,14 @@ const baseStoreGettersDamage = () => { { questionText: "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, { questionText: "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?", + selectedAnswer: "2|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 2, }, @@ -170,10 +172,10 @@ describe("moldingQuestions.vue", () => { }); describe("watch on selectedAnswers should be set up...", () => { - test("Should trigger handleAnswerUpdates if watched data changes", async () => { + test("Should trigger handleCompletedQuestionChainAnswers if watched data changes", async () => { // Arrange const { wrapper } = setupMocks({}); - const spy = jest.spyOn(wrapper.vm, "handleAnswerUpdates"); + const spy = jest.spyOn(wrapper.vm, "handleCompletedQuestionChainAnswers"); // Act wrapper.setData({ @@ -184,12 +186,14 @@ describe("moldingQuestions.vue", () => { { questionText: "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, { questionText: "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?", + selectedAnswer: "2|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 2, }, diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue index b0e767b21..53a010d72 100644 --- a/src/layouts/molding-questions/molding-questions.vue +++ b/src/layouts/molding-questions/molding-questions.vue @@ -111,7 +111,7 @@ export default { "selectedAnswers." + glass.answerKey, (newValue) => { if (newValue && Object.keys(newValue).length > 0) { - this.handleAnswerUpdates(newValue, glass.answerKey); + this.handleCompletedQuestionChainAnswers(newValue, glass.answerKey); } }, { deep: true } diff --git a/src/layouts/part-questions/part-questions.spec.js b/src/layouts/part-questions/part-questions.spec.js index a6d0423a4..e8adef4ff 100644 --- a/src/layouts/part-questions/part-questions.spec.js +++ b/src/layouts/part-questions/part-questions.spec.js @@ -78,12 +78,14 @@ const baseStoreGettersDamage = () => { { questionText: "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, { questionText: "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 2, }, @@ -152,14 +154,14 @@ describe("partQuestions.vue...", () => { }); describe("watch on selectedAnswers should be set up...", () => { - test("Should trigger handleAnswerUpdates if watched data changes", async () => { + test("Should trigger handleCompletedQuestionChainAnswers if watched data changes", async () => { // Arrange store.getters = { pageData: baseStoreGettersPageData, damage: baseStoreGettersDamage, }; const { wrapper } = setupMocks({}); - const spy = jest.spyOn(wrapper.vm, "handleAnswerUpdates"); + const spy = jest.spyOn(wrapper.vm, "handleCompletedQuestionChainAnswers"); // Act wrapper.setData({ @@ -169,11 +171,13 @@ describe("partQuestions.vue...", () => { answeredQuestions: [ { questionText: "One?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, { questionText: "Two?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 2, }, diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue index 8f942ccfd..770c8443f 100644 --- a/src/layouts/part-questions/part-questions.vue +++ b/src/layouts/part-questions/part-questions.vue @@ -109,7 +109,7 @@ export default { "selectedAnswers." + glass.answerKey, (newValue) => { if (newValue && Object.keys(newValue).length > 0) { - this.handleAnswerUpdates(newValue, glass.answerKey); + this.handleCompletedQuestionChainAnswers(newValue, glass.answerKey); } }, { deep: true } diff --git a/src/mixins/vehicle-questions-mixin.js b/src/mixins/vehicle-questions-mixin.js index db1905310..3a4e04af3 100644 --- a/src/mixins/vehicle-questions-mixin.js +++ b/src/mixins/vehicle-questions-mixin.js @@ -150,7 +150,7 @@ export default { return glass; }, - handleAnswerUpdates(answer, glassKey, vm) { + handleCompletedQuestionChainAnswers(answer, glassKey, vm) { // only runs when all questions in a question-chain have been answered // when selectedAnswers updates, user has completed this part's question chain and has a final answer // (does not get run for each invididual question's answer, only when @@ -176,51 +176,39 @@ export default { self.selectedAnswers = {}; // loop through every answered question on the currently answered glass part - answer.answeredQuestions?.forEach((answeredQuestion) => { + answer.answeredQuestions?.forEach((answeredQuestion, answeredQuestionIndex) => { /* answeredQuestion example format: { "questionText": "Is your Grand Cherokee the Laredo model?", + "selectedAnswer": "1|nextQuestion|3|Yes", "selectedAnswerText": "Yes", "questionNum": 1, } */ const answeredQuestionText = answeredQuestion.questionText.toUpperCase(); - const answeredQuestionAnswer = answeredQuestion.selectedAnswerText.toUpperCase(); + const answeredQuestionAnswer = answeredQuestion.selectedAnswer.toUpperCase(); + const answeredQuestionAnswerText = + answeredQuestion.selectedAnswerText.toUpperCase(); + const answeredQuestionNum = answeredQuestion.questionNum; // HANDLE DUPLICATE QUESTIONS // loop through all glass data self.questionsData.forEach((glass, glassIndex) => { - /* glass example format: - { - "glassName": "Single", - "glassLocation": "Windshield", - "parts": null, - "questions": [ - { - "questionSequence": 1, - "questionText": "Is your vehicle equipped with a black dotted pattern behind the rear view mirror, known as a third visor frit?", - "answers": [ - { - "answerResult": "DW01537", - "answerText": "Yes", - "nextQuestionSequence": null - }, - { - "answerResult": "DW01537b", - "answerText": "No", - "nextQuestionSequence": null - } - ] - } - ], - "answerKey": "Windshield-Single", - "answerData": null - } - */ + if (glassIndex === answer.index) { + glass.questions.forEach((question, questionIndex) => { + // clear out any previously set answers on first pass with first answered question + if (answeredQuestionIndex === 0) question.answerSelected = null; - // limit duplicate search to glass pieces that follow after the currently being answered glass piece + if (answeredQuestionNum - 1 === questionIndex) { + // on the right question + question.answerSelected = answeredQuestionAnswer; + } + }); + } + + // limit duplicate search to glass pieces that are in or follow after the currently being answered glass piece if (glassIndex > answer.index) { let indexToSuppressTo; // reset this glass piece, in case user is changing their previous answers @@ -229,8 +217,8 @@ export default { // loop through this glass piece's questions, looking for a questionText match glass.questions.forEach((question, questionIndex) => { - // clear out any previously set answers - question.answerSelected = null; + // clear out any previously set answers on first pass with first answer + if (answeredQuestionIndex === 0) question.answerSelected = null; // clear or set suppressThisQuestion property for each question if (indexToSuppressTo && questionIndex + 1 < indexToSuppressTo) { @@ -245,7 +233,9 @@ export default { // handle matching answer in duplicated question question.answers.forEach((ans) => { - if (ans.answerText.toUpperCase() === answeredQuestionAnswer) { + if ( + ans.answerText.toUpperCase() === answeredQuestionAnswerText + ) { matchedAnswer = ans; ans.selected = true; } else { @@ -339,7 +329,7 @@ export default { glass.isSuppressedPart = true; } } - }); + }); // DONE looping through glass.questions // Update key to force re-render of glass piece with duplicate question in case user changes previous related answer in the chain self.questionsData[glassIndex].key = @@ -469,6 +459,7 @@ export default { }, // Can't use `this` because navigateForward is also called from quote navigateBack(vm) { + console.log("VQM = = navigateBack() run "); const self = vm ?? this; const partsOrQuestions = ( self.$store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS) ?? diff --git a/src/mixins/vehicle-questions-mixin.spec.js b/src/mixins/vehicle-questions-mixin.spec.js index 4bfa9285c..6747e618a 100644 --- a/src/mixins/vehicle-questions-mixin.spec.js +++ b/src/mixins/vehicle-questions-mixin.spec.js @@ -410,7 +410,7 @@ describe("vehicle-questions-mixin", () => { }); }); - describe("handleAnswerUpdates", () => { + describe("handleCompletedQuestionChainAnswers", () => { describe("selectedAnswers", () => { test("should be cleared to be empty", () => { // Arrange @@ -419,6 +419,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test duplicate question 1?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, @@ -438,7 +439,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - wrapper.vm.handleAnswerUpdates(answer, "", wrapper.vm); + wrapper.vm.handleCompletedQuestionChainAnswers(answer, "", wrapper.vm); // Assert expect(wrapper.vm.selectedAnswers).toMatchObject({}); @@ -453,6 +454,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test duplicate question 1?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, @@ -477,7 +479,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - wrapper.vm.handleAnswerUpdates(answer, "", wrapper.vm); + wrapper.vm.handleCompletedQuestionChainAnswers(answer, "", wrapper.vm); // Assert expect(wrapper.vm.questionsData[1].answerData).toEqual(null); @@ -489,6 +491,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test duplicate question 1?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, @@ -514,7 +517,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - wrapper.vm.handleAnswerUpdates(answer, "", wrapper.vm); + wrapper.vm.handleCompletedQuestionChainAnswers(answer, "", wrapper.vm); // Assert expect(wrapper.vm.questionsData[1].isSuppressedPart).toEqual(null); @@ -526,6 +529,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test duplicate question 1?", + selectedAnswer: "1|nextQuestion|3|Yes", selectedAnswerText: "Yes", questionNum: 1, }, @@ -587,7 +591,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - wrapper.vm.handleAnswerUpdates(answer, "", wrapper.vm); + wrapper.vm.handleCompletedQuestionChainAnswers(answer, "", wrapper.vm); // Assert expect(wrapper.vm.questionsData[1].questions[0].answerSelected).toEqual(null); @@ -603,6 +607,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test duplicate question 1?", + selectedAnswer: "1|nextQuestion|3|No", selectedAnswerText: "No", questionNum: 1, }, @@ -661,7 +666,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - wrapper.vm.handleAnswerUpdates(answerNo, "", wrapper.vm); + wrapper.vm.handleCompletedQuestionChainAnswers(answerNo, "", wrapper.vm); const glassWithDuplicate = wrapper.vm.questionsData[1]; // Assert @@ -675,6 +680,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test duplicate question 1?", + selectedAnswer: "1|nextQuestion|3|No", selectedAnswerText: "No", questionNum: 1, }, @@ -731,7 +737,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - wrapper.vm.handleAnswerUpdates(answerNo, "", wrapper.vm); + wrapper.vm.handleCompletedQuestionChainAnswers(answerNo, "", wrapper.vm); const duplicateQuestion = wrapper.vm.questionsData[1].questions[0]; // Assert @@ -746,6 +752,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test duplicate question 1?", + selectedAnswer: "1|nextQuestion|3|No", selectedAnswerText: "No", questionNum: 1, }, @@ -835,7 +842,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - wrapper.vm.handleAnswerUpdates(answerNo, "", wrapper.vm); + wrapper.vm.handleCompletedQuestionChainAnswers(answerNo, "", wrapper.vm); const nextQuestionAfterDuplicate = wrapper.vm.questionsData[1].questions[2]; // Assert @@ -849,6 +856,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test question 3?", + selectedAnswer: "1|nextQuestion|3|No", selectedAnswerText: "No", questionNum: 1, }, @@ -969,7 +977,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - wrapper.vm.handleAnswerUpdates(answerNo, "", wrapper.vm); + wrapper.vm.handleCompletedQuestionChainAnswers(answerNo, "", wrapper.vm); const duplicatedQuestion = wrapper.vm.questionsData[1].questions[2]; const duplicatedQuestionAnswer = duplicatedQuestion.answers.filter((a) => { return a.selected; @@ -997,6 +1005,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test duplicate question 1?", + selectedAnswer: "1|nextQuestion|3|No", selectedAnswerText: "No", questionNum: 1, }, @@ -1085,7 +1094,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - wrapper.vm.handleAnswerUpdates(answerNo, "", wrapper.vm); + wrapper.vm.handleCompletedQuestionChainAnswers(answerNo, "", wrapper.vm); // Assert expect( @@ -1109,6 +1118,7 @@ describe("vehicle-questions-mixin", () => { answeredQuestions: [ { questionText: "Test question 3?", + selectedAnswer: "1|nextQuestion|3|No", selectedAnswerText: "No", questionNum: 1, }, @@ -1197,7 +1207,7 @@ describe("vehicle-questions-mixin", () => { ]; // Act - await wrapper.vm.handleAnswerUpdates(answerNo, "", wrapper.vm); + await wrapper.vm.handleCompletedQuestionChainAnswers(answerNo, "", wrapper.vm); const questionsToTest = wrapper.vm.questionsData[1].questions; const answerLeadingToDuplicate = questionsToTest[0].answers[1];