Build a pixel-art editor as a static web app in this directory: index.html, style.css, …

claude-codeclaude-fable-5 · 37 steps · 8m 45s · 7 filessession 976f0ecc-d91@patrick-toulme

Build a pixel-art editor as a static web app in this directory: index.html, style.css, editor.js, palette.js. A 32x32 grid canvas with pencil/eraser/fill/eyedropper tools, color palette + custom picker, undo/redo, zoom, grid toggle, export as PNG (scaled 10x) and as JSON, import from JSON, keyboard shortcuts, dark theme, and tests.html + tests.js exercising the flood-fill and undo stack logic. Run the tests headless with node and fix what fails.

same matchclaude-code · 37 steps codex · 80 steps opencode · 31 steps pi · 29 steps antigravity · 34 steps

compare in arena

step 14 / 37

tests.jschange 1/1

/* Test suite for the pixel editor's core logic (flood fill + undo stack).
   Runs headless with `node tests.js` and in the browser via tests.html. */
(function (global) {
  'use strict';
 
  const isNode = typeof document === 'undefined';
  const core = isNode ? require('./editor.js') : global.PixelEditorCore;
  const {
    GRID_SIZE, createGrid, cloneGrid, gridsEqual,
    floodFill, UndoStack, serialize, deserialize,
  } = core;
 
  const results = [];
 
  function test(name, fn) {
    try {
      fn();
      results.push({ name, ok: true });
    } catch (err) {
      results.push({ name, ok: false, message: err && err.message ? err.message : String(err) });
    }
  }
 
  function assert(cond, message) {
    if (!cond) throw new Error(message || 'expected condition to hold');
  }
 
  function assertEqual(actual, expected, message) {
    if (actual !== expected) {
      throw new Error(`${message || 'values differ'} — expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
    }
  }
 
  // Build a grid from ASCII rows: '.' = transparent, letters map to colors.
  function gridFrom(rows, colors) {
    return rows.map((row) => row.split('').map((ch) => (ch === '.' ? null : colors[ch])));
  }
 
  const R = '#ff0000';
  const G = '#00ff00';
  const B = '#0000ff';
 
  // ---------------------------------------------------------- flood fill ----
 
  test('floodFill fills a connected region and returns the changed count', () => {
    const g = gridFrom(['RR.', 'R..', '...'], { R });
    const changed = floodFill(g, 0, 0, B);
    assertEqual(changed, 3);
    assertEqual(g[0][0], B);
    assertEqual(g[0][1], B);
    assertEqual(g[1][0], B);
    assertEqual(g[0][2], null, 'cells outside the region stay untouched');
  });
 
  test('floodFill does not cross a boundary of another color', () => {
    const g = gridFrom(['..G..', '..G..', '..G..'], { G });
    floodFill(g, 0, 0, R);
    assertEqual(g[0][0], R);
    assertEqual(g[0][4], null, 'right side of the wall must stay empty');
    assertEqual(g[1][2], G, 'the wall must keep its color');
  });
 
  test('floodFill with the same color is a no-op', () => {
    const g = gridFrom(['RR', 'RR'], { R });
    const before = cloneGrid(g);
    assertEqual(floodFill(g, 0, 0, R), 0);
    assert(gridsEqual(g, before), 'grid must be unchanged');
  });
 
  test('floodFill outside the grid changes nothing', () => {
    const g = createGrid(4);
    assertEqual(floodFill(g, -1, 0, R), 0);
    assertEqual(floodFill(g, 0, 99, R), 0);
    assert(gridsEqual(g, createGrid(4)), 'grid must be unchanged');
  });
 
  test('floodFill uses 4-connectivity (no diagonal leaks)', () => {
    const g = gridFrom(['R.', '.R'], { R });
    floodFill(g, 0, 0, B);
    assertEqual(g[0][0], B);
    assertEqual(g[1][1], R, 'the diagonal cell must not be filled');
  });
 
  test('floodFill fills an entire empty 32x32 grid', () => {
    const g = createGrid();
    assertEqual(floodFill(g, 16, 16, R), GRID_SIZE * GRID_SIZE);
    assert(g.every((row) => row.every((v) => v === R)), 'every cell must be filled');
  });
 
  test('floodFill fills a ring-enclosed pocket without escaping', () => {
    const g = gridFrom([
      'GGGGG',
      'G...G',
      'G.G.G',
      'G...G',
      'GGGGG',
    ], { G });
    const changed = floodFill(g, 1, 1, R);
    assertEqual(changed, 8, 'only the 8 interior cells around the center');
    assertEqual(g[2][2], G, 'the center pixel keeps its color');
    assertEqual(g[0][0], G, 'the border keeps its color');
  });
 
  test('floodFill can fill transparent with a color and erase back to transparent', () => {
    const g = createGrid(3);
    assertEqual(floodFill(g, 0, 0, R), 9);
    assertEqual(floodFill(g, 2, 2, null), 9);
    assert(gridsEqual(g, createGrid(3)), 'grid must be fully transparent again');
  });
 
  // ---------------------------------------------------------- undo stack ----
 
  test('undo returns the previous snapshot', () => {
    const h = new UndoStack();
    h.push('v1');
    assertEqual(h.undo('v2'), 'v1');
  });
 
  test('redo restores the undone state', () => {
    const h = new UndoStack();
    h.push('v1');
    const prev = h.undo('v2');
    assertEqual(prev, 'v1');
    assertEqual(h.redo(prev), 'v2');
  });
 
  test('undo on an empty stack returns null', () => {
    const h = new UndoStack();
    assertEqual(h.undo('current'), null);
    assertEqual(h.canUndo(), false);
  });
 
  test('redo on an empty stack returns null', () => {
    const h = new UndoStack();
    h.push('v1');
    assertEqual(h.redo('current'), null);
    assertEqual(h.canRedo(), false);
  });
 
  test('a new edit clears the redo stack', () => {
    const h = new UndoStack();
    h.push('v1');
    h.undo('v2');
    assertEqual(h.canRedo(), true);
    h.push('v1-diverged');
    assertEqual(h.canRedo(), false);
    assertEqual(h.redo('x'), null);
  });
 
  test('undo/redo walk a multi-step history in order', () => {
    const h = new UndoStack();
    h.push('v1');
    h.push('v2');
    h.push('v3');
    let cur = 'v4';
    cur = h.undo(cur); assertEqual(cur, 'v3');
    cur = h.undo(cur); assertEqual(cur, 'v2');
    cur = h.redo(cur); assertEqual(cur, 'v3');
    cur = h.redo(cur); assertEqual(cur, 'v4');
    assertEqual(h.canRedo(), false);
    cur = h.undo(cur); assertEqual(cur, 'v3');
  });
 
  test('the stack drops its oldest entries beyond the limit', () => {
    const h = new UndoStack(3);
    ['v1', 'v2', 'v3', 'v4'].forEach((v) => h.push(v));
    assertEqual(h.undo('v5'), 'v4');
    assertEqual(h.undo('v4'), 'v3');
    assertEqual(h.undo('v3'), 'v2');
    assertEqual(h.undo('v2'), null, 'v1 was trimmed by the limit');
  });
 
  test('undo snapshots hold grid states, not live references', () => {
    const h = new UndoStack();
    const g = createGrid(2);
    h.push(cloneGrid(g));
    g[0][0] = R;
    const prev = h.undo(cloneGrid(g));
    assertEqual(prev[0][0], null, 'snapshot must be unaffected by later edits');
  });
 
  // ------------------------------------- serialization (JSON export/import) ----
 
  test('serialize/deserialize round-trips a grid', () => {
    const g = createGrid();
    g[0][0] = R;
    g[31][31] = '#ABCDEF';
    const out = deserialize(serialize(g));
    assertEqual(out[0][0], R);
    assertEqual(out[31][31], '#abcdef', 'colors are normalized to lowercase');
    assertEqual(out[5][5], null);
  });
 
  test('deserialize rejects malformed documents', () => {
    let threw = false;
    try {
      deserialize('{"pixels": [[1, 2], [3]]}');
    } catch (err) {
      threw = true;
    }
    assert(threw, 'expected an error for a bad payload');
  });
 
  // -------------------------------------------------------------- report ----
 
  const failures = results.filter((r) => !r.ok);
 
  if (isNode) {
    for (const r of results) {
      console.log(`${r.ok ? 'PASS' : 'FAIL'}  ${r.name}${r.ok ? '' : `\n      ${r.message}`}`);
    }
    console.log(`\n${results.length - failures.length}/${results.length} passed`);
    process.exitCode = failures.length ? 1 : 0;
  } else {
    const list = document.getElementById('results');
    for (const r of results) {
      const li = document.createElement('li');
      li.className = r.ok ? 'pass' : 'fail';
      li.textContent = `${r.ok ? '✓' : '✗'} ${r.name}${r.ok ? '' : ` — ${r.message}`}`;
      list.appendChild(li);
    }
    const summary = document.getElementById('summary');
    summary.textContent = `${results.length - failures.length}/${results.length} passed`;
    summary.className = failures.length ? 'fail' : 'pass';
  }
})(typeof globalThis !== 'undefined' ? globalThis : this);
 

227 linesjs

Writes …/tests.js

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.

#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #quick #testing #ui

d1-claude

← all sessions