Add quiz clickthrough test (#290)

react/src/quiz/quiz-question.js

@@ -104,7 +104,7 @@ class QuizQuestion extends React.Component {
                 <div className="gap"></div>
                 <div style={row_style}>
                     <div style={{ width: "50%", padding: "0.5em" }}>
-                        <div role='button' className={button_a} onClick={() => this.props.on_select("A")} style={button_style}>
+                        <div role='button' id="quiz-answer-button-a" className={button_a} onClick={() => this.props.on_select("A")} style={button_style}>
                             <span style={{ margin: "auto" }}>
                                 <div className={"centered_text " + quiztext_css}>
                                     {this.get_option_a()}
@@ -113,7 +113,7 @@ class QuizQuestion extends React.Component {
                         </div>
                     </div>
                     <div style={{ width: "50%", padding: "0.5em" }}>
-                        <div role='button' className={button_b} onClick={() => this.props.on_select("B")} style={button_style}>
+                        <div role='button' id="quiz-answer-button-b" className={button_b} onClick={() => this.props.on_select("B")} style={button_style}>
                             <span style={{ margin: "auto" }}>
                                 <div className={"centered_text " + quiztext_css}>
                                     {this.get_option_b()}

react/test/quiz_test.js

@@ -1,8 +1,48 @@
+import { Selector } from 'testcafe';
 import { TARGET, screencap } from './test_utils';
 
+fixture('quiz clickthrough test')
+    .page(TARGET + '/quiz.html?date=99')
+    // no local storage
+    .beforeEach(async t => {
+        await t.eval(() => {
+            localStorage.clear()
+        });
+    });
+
+// click the kth button with id quiz-answer-button-$which
+function click_button(t, which) {
+    return t.click(Selector("div").withAttribute("id", "quiz-answer-button-" + which));
+}
+
+test('quiz-clickthrough-test', async t => {
+    await click_button(t, "a");
+    await t.wait(2000);
+    await screencap(t, "quiz/clickthrough-1");
+    await click_button(t, "b");
+    await t.wait(2000);
+    await screencap(t, "quiz/clickthrough-2");
+    await click_button(t, "a");
+    await t.wait(2000);
+    await screencap(t, "quiz/clickthrough-3");
+    await click_button(t, "b");
+    await t.wait(2000);
+    await screencap(t, "quiz/clickthrough-4");
+    await click_button(t, "a");
+    await t.wait(2000);
+    await t.eval(() => document.getElementById("quiz-timer").remove());
+    await t.wait(3000);
+    await screencap(t, "quiz/clickthrough-5");
+    let quiz_history = await t.eval(() => {
+        return JSON.stringify(JSON.parse(localStorage.getItem("quiz_history")));
+    });
+    await t.expect(quiz_history).eql('{"99":{"choices":["A","B","A","B","A"],"correct_pattern":[true,false,true,false,false]}}');
+
+});
+
 fixture('quiz result test')
     .page(TARGET + '/quiz.html?date=100')
-    // no local storage
+    // very specific local storage
     .beforeEach(async t => {
         await t.eval(() => {
             localStorage.clear()