الاستعلام عن الـ DOM كما يراه المستخدم

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

// Renders balances (in cents) into container.
// - A list labelled "Balances", one item per person, sorted by name:
//     positive -> "Ana is owed $12.00"
//     negative -> "Ben owes $5.00"
//     zero     -> "Cai is settled up"
// - With no people at all: a paragraph "No expenses yet" and no list.
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);
}
جارٍ تحميل المحرّر…

// ── 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;
}
// ────────────────────────────────────────────────────────────────────────────

let container;

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

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

describe('renderBalances', () => {
  test('renders a list labelled Balances', () => {
    renderBalances(container, { Ana: 1200, Ben: -1200 });

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

  // Add tests that read what the user reads: the text of each item,
  // a settled-up person, and the empty state.
});
جارٍ تحميل المحرّر…