Fix bug with quiz next button skipping questions (#2312)

* Fix bug with click event triggering multiple times * Add test case for next Quiz next button
MarkBind · Jul 2, 2023 · 5abce7a · 5abce7a
1 parent d70b7e4
commit 5abce7a
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 1 deletion.
diff --git a/packages/vue-components/src/__tests__/Quiz.spec.js b/packages/vue-components/src/__tests__/Quiz.spec.js
@@ -242,4 +242,29 @@ describe('Quizzes', () => {
     await timeoutRenderQuestion();
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  test.skip('with 3 questions 2 clicks on next goes to the second question', async () => {
+    const wrapper = mount(Quiz, {
+      slots: {
+        default: [MCQ_QUESTION, TEXT_QUESTION, CHECKBOX_QUESTION],
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    // Click 'begin'
+    await wrapper.find('button').trigger('click');
+
+    await timeoutRenderQuestion();
+    // Click option 1 of mcq question
+    await wrapper.findAllComponents(QOption).at(0).find('div').trigger('click');
+    // Click check of mcq question
+    await wrapper.find('button.btn-primary').trigger('click');
+
+    // Click next twice
+    wrapper.find('button.btn-primary').trigger('click');
+    await wrapper.find('button.btn-primary').trigger('click');
+
+    await timeoutRenderQuestion();
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap
@@ -255,6 +255,86 @@ exports[`Quizzes with 2 questions retry goes back to first 1`] = `
 </div>
 `;
 
+exports[`Quizzes with 3 questions 2 clicks on next goes to the second question 1`] = `
+<div
+  class="quiz-container"
+>
+  <!---->
+   
+  <div
+    class="progress intro-outro-card"
+    style="height: 1px;"
+  >
+    <div
+      aria-valuemax="3"
+      aria-valuemin="0"
+      aria-valuenow="2"
+      class="progress-bar progress-bar-z"
+      role="progressbar"
+      style="width: 66.66666666666666%;"
+    />
+  </div>
+   
+  <!---->
+  <div
+    class="card question"
+  >
+    <!---->
+     
+    <div
+      class="card-body"
+    >
+      
+  ... Text question ...
+   
+      <div
+        class="mb-2"
+      >
+        <textarea
+          class="form-control"
+        />
+         
+        <!---->
+      </div>
+       
+      <!---->
+       
+      <!---->
+    </div>
+     
+    <div
+      class="card-footer alert-light border-top border-light text-dark"
+    >
+      <!---->
+       
+      <div
+        class="float-end"
+      >
+        <button
+          class="btn btn-success q-btn ms-1"
+          type="button"
+        >
+          
+          Hint
+        
+        </button>
+        <button
+          class="btn btn-primary q-btn ms-1"
+          type="button"
+        >
+          
+          Check
+        
+        </button>
+      </div>
+    </div>
+  </div>
+  <!---->
+   
+  <!---->
+</div>
+`;
+
 exports[`Quizzes with all questions marks 3/4 correct shows ending screen 1`] = `
 <div
   class="quiz-container"

diff --git a/packages/vue-components/src/questions/Question.vue b/packages/vue-components/src/questions/Question.vue
@@ -84,7 +84,7 @@
             key="active"
             type="button"
             class="btn btn-primary q-btn ms-1"
-            @click="gotoNextQuestion"
+            @click.once="gotoNextQuestion"
           >
             Next
           </button>