Testing Async UI

function formatMoney(cents) {
  const sign = cents < 0 ? '-' : '';
  const abs = Math.abs(cents);
  return `${sign}${Math.floor(abs / 100)}.${String(abs % 100).padStart(2, '0')}`;
}

function renderBalances(container, balances) {
  const names = Object.keys(balances).sort((a, b) => a.localeCompare(b));
  if (names.length === 0) {
    const empty = document.createElement('p');
    empty.textContent = 'No expenses yet';
    container.replaceChildren(empty);
    return;
  }
  const list = document.createElement('ul');
  list.setAttribute('aria-label', 'Balances');
  for (const name of names) {
    const cents = balances[name];
    const item = document.createElement('li');
    item.textContent =
      cents > 0 ? `${name} is owed ${formatMoney(cents)}`
      : cents < 0 ? `${name} owes ${formatMoney(-cents)}`
      : `${name} is settled up`;
    list.append(item);
  }
  container.replaceChildren(list);
}

// Shows balances loaded with loadBalances() (returns a promise).
// - While loading: <p role="status">Loading balances…</p>
// - On success: the "Balances" list from renderBalances; the status is gone.
// - On failure: <p role="alert">Could not load balances.</p> and a
//   "Try again" button that calls loadBalances again.
function mountBalancePanel(container, loadBalances) {
  async function load() {
    container.innerHTML = '<p role="status">Loading balances…</p>';
    try {
      const balances = await loadBalances();
      renderBalances(container, balances);
    } catch {
      container.innerHTML =
        '<p role="alert">Could not load balances.</p><button type="button">Try again</button>';
      container.querySelector('button').addEventListener('click', load);
    }
  }
  load();
}
Loading the editor…

// ── Tiny stand-ins for Testing Library queries (no npm in the playground) ──
const ROLE_SELECTORS = {
  alert: '[role="alert"]',
  button: 'button, [role="button"]',
  list: 'ul, ol, [role="list"]',
  listitem: 'li, [role="listitem"]',
  status: '[role="status"]',
  textbox: 'input:not([type]), input[type="text"], textarea, [role="textbox"]',
};
function accessibleName(el) {
  if (el.getAttribute('aria-label')) return el.getAttribute('aria-label');
  if (el.labels && el.labels.length) return el.labels[0].textContent.trim();
  return el.textContent.trim();
}
function queryAllByRole(root, role, { name } = {}) {
  return [...root.querySelectorAll(ROLE_SELECTORS[role])]
    .filter((el) => !el.closest('[hidden]'))
    .filter((el) => name === undefined || accessibleName(el) === name);
}
function queryByRole(root, role, options) {
  return queryAllByRole(root, role, options)[0] ?? null;
}
function getAllByRole(root, role, options = {}) {
  const found = queryAllByRole(root, role, options);
  if (!found.length) throw new Error(`Unable to find role "${role}"${options.name ? ` named "${options.name}"` : ''}`);
  return found;
}
function getByRole(root, role, options = {}) {
  const found = getAllByRole(root, role, options);
  if (found.length > 1) throw new Error(`Found ${found.length} elements with role "${role}"`);
  return found[0];
}
function queryByText(root, text) {
  return [...root.querySelectorAll('*')].find((el) =>
    !el.closest('[hidden]') &&
    el.textContent.trim() === text &&
    ![...el.children].some((child) => child.textContent.trim() === text)) ?? null;
}
function getByText(root, text) {
  const el = queryByText(root, text);
  if (!el) throw new Error(`Unable to find text "${text}"`);
  return el;
}
// ────────────────────────────────────────────────────────────────────────────

// ── Stand-ins for waitFor and findBy (poll every 20 ms, give up after 500 ms) ──
async function waitFor(callback, { timeout = 500, interval = 20 } = {}) {
  const start = Date.now();
  for (;;) {
    try {
      return await callback();
    } catch (error) {
      if (Date.now() - start > timeout) throw error;
      await new Promise((resolve) => setTimeout(resolve, interval));
    }
  }
}
const findByRole = (root, role, options) => waitFor(() => getByRole(root, role, options));
const findByText = (root, text) => waitFor(() => getByText(root, text));
// ────────────────────────────────────────────────────────────────────────────

// ── Stand-ins for user-event (synchronous here, so no await) ──
function typeInto(el, text) {
  clickOn(el);
  for (const key of text) {
    el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
    el.value += key;
    el.dispatchEvent(new InputEvent('input', { data: key, inputType: 'insertText', bubbles: true }));
    el.dispatchEvent(new KeyboardEvent('keyup', { key, bubbles: true }));
  }
}
function clickOn(el) {
  if (el.disabled) return;
  el.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
  el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
  el.focus();
  el.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
  el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
  el.click();
}
// ────────────────────────────────────────────────────────────────────────────

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.append(container);
});

afterEach(() => {
  container.remove();
});

describe('balance panel', () => {
  test('eventually shows the balances', async () => {
    const loadBalances = vi.fn().mockResolvedValue({ Ana: 500, Ben: -500 });

    mountBalancePanel(container, loadBalances);

    expect(await findByRole(container, 'list', { name: 'Balances' })).toBeTruthy();
  });

  // Add: the loading status (and that it goes away),
  // the error alert, and the "Try again" button.
});
Loading the editor…