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 (
+
{message}
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