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

antigravitygemini · 34 steps · 1m 04s · 6 filessession bc25c220-6a4@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 23 / 34
tests.jschange 2/2
/**
 * Test Suite for Pixel Art Editor
 * Exercises Flood-Fill, Undo Stack, and JSON Serializer logic.
 * Works seamlessly in Node.js and Browser environments.
 */
 
// Import requirements if in Node environment
let floodFillFn, UndoManagerClass, exportToJSONFn, importFromJSONFn;
 
if (typeof require !== 'undefined') {
  const editor = require('./editor.js');
  floodFillFn = editor.floodFill;
  UndoManagerClass = editor.UndoManager;
  exportToJSONFn = editor.exportToJSON;
  importFromJSONFn = editor.importFromJSON;
} else if (typeof window !== 'undefined') {
  floodFillFn = window.floodFill;
  UndoManagerClass = window.UndoManager;
  exportToJSONFn = window.exportToJSON;
  importFromJSONFn = window.importFromJSON;
}
 
const testResults = [];
 
function runTest(suite, name, fn) {
  const startTime = Date.now();
  let passed = false;
  let errorMsg = null;
 
  try {
    fn();
    passed = true;
  } catch (err) {
    passed = false;
    errorMsg = err.message || String(err);
  }
 
  const duration = Date.now() - startTime;
  const result = { suite, name, passed, errorMsg, duration };
  testResults.push(result);
  return result;
}
 
function assert(condition, message) {
  if (!condition) {
    throw new Error(message || 'Assertion failed');
  }
}
 
