From 62f8e70c931a84c3ef3009665ad2b4232f7ed835 Mon Sep 17 00:00:00 2001
From: Kavi Gupta <kavi@berkeley.edu>
Date: Sat, 11 Jan 2025 15:59:20 -0500
Subject: [PATCH] wait for quiz loading before pressing button

doesn't do much now but is important for infinite quiz
---
 react/src/components/quiz-panel.tsx | 1 +
 react/test/quiz_test_utils.ts       | 5 +++--
 react/test/test_utils.ts            | 8 ++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/react/src/components/quiz-panel.tsx b/react/src/components/quiz-panel.tsx
index 9f7eb22e..e0af1aa2 100644
--- a/react/src/components/quiz-panel.tsx
+++ b/react/src/components/quiz-panel.tsx
@@ -112,6 +112,7 @@ function QuizPanelNoResets(props: { quizDescriptor: QuizDescriptor, todayName?:
                     const message = index < 0 ? 'Loading quiz...' : 'Loading results...'
                     return (
                         <div>
+                            <input type="hidden" data-test-loading-quiz={true} />
                             <div className={headerClass}>{message}</div>
                             <LongLoad />
                         </div>
diff --git a/react/test/quiz_test_utils.ts b/react/test/quiz_test_utils.ts
index e2a4e1fe..d453722d 100644
--- a/react/test/quiz_test_utils.ts
+++ b/react/test/quiz_test_utils.ts
@@ -5,7 +5,7 @@ import { promisify } from 'util'
 import { execa, execaSync } from 'execa'
 import { ClientFunction, Selector } from 'testcafe'
 
-import { safeReload, screencap, urbanstatsFixture } from './test_utils'
+import { safeReload, screencap, urbanstatsFixture, waitForQuizLoading } from './test_utils'
 
 export async function quizScreencap(t: TestController): Promise<void> {
     await t.eval(() => {
@@ -27,7 +27,8 @@ export async function clickButtons(t: TestController, whichs: string[]): Promise
 }
 // click the kth button with id quiz-answer-button-$which
 
-export function clickButton(t: TestController, which: string): TestControllerPromise {
+export async function clickButton(t: TestController, which: string): Promise<TestControllerPromise> {
+    await waitForQuizLoading(t)
     return t.click(Selector('div').withAttribute('id', `quiz-answer-button-${which}`))
 }
 
diff --git a/react/test/test_utils.ts b/react/test/test_utils.ts
index 6dff1aed..43a0c798 100644
--- a/react/test/test_utils.ts
+++ b/react/test/test_utils.ts
@@ -75,6 +75,14 @@ export async function waitForLoading(t: TestController): Promise<void> {
     await t.wait(1000) // Wait for map to finish rendering
 }
 
+export async function waitForQuizLoading(t: TestController): Promise<void> {
+    // Wait for various components that need to load
+    while (await Selector(`[data-test-loading-quiz=true]`).exists) {
+        // this really shouldn't take that long to load, a few extra checks should be fine
+        await t.wait(100)
+    }
+}
+
 async function prepForImage(t: TestController, options: { hover: boolean, wait: boolean }): Promise<void> {
     if (options.hover) {
         await t.hover('#searchbox') // Ensure the mouse pointer isn't hovering over any elements that change appearance when hovered over