wait for quiz loading before pressing button

doesn't do much now but is important for infinite quiz
kavigupta · Jan 11, 2025 · 62f8e70 · 62f8e70
1 parent b41b50e
commit 62f8e70
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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