Merge pull request #3294 from Safelite/feature/CASH-3054

CASH-3054 - inconsistent fade transition Part Question

src/digital-components/question-chain/question-chain.spec.js

@@ -324,18 +324,65 @@ describe("Question Chain component", () => {
             });
         });
 
-        test("should trigger scroll to .current-question if returnedAnswer is a nextQuestion (not a final answer)", async () => {
+        test("should defer scroll until after the next question fade enters", async () => {
             //Arrange
-            const { wrapper } = setupMocks({});
+            const { wrapper } = setupMocks({
+                questionDataProp: [
+                    {
+                        questionSequence: 1,
+                        questionText: "Question 1?",
+                        answers: [
+                            {
+                                answerResult: "",
+                                answerText: "Yes",
+                                nextQuestionSequence: 3,
+                            },
+                            {
+                                answerResult: "DB10840",
+                                answerText: "No",
+                                nextQuestionSequence: null,
+                            },
+                        ],
+                    },
+                    {
+                        questionSequence: 3,
+                        questionText: "Question 3?",
+                        answers: [
+                            {
+                                answerResult: "DB09410",
+                                answerText: "Yes",
+                                nextQuestionSequence: null,
+                            },
+                        ],
+                    },
+                ],
+            });
+            await nextTick();
             const testReturnedAnswer = "1|nextQuestion|3|No";
+            const scrollSpy = jest.spyOn(wrapper.vm, "scrollCurrentQuestionIntoView");
 
             //Act
             wrapper.vm.getQuestionChainAnswerIfComplete(testReturnedAnswer);
+            const nextQuestion = wrapper.vm.questions.find((q) => q.questionSequence === 3);
 
-            await nextTick();
+            //Assert — advancing via nextQuestion no longer scrolls immediately
+            expect(scrollSpy).not.toHaveBeenCalled();
+            expect(wrapper.vm.currentQuestionNum).toBe(3);
+            expect(wrapper.vm.isCurrentQuestion(nextQuestion)).toBe(true);
 
-            //Assert
-            expect(Element.prototype.scrollIntoView).toHaveBeenCalled();
+            wrapper.vm.onQuestionEnter(nextQuestion);
+
+            expect(scrollSpy).toHaveBeenCalledTimes(1);
+        });
+
+        test("should not scroll onQuestionEnter for a non-current question", () => {
+            const { wrapper } = setupMocks({});
+            const scrollSpy = jest.spyOn(wrapper.vm, "scrollCurrentQuestionIntoView");
+            const answeredQuestion = wrapper.vm.questions[0];
+
+            wrapper.vm.onQuestionEnter(answeredQuestion);
+
+            expect(scrollSpy).not.toHaveBeenCalled();
         });
 
         test("should return answer object if returnedAnswer is a final matching answer", async () => {
@@ -528,6 +575,27 @@ describe("Question Chain component", () => {
             expect(wrapper.vm.currentQuestionNum).toBe(2);
             expect(wrapper.vm.isQuestionVisible(wrapper.vm.questions[1])).toBe(true);
         });
+
+        test("should show only Q1 and Q2 after Cherokee Q1 Yes then Q2 No", async () => {
+            const { wrapper } = setupMocks({
+                questionDataProp: getCherokeeWindshieldQuestions(),
+            });
+            await nextTick();
+
+            wrapper.vm.handleAnswer(wrapper.vm.questions[0], "1|nextQuestion|2|Yes");
+            wrapper.vm.handleAnswer(wrapper.vm.questions[1], "2|answer|DW02264|No");
+
+            const visibleQuestions = wrapper.vm.questions.filter((question) =>
+                wrapper.vm.isQuestionVisible(question)
+            );
+
+            expect(wrapper.vm.currentQuestionNum).toBe(0);
+            expect(visibleQuestions).toHaveLength(2);
+            expect(visibleQuestions.map((question) => question.questionSequence)).toEqual([1, 2]);
+            expect(wrapper.vm.isCurrentQuestion(wrapper.vm.questions[0])).toBe(false);
+            expect(wrapper.vm.isCurrentQuestion(wrapper.vm.questions[1])).toBe(false);
+            expect(wrapper.vm.isQuestionVisible(wrapper.vm.questions[2])).toBe(false);
+        });
     });
 });
 

src/digital-components/question-chain/question-chain.vue

@@ -1,10 +1,16 @@
 <template>
-    <div v-for="(q, i) in questions" :key="i">
-        <transition appear name="fade" mode="out-in">
+    <div v-for="q in questions" :key="q.questionSequence">
+        <transition
+            appear
+            :css="isCurrentQuestion(q)"
+            :name="isCurrentQuestion(q) ? 'fade' : undefined"
+            mode="out-in"
+            @after-enter="onQuestionEnter(q)">
             <buttonQuestion
                 v-if="isQuestionVisible(q)"
+                :key="q.questionSequence"
                 class="radioQuestion"
-                :class="isCurrentQuestion(q) && 'current-question'"
+                :class="{ 'current-question': isCurrentQuestion(q) }"
                 :questionText="q.questionText"
                 :answers="q.answers"
                 :groupName="`question-${index}-${q.questionSequence}`"
@@ -61,7 +67,6 @@ export default {
 
         if (this.questions.length > 0) {
             this.initializeCurrentQuestionNum();
-            this.scrollCurrentQuestionIntoView();
         }
     },
     methods: {
@@ -105,6 +110,11 @@ export default {
                 this.currentQuestionNum = this.getQuestionSequence(firstUnanswered);
             }
         },
+        onQuestionEnter(question) {
+            if (this.isCurrentQuestion(question)) {
+                this.scrollCurrentQuestionIntoView();
+            }
+        },
         scrollCurrentQuestionIntoView() {
             this.$nextTick(() => {
                 document.querySelector(".current-question")?.scrollIntoView({ behavior: "smooth" });
@@ -201,7 +211,6 @@ export default {
             if (questionType === "nextQuestion") {
                 // update to next question index
                 this.currentQuestionNum = Number(questionAnswer);
-                this.scrollCurrentQuestionIntoView();
                 return {
                     incomplete: true,
                     answeredQuestions,