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 (
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 {
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 {
+ 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 {
await t.wait(1000) // Wait for map to finish rendering
}
+export async function waitForQuizLoading(t: TestController): Promise {
+ // 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 {
if (options.hover) {
await t.hover('#searchbox') // Ensure the mouse pointer isn't hovering over any elements that change appearance when hovered over