​

Testing

• Vitest wraps the node-side helper fixtures and fast logic checks.
• Playwright runs the browser suite against the live app in headless Chrome.

​

The assert pattern

(async () => {
  const results = [];
  let passed = 0, failed = 0;

  function assert(name, condition, detail = '') {
    if (condition) {
      results.push({ ok: true, name });
      passed++;
    } else {
      results.push({ ok: false, name, detail });
      failed++;
    }
  }

  // --- tests ---

  assert('state object exists', typeof window._labState === 'object');
  assert('importedData has entries array',
    Array.isArray(window._labState.importedData.entries));

  // --- report ---
  console.log(`Tests: ${passed} passed, ${failed} failed`);
  results.filter(r => !r.ok).forEach(r =>
    console.error(`FAIL: ${r.name}`, r.detail)
  );
  return { passed, failed, results };
})();

​

The test files

​

Run all tests headlessly

./run-tests.sh

1. Checks if a server is running on port 8000; starts node dev-server.js if not
2. Runs the node-side tests first (fast fail on helper regressions, no browser needed)
3. Runs the dev-server origin guard
4. Runs the Playwright browser suite
5. Exits with code 0 if all pass, 1 if any fail

​

Coverage status

​

Accessibility regression scan

• critical / serious → test fails on regression vs baseline
• moderate / minor → logged but doesn’t block (axe leans opinionated at those tiers)

​

Baseline-locked gate

{
  "_axeVersion": "4.10.0",
  "critical": {},
  "serious": { "color-contrast": 124, "nested-interactive": 40 },
  "moderate": {},
  "minor": {}
}

​

Refreshing the baseline

A11Y_REBASELINE=1 ./run-tests.sh

​

Running a single test in the browser

fetch('tests/test-cycle-improvements.js').then(r => r.text()).then(s => Function(s)())

​

Writing new tests

• Source inspection — verify the function or pattern exists in the source:
  const src = await fetch('js/data.js').then(r => r.text());
  assert('getActiveData exported', src.includes('export function getActiveData'));
  
• DOM state — check that elements render correctly:
  const card = document.querySelector('.context-card[data-key="diet"]');
  assert('diet card rendered', card !== null);
  assert('diet card has edit button', card.querySelector('.ctx-edit-btn') !== null);
  
• Function behavior — call window-exported functions and check results:
  const data = window.getActiveData ? window.getActiveData() : null;
  assert('getActiveData returns dates array', Array.isArray(data?.dates));
  
• CSS rules — verify styles are applied (use getComputedStyle or inspect stylesheets):
  const styles = [...document.styleSheets].flatMap(s => {
    try { return [...s.cssRules].map(r => r.cssText); } catch { return []; }
  }).join('\n');
  assert('grid overflow hidden set', styles.includes('min-width: 0'));
  
• localStorage keys — verify storage conventions:
  assert('correct key format', localStorage.getItem('labcharts-default-imported') !== undefined
    || true); // key may not exist in test env
  

​

What the headless runner cannot test

• Drag-and-drop interactions
• File picker dialogs
• Actual streaming AI responses (API key required)
• IndexedDB state across page reloads (the runner resets between files)