Simulating User Interaction

function parseAmount(input) {
  const text = String(input).trim();
  if (!/^\d+(\.\d{1,2})?$/.test(text)) throw new Error(`Not a valid amount: "${input}"`);
  const [whole, fraction = ''] = text.split('.');
  const cents = Number(whole) * 100 + Number(fraction.padEnd(2, '0'));
  if (cents === 0) throw new Error('Amount must be greater than zero');
  return cents;
}

// Mounts the "Add expense" form into container.
// - Text fields labelled "Description" and "Amount", and an
//   "Add expense" button.
// - On click, if valid: calls onAdd({ description, amountCents }) with the
//   trimmed description and the amount in integer cents, hides any error,
//   then clears both fields.
// - If invalid: shows the reason in the element with role="alert",
//   does NOT call onAdd, and keeps what the user typed.
//   Blank description -> "Add a description"; bad amount -> parseAmount's message.
// (The playground blocks real form submission, so this reacts to the click.)
function mountExpenseForm(container, onAdd) {
  container.innerHTML = `
    <div>
      <label>Description <input name="description"></label>
      <label>Amount <input name="amount" inputmode="decimal"></label>
      <button type="button">Add expense</button>
      <p role="alert" hidden></p>
    </div>`;
  const [description, amount] = container.querySelectorAll('input');
  const alert = container.querySelector('[role="alert"]');
  container.querySelector('button').addEventListener('click', () => {
    let amountCents;
    try {
      if (!description.value.trim()) throw new Error('Add a description');
      amountCents = parseAmount(amount.value);
    } catch (error) {
      alert.textContent = error.message;
      alert.hidden = false;
      return;
    }
    alert.hidden = true;
    alert.textContent = '';
    onAdd({ description: description.value.trim(), amountCents });
    description.value = '';
    amount.value = '';
  });
}
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 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('expense form', () => {
  test('has the fields and the button', () => {
    mountExpenseForm(container, vi.fn());

    expect(getByRole(container, 'textbox', { name: 'Description' })).toBeTruthy();
    expect(getByRole(container, 'textbox', { name: 'Amount' })).toBeTruthy();
    expect(getByRole(container, 'button', { name: 'Add expense' })).toBeTruthy();
  });

  // Add: the happy path (what onAdd receives, the fields afterwards)
  // and the invalid-amount path (alert, onAdd, the typed text).
});
Loading the editor…