{"id":"l-tj-3-3","courseId":"testing-javascript","lang":"en","kind":"lesson","summary":"Test UI that changes after data loads or fails, using findBy queries and waitFor instead of sleeps, and control the async dependency to test loading, success and error states.","html":"

The balances panel in Splitwise-lite loads data from the server. For a moment it says “Loading balances…”, then it shows the list, or, on a train in a tunnel, “Could not load balances.” with a “Try again” button. Each of those states is something a user sees, so each deserves a test. The difficulty is time: the DOM you want to check doesn’t exist yet when the test reaches the line that checks it.

\n

The wrong way: sleeping

\n

The first instinct is to wait a bit:

\n
JavaScript
mountBalancePanel(document.body, loadBalances);\nawait new Promise((resolve) => setTimeout(resolve, 500)); // please be enough\nexpect(screen.getByRole('list', { name: 'Balances' })).toBeInTheDocument();
\n

On your laptop the data arrives in 5 ms and the test wastes 495. On a busy CI runner it sometimes takes 600, and the test fails for no reason. Multiply by a few hundred tests and you have a slow suite that is red every Tuesday. Wait for the condition, not for the clock.

\n

findBy: wait for an element

\n

findBy queries are getBy queries that retry. They return a promise that resolves as soon as the element exists, and reject if it doesn’t appear within a timeout (1,000 ms by default):

\n
src/balance-panel.test.js
// @vitest-environment jsdom\nimport { afterEach, test, expect, vi } from 'vitest';\nimport { screen } from '@testing-library/dom';\nimport '@testing-library/jest-dom/vitest';\nimport { mountBalancePanel } from './balance-panel.js';\n\nafterEach(() => {\n  document.body.innerHTML = '';\n});\n\ntest('shows a loading message, then the balances', async () => {\n  const loadBalances = vi.fn().mockResolvedValue({ Ana: 500, Ben: -500 });\n\n  mountBalancePanel(document.body, loadBalances);\n\n  expect(screen.getByRole('status')).toHaveTextContent('Loading balances');\n  expect(await screen.findByRole('list', { name: 'Balances' })).toBeInTheDocument();\n  expect(screen.queryByRole('status')).not.toBeInTheDocument();\n});
\n

The test is fast when the code is fast and patient when it is slow, and it reads like the story of what the user sees. The last line matters too: a panel that shows the data but leaves “Loading…” on screen is a real bug.

\n

waitFor: wait for anything else

\n

waitFor(callback) runs the callback, and if it throws, runs it again every 50 ms until it passes or the timeout expires. Use it for conditions that aren’t “an element appeared”:

\n
JavaScript
await waitFor(() => expect(loadBalances).toHaveBeenCalledTimes(2));
\n

Vitest has its own vi.waitFor that works the same way outside the DOM. For the reverse case, waitForElementToBeRemoved(() => screen.queryByRole('status')) waits for something to disappear.

\n
\n A timeline: the query is retried every 50 milliseconds; it fails while loading, then passes once the list renders, well before the 1000 millisecond timeout.\n \n 0 ms\n 1000 ms\n \n timeout\n \n \n \n \n not there yet\n \n list found\n test continues immediately\n
findBy and waitFor poll until the condition holds
\n\n

Controlling time from the test side

\n

findBy handles waiting. To test each state deterministically, you also control the dependency. Since loadBalances is passed in, a vi.fn can make it do anything:

\n\n
JavaScript
test('keeps showing the loading message until data arrives', async () => {\n  let finish;\n  const loadBalances = vi.fn(() => new Promise((resolve) => { finish = resolve; }));\n\n  mountBalancePanel(document.body, loadBalances);\n  expect(screen.getByRole('status')).toHaveTextContent('Loading balances');\n\n  finish({ Ana: 0 });\n  expect(await screen.findByText('Ana is settled up')).toBeInTheDocument();\n});
\n

For the retry flow, start with a rejecting mock, wait for the alert, switch the mock to resolve, click “Try again” once, then findBy the list. Each step is something a user does or sees, and nothing depends on how fast the machine is.

\n\n

When the default timeout isn’t enough

\n

findBy and waitFor give up after one second. That is plenty for code whose dependency you control, and if a component test needs longer, the usual reason is a real network call or a real timer that leaked in. Fix the leak first. When the wait really is legitimate, pass options: screen.findByRole('list', {}, { timeout: 3000 }) (the third argument is the wait options) or waitFor(callback, { timeout: 3000 }).

\n

In React tests you’ll sometimes see a warning that an update “was not wrapped in act(…)”. It usually means a state update happened after the test stopped looking: some promise resolved late. The fix is almost never to wrap things in act by hand; it’s to await the final state the user would see, with a findBy query.

\n

In the playground

\n

The exercise starter adds waitFor(callback), findByRole(root, role, options) and findByText(root, text) to the query stand-ins. They poll every 20 ms and give up after 500 ms, so a test against a broken version fails quickly.

\n

Next lesson brings this to React components, and to the network calls behind loadBalances.

\n","toc":[{"id":"sec-1","text":"The wrong way: sleeping","level":2},{"id":"sec-2","text":"findBy: wait for an element","level":2},{"id":"sec-3","text":"waitFor: wait for anything else","level":2},{"id":"sec-4","text":"Controlling time from the test side","level":2},{"id":"sec-5","text":"When the default timeout isn’t enough","level":2},{"id":"sec-6","text":"In the playground","level":2}],"takeaways":["findBy queries return a promise that resolves when the element appears, retrying until a timeout (one second by default).","waitFor(callback) reruns a callback until it stops throwing; use it for assertions that aren’t about an element appearing, such as a mock’s call count.","Never wait a fixed time with a sleep; wait for the condition you actually care about.","Control the async dependency yourself (a vi.fn that resolves, rejects or stays pending) so loading, success, error and retry are each one deterministic test."],"further":[{"title":"Testing Library — Async methods","url":"https://testing-library.com/docs/dom-testing-library/api-async"},{"title":"Testing Library — Appearance and disappearance","url":"https://testing-library.com/docs/guide-disappearance"},{"title":"Vitest — vi.waitFor","url":"https://vitest.dev/api/vi#vi-waitfor"}],"quiz":[{"q":"

The balance list appears after loadBalances() resolves. Which line waits for it correctly?

","options":[{"text":"await new Promise((r) => setTimeout(r, 500)); screen.getByRole('list');","why":"A fixed sleep is too long on a fast machine and too short on a busy CI runner; it is the classic source of flaky UI tests."},{"text":"const list = await screen.findByRole('list', { name: 'Balances' });","why":"Correct. findByRole retries until the list appears (or one second passes), so it waits exactly as long as needed."},{"text":"const list = screen.getByRole('list', { name: 'Balances' });","why":"getByRole checks once, immediately, before the promise has resolved, so it throws."}],"answer":1},{"q":"

What’s the problem with this?

\n
JavaScript
await waitFor(() => {\n  user.click(screen.getByRole('button', { name: 'Try again' }));\n  expect(loadBalances).toHaveBeenCalledTimes(2);\n});
\n","options":[{"text":"waitFor can’t contain expect calls.","why":"Assertions are exactly what belongs in waitFor; it reruns the callback until they stop throwing."},{"text":"toHaveBeenCalledTimes doesn’t work with async functions.","why":"It counts calls on any mock, sync or async; that line is fine on its own."},{"text":"The click is a side effect inside the retried callback, so it may run several times and inflate the call count.","why":"Correct. Do the click once, outside, then await waitFor(() => expect(loadBalances).toHaveBeenCalledTimes(2))."}],"answer":2},{"q":"

How do you test that the “Loading balances…” message is shown before the data arrives, without racing the promise?

","options":[{"text":"Make loadBalances return a promise the test resolves by hand, assert the loading message, then resolve it.","why":"Correct. A deferred promise freezes the component in the loading state for as long as you need, so the test is deterministic."},{"text":"Add a 50 ms delay to the real loadBalances in tests.","why":"Any timing-based approach races: on a slow runner the assertion may still miss or hit at the wrong moment."},{"text":"Use findByRole('status') so it waits for the message.","why":"The message is shown immediately, so finding it isn’t the hard part; the risk is that the data has already replaced it by the time you look."}],"answer":0}],"exercise":{"kind":"web","mode":"test","subject":"function formatMoney(cents) {\n const sign = cents < 0 ? '-' : '';\n const abs = Math.abs(cents);\n return `${sign}$${Math.floor(abs / 100)}.${String(abs % 100).padStart(2, '0')}`;\n}\n\nfunction renderBalances(container, balances) {\n const names = Object.keys(balances).sort((a, b) => a.localeCompare(b));\n if (names.length === 0) {\n const empty = document.createElement('p');\n empty.textContent = 'No expenses yet';\n container.replaceChildren(empty);\n return;\n }\n const list = document.createElement('ul');\n list.setAttribute('aria-label', 'Balances');\n for (const name of names) {\n const cents = balances[name];\n const item = document.createElement('li');\n item.textContent =\n cents > 0 ? `${name} is owed ${formatMoney(cents)}`\n : cents < 0 ? `${name} owes ${formatMoney(-cents)}`\n : `${name} is settled up`;\n list.append(item);\n }\n container.replaceChildren(list);\n}\n\n// Shows balances loaded with loadBalances() (returns a promise).\n// - While loading:

Loading balances…

\n// - On success: the \"Balances\" list from renderBalances; the status is gone.\n// - On failure:

Could not load balances.

and a\n// \"Try again\" button that calls loadBalances again.\nfunction mountBalancePanel(container, loadBalances) {\n async function load() {\n container.innerHTML = '

Loading balances…

';\n try {\n const balances = await loadBalances();\n renderBalances(container, balances);\n } catch {\n container.innerHTML =\n '

Could not load balances.

';\n container.querySelector('button').addEventListener('click', load);\n }\n }\n load();\n}\n","mutants":[{"id":"no-loading","code":"function formatMoney(cents) {\n const sign = cents < 0 ? '-' : '';\n const abs = Math.abs(cents);\n return `${sign}$${Math.floor(abs / 100)}.${String(abs % 100).padStart(2, '0')}`;\n}\n\nfunction renderBalances(container, balances) {\n const names = Object.keys(balances).sort((a, b) => a.localeCompare(b));\n if (names.length === 0) {\n const empty = document.createElement('p');\n empty.textContent = 'No expenses yet';\n container.replaceChildren(empty);\n return;\n }\n const list = document.createElement('ul');\n list.setAttribute('aria-label', 'Balances');\n for (const name of names) {\n const cents = balances[name];\n const item = document.createElement('li');\n item.textContent =\n cents > 0 ? `${name} is owed ${formatMoney(cents)}`\n : cents < 0 ? `${name} owes ${formatMoney(-cents)}`\n : `${name} is settled up`;\n list.append(item);\n }\n container.replaceChildren(list);\n}\n\n// Shows balances loaded with loadBalances() (returns a promise).\n// - While loading:

Loading balances…

\n// - On success: the \"Balances\" list from renderBalances; the status is gone.\n// - On failure:

Could not load balances.

and a\n// \"Try again\" button that calls loadBalances again.\nfunction mountBalancePanel(container, loadBalances) {\n async function load() {\n container.innerHTML = '';\n try {\n const balances = await loadBalances();\n renderBalances(container, balances);\n } catch {\n container.innerHTML =\n '

Could not load balances.

';\n container.querySelector('button').addEventListener('click', load);\n }\n }\n load();\n}\n"},{"id":"stale-loading","code":"function formatMoney(cents) {\n const sign = cents < 0 ? '-' : '';\n const abs = Math.abs(cents);\n return `${sign}$${Math.floor(abs / 100)}.${String(abs % 100).padStart(2, '0')}`;\n}\n\nfunction renderBalances(container, balances) {\n const names = Object.keys(balances).sort((a, b) => a.localeCompare(b));\n if (names.length === 0) {\n const empty = document.createElement('p');\n empty.textContent = 'No expenses yet';\n container.replaceChildren(empty);\n return;\n }\n const list = document.createElement('ul');\n list.setAttribute('aria-label', 'Balances');\n for (const name of names) {\n const cents = balances[name];\n const item = document.createElement('li');\n item.textContent =\n cents > 0 ? `${name} is owed ${formatMoney(cents)}`\n : cents < 0 ? `${name} owes ${formatMoney(-cents)}`\n : `${name} is settled up`;\n list.append(item);\n }\n container.replaceChildren(list);\n}\n\n// Shows balances loaded with loadBalances() (returns a promise).\n// - While loading:

Loading balances…

\n// - On success: the \"Balances\" list from renderBalances; the status is gone.\n// - On failure:

Could not load balances.

and a\n// \"Try again\" button that calls loadBalances again.\nfunction mountBalancePanel(container, loadBalances) {\n async function load() {\n container.innerHTML = '

Loading balances…

';\n try {\n const balances = await loadBalances();\n const box = document.createElement('div');\n container.append(box);\n renderBalances(box, balances);\n } catch {\n container.innerHTML =\n '

Could not load balances.

';\n container.querySelector('button').addEventListener('click', load);\n }\n }\n load();\n}\n"},{"id":"error-hidden","code":"function formatMoney(cents) {\n const sign = cents < 0 ? '-' : '';\n const abs = Math.abs(cents);\n return `${sign}$${Math.floor(abs / 100)}.${String(abs % 100).padStart(2, '0')}`;\n}\n\nfunction renderBalances(container, balances) {\n const names = Object.keys(balances).sort((a, b) => a.localeCompare(b));\n if (names.length === 0) {\n const empty = document.createElement('p');\n empty.textContent = 'No expenses yet';\n container.replaceChildren(empty);\n return;\n }\n const list = document.createElement('ul');\n list.setAttribute('aria-label', 'Balances');\n for (const name of names) {\n const cents = balances[name];\n const item = document.createElement('li');\n item.textContent =\n cents > 0 ? `${name} is owed ${formatMoney(cents)}`\n : cents < 0 ? `${name} owes ${formatMoney(-cents)}`\n : `${name} is settled up`;\n list.append(item);\n }\n container.replaceChildren(list);\n}\n\n// Shows balances loaded with loadBalances() (returns a promise).\n// - While loading:

Loading balances…

\n// - On success: the \"Balances\" list from renderBalances; the status is gone.\n// - On failure:

Could not load balances.

and a\n// \"Try again\" button that calls loadBalances again.\nfunction mountBalancePanel(container, loadBalances) {\n async function load() {\n container.innerHTML = '

Loading balances…

';\n try {\n const balances = await loadBalances();\n renderBalances(container, balances);\n } catch {\n container.innerHTML = '';\n }\n }\n load();\n}\n"},{"id":"no-retry","code":"function formatMoney(cents) {\n const sign = cents < 0 ? '-' : '';\n const abs = Math.abs(cents);\n return `${sign}$${Math.floor(abs / 100)}.${String(abs % 100).padStart(2, '0')}`;\n}\n\nfunction renderBalances(container, balances) {\n const names = Object.keys(balances).sort((a, b) => a.localeCompare(b));\n if (names.length === 0) {\n const empty = document.createElement('p');\n empty.textContent = 'No expenses yet';\n container.replaceChildren(empty);\n return;\n }\n const list = document.createElement('ul');\n list.setAttribute('aria-label', 'Balances');\n for (const name of names) {\n const cents = balances[name];\n const item = document.createElement('li');\n item.textContent =\n cents > 0 ? `${name} is owed ${formatMoney(cents)}`\n : cents < 0 ? `${name} owes ${formatMoney(-cents)}`\n : `${name} is settled up`;\n list.append(item);\n }\n container.replaceChildren(list);\n}\n\n// Shows balances loaded with loadBalances() (returns a promise).\n// - While loading:

Loading balances…

\n// - On success: the \"Balances\" list from renderBalances; the status is gone.\n// - On failure:

Could not load balances.

and a\n// \"Try again\" button that calls loadBalances again.\nfunction mountBalancePanel(container, loadBalances) {\n async function load() {\n container.innerHTML = '

Loading balances…

';\n try {\n const balances = await loadBalances();\n renderBalances(container, balances);\n } catch {\n container.innerHTML =\n '

Could not load balances.

';\n }\n }\n load();\n}\n"}],"starter":{"js":"// ── Tiny stand-ins for Testing Library queries (no npm in the playground) ──\nconst ROLE_SELECTORS = {\n alert: '[role=\"alert\"]',\n button: 'button, [role=\"button\"]',\n list: 'ul, ol, [role=\"list\"]',\n listitem: 'li, [role=\"listitem\"]',\n status: '[role=\"status\"]',\n textbox: 'input:not([type]), input[type=\"text\"], textarea, [role=\"textbox\"]',\n};\nfunction accessibleName(el) {\n if (el.getAttribute('aria-label')) return el.getAttribute('aria-label');\n if (el.labels && el.labels.length) return el.labels[0].textContent.trim();\n return el.textContent.trim();\n}\nfunction queryAllByRole(root, role, { name } = {}) {\n return [...root.querySelectorAll(ROLE_SELECTORS[role])]\n .filter((el) => !el.closest('[hidden]'))\n .filter((el) => name === undefined || accessibleName(el) === name);\n}\nfunction queryByRole(root, role, options) {\n return queryAllByRole(root, role, options)[0] ?? null;\n}\nfunction getAllByRole(root, role, options = {}) {\n const found = queryAllByRole(root, role, options);\n if (!found.length) throw new Error(`Unable to find role \"${role}\"${options.name ? ` named \"${options.name}\"` : ''}`);\n return found;\n}\nfunction getByRole(root, role, options = {}) {\n const found = getAllByRole(root, role, options);\n if (found.length > 1) throw new Error(`Found ${found.length} elements with role \"${role}\"`);\n return found[0];\n}\nfunction queryByText(root, text) {\n return [...root.querySelectorAll('*')].find((el) =>\n !el.closest('[hidden]') &&\n el.textContent.trim() === text &&\n ![...el.children].some((child) => child.textContent.trim() === text)) ?? null;\n}\nfunction getByText(root, text) {\n const el = queryByText(root, text);\n if (!el) throw new Error(`Unable to find text \"${text}\"`);\n return el;\n}\n// ────────────────────────────────────────────────────────────────────────────\n\n// ── Stand-ins for waitFor and findBy (poll every 20 ms, give up after 500 ms) ──\nasync function waitFor(callback, { timeout = 500, interval = 20 } = {}) {\n const start = Date.now();\n for (;;) {\n try {\n return await callback();\n } catch (error) {\n if (Date.now() - start > timeout) throw error;\n await new Promise((resolve) => setTimeout(resolve, interval));\n }\n }\n}\nconst findByRole = (root, role, options) => waitFor(() => getByRole(root, role, options));\nconst findByText = (root, text) => waitFor(() => getByText(root, text));\n// ────────────────────────────────────────────────────────────────────────────\n\n// ── Stand-ins for user-event (synchronous here, so no await) ──\nfunction typeInto(el, text) {\n clickOn(el);\n for (const key of text) {\n el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));\n el.value += key;\n el.dispatchEvent(new InputEvent('input', { data: key, inputType: 'insertText', bubbles: true }));\n el.dispatchEvent(new KeyboardEvent('keyup', { key, bubbles: true }));\n }\n}\nfunction clickOn(el) {\n if (el.disabled) return;\n el.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));\n el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));\n el.focus();\n el.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));\n el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));\n el.click();\n}\n// ────────────────────────────────────────────────────────────────────────────\n\nlet container;\n\nbeforeEach(() => {\n container = document.createElement('div');\n document.body.append(container);\n});\n\nafterEach(() => {\n container.remove();\n});\n\ndescribe('balance panel', () => {\n test('eventually shows the balances', async () => {\n const loadBalances = vi.fn().mockResolvedValue({ Ana: 500, Ben: -500 });\n\n mountBalancePanel(container, loadBalances);\n\n expect(await findByRole(container, 'list', { name: 'Balances' })).toBeTruthy();\n });\n\n // Add: the loading status (and that it goes away),\n // the error alert, and the \"Try again\" button.\n});\n"},"solution":{"js":"// ── Tiny stand-ins for Testing Library queries (no npm in the playground) ──\nconst ROLE_SELECTORS = {\n alert: '[role=\"alert\"]',\n button: 'button, [role=\"button\"]',\n list: 'ul, ol, [role=\"list\"]',\n listitem: 'li, [role=\"listitem\"]',\n status: '[role=\"status\"]',\n textbox: 'input:not([type]), input[type=\"text\"], textarea, [role=\"textbox\"]',\n};\nfunction accessibleName(el) {\n if (el.getAttribute('aria-label')) return el.getAttribute('aria-label');\n if (el.labels && el.labels.length) return el.labels[0].textContent.trim();\n return el.textContent.trim();\n}\nfunction queryAllByRole(root, role, { name } = {}) {\n return [...root.querySelectorAll(ROLE_SELECTORS[role])]\n .filter((el) => !el.closest('[hidden]'))\n .filter((el) => name === undefined || accessibleName(el) === name);\n}\nfunction queryByRole(root, role, options) {\n return queryAllByRole(root, role, options)[0] ?? null;\n}\nfunction getAllByRole(root, role, options = {}) {\n const found = queryAllByRole(root, role, options);\n if (!found.length) throw new Error(`Unable to find role \"${role}\"${options.name ? ` named \"${options.name}\"` : ''}`);\n return found;\n}\nfunction getByRole(root, role, options = {}) {\n const found = getAllByRole(root, role, options);\n if (found.length > 1) throw new Error(`Found ${found.length} elements with role \"${role}\"`);\n return found[0];\n}\nfunction queryByText(root, text) {\n return [...root.querySelectorAll('*')].find((el) =>\n !el.closest('[hidden]') &&\n el.textContent.trim() === text &&\n ![...el.children].some((child) => child.textContent.trim() === text)) ?? null;\n}\nfunction getByText(root, text) {\n const el = queryByText(root, text);\n if (!el) throw new Error(`Unable to find text \"${text}\"`);\n return el;\n}\n// ────────────────────────────────────────────────────────────────────────────\n\n// ── Stand-ins for waitFor and findBy (poll every 20 ms, give up after 500 ms) ──\nasync function waitFor(callback, { timeout = 500, interval = 20 } = {}) {\n const start = Date.now();\n for (;;) {\n try {\n return await callback();\n } catch (error) {\n if (Date.now() - start > timeout) throw error;\n await new Promise((resolve) => setTimeout(resolve, interval));\n }\n }\n}\nconst findByRole = (root, role, options) => waitFor(() => getByRole(root, role, options));\nconst findByText = (root, text) => waitFor(() => getByText(root, text));\n// ────────────────────────────────────────────────────────────────────────────\n\n// ── Stand-ins for user-event (synchronous here, so no await) ──\nfunction typeInto(el, text) {\n clickOn(el);\n for (const key of text) {\n el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));\n el.value += key;\n el.dispatchEvent(new InputEvent('input', { data: key, inputType: 'insertText', bubbles: true }));\n el.dispatchEvent(new KeyboardEvent('keyup', { key, bubbles: true }));\n }\n}\nfunction clickOn(el) {\n if (el.disabled) return;\n el.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));\n el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));\n el.focus();\n el.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));\n el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));\n el.click();\n}\n// ────────────────────────────────────────────────────────────────────────────\n\nlet container;\n\nbeforeEach(() => {\n container = document.createElement('div');\n document.body.append(container);\n});\n\nafterEach(() => {\n container.remove();\n});\n\ndescribe('balance panel', () => {\n test('shows a loading status, then the balances', async () => {\n const loadBalances = vi.fn().mockResolvedValue({ Ana: 500, Ben: -500 });\n\n mountBalancePanel(container, loadBalances);\n\n expect(getByRole(container, 'status').textContent).toMatch('Loading balances');\n expect(await findByRole(container, 'list', { name: 'Balances' })).toBeTruthy();\n expect(queryByRole(container, 'status')).toBeNull();\n });\n\n test('explains a failure and retries on request', async () => {\n const loadBalances = vi.fn().mockRejectedValue(new Error('Offline'));\n\n mountBalancePanel(container, loadBalances);\n expect((await findByRole(container, 'alert')).textContent).toBe('Could not load balances.');\n\n loadBalances.mockResolvedValue({ Ana: 0 });\n clickOn(getByRole(container, 'button', { name: 'Try again' }));\n\n expect(await findByText(container, 'Ana is settled up')).toBeTruthy();\n expect(loadBalances).toHaveBeenCalledTimes(2);\n });\n});\n"},"checks":[{"id":"passes","suite":"subject"},{"id":"catches-no-loading","suite":"no-loading"},{"id":"catches-stale-loading","suite":"stale-loading"},{"id":"catches-error-hidden","suite":"error-hidden"},{"id":"catches-no-retry","suite":"no-retry"}],"title":"Loading, error and retry","prompt":"

mountBalancePanel(container, loadBalances) shows role="status" “Loading balances…” while loadBalances() is pending, then the Balances list. If the promise rejects, it shows role="alert" “Could not load balances.” and a Try again button that loads again.

\n

The starter adds waitFor, findByRole and findByText to the stand-ins (they poll for up to 500 ms). Control loadBalances with vi.fn() and add tests until your suite catches four hidden bugs: one never shows the loading status, one leaves it on screen after the data arrives, one shows nothing on failure, and one whose Try again button does nothing.

\n","hints":["The loading status is set synchronously when the panel mounts, so getByRole(container, 'status') right after mountBalancePanel(...) finds it. After await findByRole(... 'list' ...), queryByRole(container, 'status') must be null.","For the failure: vi.fn().mockRejectedValue(new Error('Offline')), then await findByRole(container, 'alert').","For the retry: after the alert appears, call loadBalances.mockResolvedValue({ Ana: 0 }), click Try again with clickOn, then await findByText(container, 'Ana is settled up')."],"explanation":"

Each state is one assertion about what the user sees. Checking the status immediately after mounting catches the panel with no loading message; checking that it’s gone after findByRole resolves catches the one that leaves it behind. The failure test awaits the alert with findByRole, which times out if the error is swallowed. Switching the mock to resolve before clicking Try again turns the retry into a deterministic story: if the button isn’t wired up, the settled-up text never appears and the test fails. No sleeps anywhere, so the suite is as fast as the code.

\n","checkLabels":{"passes":"All your tests pass against the real panel","catches-no-loading":"Catches the version with no loading status","catches-stale-loading":"Catches the version that leaves the loading status on screen","catches-error-hidden":"Catches the version that shows nothing on failure","catches-no-retry":"Catches the version whose Try again button does nothing"}},"words":676,"readMinutes":3}