function assertEqual(actual, expected, message) {
  if (actual !== expected) {
    throw new Error(`${message || 'Assertion failed'}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
  }
}
 
function assertDeepEqual(actual, expected, message) {
  if (JSON.stringify(actual) !== JSON.stringify(expected)) {
    throw new Error(`${message || 'Deep equality failed'}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
  }
}
 
// Helper to build blank grid
function createBlankGrid(w = 32, h = 32) {
  return new Array(w * h).fill(null);
}
 
// Execute all test suites
function executeAllTests() {
  testResults.length = 0; // reset
 
  // ==========================================
  // SUITE 1: FLOOD FILL LOGIC
  // ==========================================
 
  runTest('Flood Fill', 'Should fill entire empty 32x32 grid', () => {
    const grid = createBlankGrid(32, 32);
    const result = floodFillFn(grid, 32, 32, 0, 0, '#FF0000');
    assertEqual(result.length, 1024, 'Grid size should remain 1024');
    const filledCount = result.filter(c => c === '#FF0000').length;
    assertEqual(filledCount, 1024, 'All pixels in empty grid should be filled');
  });
 
  runTest('Flood Fill', 'Should fill only enclosed box interior', () => {
    const grid = createBlankGrid(32, 32);
    // Draw 5x5 border box with #000000 from x=10..14, y=10..14
    for (let x = 10; x <= 14; x++) {
      grid[10 * 32 + x] = '#000000'; // top border
      grid[14 * 32 + x] = '#000000'; // bottom border
    }
    for (let y = 10; y <= 14; y++) {
      grid[y * 32 + 10] = '#000000'; // left border
      grid[y * 32 + 14] = '#000000'; // right border
    }
 
    // Flood fill center (12, 12) with #00FF00
    const result = floodFillFn(grid, 32, 32, 12, 12, '#00FF00');
 
    // Check center 3x3 (9 pixels) are filled with #00FF00
    for (let y = 11; y <= 13; y++) {
      for (let x = 11; x <= 13; x++) {
        assertEqual(result[y * 32 + x], '#00FF00', `Pixel at (${x},${y}) should be filled`);
      }
    }
 
    // Check border remains #000000
    assertEqual(result[10 * 32 + 10], '#000000', 'Top-left corner of box should remain black');
 
    // Check outside (0,0) is still null
    assertEqual(result[0], null, 'Outside of box should remain null');
  });
 
  runTest('Flood Fill', 'Should handle target color equal to fill color gracefully', () => {
    const grid = createBlankGrid(32, 32);
    grid[0] = '#FF0000';
    const result = floodFillFn(grid, 32, 32, 0, 0, '#FF0000');
    assertEqual(result[0], '#FF0000', 'Pixel color should remain unchanged');
  });
 
  runTest('Flood Fill', 'Should fill corner and edge pixels without boundary overflow', () => {
    const grid = createBlankGrid(32, 32);
    // Fill bottom-right corner at 31,31
    const result = floodFillFn(grid, 32, 32, 31, 31, '#0000FF');
    assertEqual(result[31 * 32 + 31], '#0000FF', 'Bottom-right corner should be filled');
  });
 
  runTest('Flood Fill', 'Should support flood filling with null (erasing connected color)', () => {
    const grid = createBlankGrid(32, 32);
    // Fill all with #AAAAAA
    for (let i = 0; i < grid.length; i++) grid[i] = '#AAAAAA';
 
    // Flood fill center with null (erase)
    const result = floodFillFn(grid, 32, 32, 15, 15, null);
    const nullCount = result.filter(c => c === null).length;
    assertEqual(nullCount, 1024, 'All pixels should be erased to null');
  });
 
  runTest('Flood Fill', 'Should be case-insensitive for hex color strings', () => {
    const grid = createBlankGrid(32, 32);
    grid[0] = '#ff0000';
−    const result = floodFillFn(grid, 32, 32, 0, 0, '#FF0000');
−    assertEqual(result[0], '#FF0000', 'Hex string should normalize to uppercase');
    grid[1] = '#FF0000';
    const result = floodFillFn(grid, 32, 32, 0, 0, '#00FF00');
    assertEqual(result[0], '#00FF00', 'Pixel 0 should be filled');
    assertEqual(result[1], '#00FF00', 'Pixel 1 with uppercase hex should also be recognized as same color and filled');
  });
 
  // ==========================================
  // SUITE 2: UNDO / REDO STACK LOGIC
  // ==========================================
 
  runTest('Undo Stack', 'Initial state should have canUndo=false and canRedo=false', () => {
    const undoMgr = new UndoManagerClass(50);
    assertEqual(undoMgr.canUndo(), false, 'canUndo should initially be false');
    assertEqual(undoMgr.canRedo(), false, 'canRedo should initially be false');
  });
 
  runTest('Undo Stack', 'Push states and perform undo/redo', () => {
    const undoMgr = new UndoManagerClass(50);
    const state0 = createBlankGrid(32, 32);
    const state1 = [...state0];
    state1[0] = '#FF0000';
    const state2 = [...state1];
    state2[1] = '#00FF00';
 
    undoMgr.push(state0);
    undoMgr.push(state1);
    undoMgr.push(state2);
 
    assertEqual(undoMgr.canUndo(), true, 'canUndo should be true after pushes');
    assertEqual(undoMgr.canRedo(), false, 'canRedo should be false at latest state');
 
    // Undo to state1
    const popped1 = undoMgr.undo();
    assertEqual(popped1[0], '#FF0000', 'State 1 index 0 should be #FF0000');
    assertEqual(popped1[1], null, 'State 1 index 1 should be null');
    assertEqual(undoMgr.canRedo(), true, 'canRedo should be true after undo');
 
    // Undo to state0
    const popped0 = undoMgr.undo();
    assertEqual(popped0[0], null, 'State 0 index 0 should be null');
 
    // Redo to state1
    const redone1 = undoMgr.redo();
    assertEqual(redone1[0], '#FF0000', 'Redone State 1 index 0 should be #FF0000');
 
    // Redo to state2
    const redone2 = undoMgr.redo();
    assertEqual(redone2[1], '#00FF00', 'Redone State 2 index 1 should be #00FF00');
  });
 
  runTest('Undo Stack', 'New edit after undo should truncate redo stack', () => {
    const undoMgr = new UndoManagerClass(50);
    const state0 = createBlankGrid(32, 32);
    const state1 = [...state0];
    state1[0] = '#FF0000';
    const state2 = [...state1];
    state2[1] = '#00FF00';
 
    undoMgr.push(state0);
    undoMgr.push(state1);
    undoMgr.push(state2);
 
    // Undo back to state 1
    undoMgr.undo();
    assertEqual(undoMgr.canRedo(), true, 'canRedo should be true');
 
    // Push new edit state 3
    const state3 = [...state1];
    state3[2] = '#0000FF';
    undoMgr.push(state3);
 
    assertEqual(undoMgr.canRedo(), false, 'canRedo should be cleared after new push');
 
    // Undo should go to state 1, not state 2
    const current = undoMgr.undo();
    assertEqual(current[0], '#FF0000', 'Index 0 should be #FF0000');
    assertEqual(current[2], null, 'Index 2 should be null');
  });
 
  runTest('Undo Stack', 'Should respect maximum history size limit', () => {
    const maxSize = 3;
    const undoMgr = new UndoManagerClass(maxSize);
    
    undoMgr.push([1]);
    undoMgr.push([2]);
    undoMgr.push([3]);
    undoMgr.push([4]); // Should drop oldest [1]
 
    assertEqual(undoMgr.stack.length, 3, 'Stack length should be capped at maxSize');
    assertEqual(undoMgr.stack[0][0], 2, 'Oldest state should now be [2]');
  });
 
  runTest('Undo Stack', 'Clear should reset undo manager', () => {
    const undoMgr = new UndoManagerClass(50);
    undoMgr.push([1]);
    undoMgr.push([2]);
    undoMgr.clear();
    assertEqual(undoMgr.canUndo(), false, 'canUndo should be false after clear');
    assertEqual(undoMgr.canRedo(), false, 'canRedo should be false after clear');
  });
 
  // ==========================================
  // SUITE 3: JSON IMPORT / EXPORT
  // ==========================================
 
  runTest('JSON Export/Import', 'Should serialize grid to JSON and parse back correctly', () => {
    const grid = createBlankGrid(32, 32);
    grid[0] = '#FF0000';
    grid[1023] = '#00FF00';
 
    const jsonStr = exportToJSONFn(grid, 32, 32);
    assert(typeof jsonStr === 'string', 'exportToJSON should return string');
 
    const imported = importFromJSONFn(jsonStr, 32, 32);
    assertEqual(imported.width, 32, 'Imported width should be 32');
    assertEqual(imported.height, 32, 'Imported height should be 32');
    assertEqual(imported.pixels[0], '#FF0000', 'Pixel 0 should be restored');
    assertEqual(imported.pixels[1023], '#00FF00', 'Pixel 1023 should be restored');
  });
 
  runTest('JSON Export/Import', 'Should throw descriptive error for invalid input', () => {
    let errorCaught = false;
    try {
      importFromJSONFn('{"invalid": true}', 32, 32);
    } catch (e) {
      errorCaught = true;
    }
    assert(errorCaught, 'Should throw error for missing pixels array');
  });
 
  return testResults;
}
 
// Execute if in Node environment and report results
if (typeof process !== 'undefined' && process.env) {
  console.log('\n========================================');
  console.log(' RUNNING HEADLESS TESTS (Node.js)');
  console.log('========================================\n');
 
  const results = executeAllTests();
  let passedCount = 0;
  let failedCount = 0;
 
  results.forEach(r => {
    if (r.passed) {
      passedCount++;
      console.log(` \x1b[32m✓ PASS\x1b[0m [${r.suite}] ${r.name} (${r.duration}ms)`);
    } else {
      failedCount++;
      console.log(` \x1b[31m✗ FAIL\x1b[0m [${r.suite}] ${r.name}`);
      console.log(`    Error: ${r.errorMsg}`);
    }
  });
 
  console.log('\n----------------------------------------');
  console.log(` Summary: ${passedCount} passed, ${failedCount} failed (${results.length} total)`);
  console.log('----------------------------------------\n');
 
  if (failedCount > 0) {
    process.exit(1);
  } else {
    process.exit(0);
  }
}
 
// Export for browser runner
if (typeof window !== 'undefined') {
  window.executeAllTests = executeAllTests;
}
 
309 linesjs
Writes …/tests.html
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#antigravity #css #gemini #graphics #html #javascript #quick #testing #ui
d5-agy
← all sessions