Add visual regression testing with ink-visual-testing

[hoteye]

Summary

Implements visual regression testing using ink-visual-testing to automatically detect UI changes and prevent visual regressions.

Changes

🔧 Setup

• ✅ Install ink-visual-testing package (v1.0.1)
• ✅ Create .ink-visual.config.js with terminal size presets
• ✅ Update .gitignore to exclude temporary test outputs

🧪 Test Infrastructure

• ✅ Create visual test files using file path mode (tests/visual/*.tsx)
• ✅ Add src/ui.visual.test.tsx with 6 test scenarios
• ✅ Generate baseline images for all game states

📊 Test Coverage

Game States:

• midgame - Game in progress with partial guesses
• win - Winning state with "You win!" message
• lose - Losing state showing the correct word

Multi-board Games:

• dual-board - Two boards simultaneously (120×30 terminal)
• triple-board - Three boards simultaneously (160×35 terminal)

Initial State:

• fresh-start - New game starting state

Terminal Sizes: 80×24, 120×30, 160×35

📜 NPM Scripts

npm run test:visual         # Run visual tests
npm run test:visual:watch   # Watch mode
npm run test:visual:update  # Update baselines

📸 Baseline Images

Generated 6 PNG baselines (136KB total):

• midgame.png (17KB) - Shows game in progress with colored letter hints
• win.png (18KB) - Shows "You win!" with all green letters
• lose.png (25KB) - Shows failure message with correct word
• dual-board.png (21KB) - Two game boards side by side
• triple-board.png (27KB) - Three game boards
• fresh-start.png (14KB) - Clean game board

📖 Documentation

• ✅ Add comprehensive VISUAL_TESTING.md guide with:
  • Setup instructions
  • Usage examples
  • Troubleshooting tips
  • Best practices

Test Results

All tests passing with 0 pixel difference:

✅ Diff pixels: 0 (allowed: 100)
✓ 6 tests passed in 17.91s

Technical Details

Uses file path mode instead of component mode:

• Each test scenario has a corresponding TypeScript file in tests/visual/
• Files render the App component with specific states and exitPlease: true
• Supports custom components, context providers, and complex interactions
• Captures complete terminal output correctly

Benefits

✨ Prevents visual regressions - Automatically detects unintended UI changes
🔍 Easy review - Visual diffs show exactly what changed
⚡ Fast feedback - Runs in ~18 seconds
📦 CI-ready - Can be integrated into CI/CD pipelines
🎯 Comprehensive - Covers all game states and layouts

Test Plan

• Run visual tests locally - all passing
• Verify baseline images are correct
• Check documentation is complete
• Confirm .gitignore excludes temp files
• Validate npm scripts work correctly

🤖 Generated with ai ,my english is so pool.