🎯 Enhancement: Add visual regression testing for terminal UI consistency

[hoteye]

🎯 Feature Request: Visual Regression Testing for Terminal UI

Hi @jrr! 👋 Great work on building Wordle for the terminal with Ink! I noticed you're already using ink-testing-library for testing, which shows you understand the importance of testing terminal UIs.

🤔 Problem Statement

Terminal applications like Inkle can have subtle visual regressions that are hard to catch with traditional unit tests:

• Layout shifts when terminal size changes
• Color rendering differences across platforms
• Game state display inconsistencies (board layout, keyboard, messages)
• Cross-platform compatibility issues

💡 Proposed Solution

I'd like to suggest adding visual regression testing using ink-visual-testing - a tool specifically designed for Ink applications.

🎮 Specific Test Scenarios for Inkle

// Test different game states
await visualTest('game-start', './test-fixtures/game-start.tsx');
await visualTest('game-progress', './test-fixtures/game-with-guesses.tsx');  
await visualTest('game-won', './test-fixtures/game-victory.tsx');
await visualTest('game-lost', './test-fixtures/game-defeat.tsx');

// Test different terminal sizes
await visualTest('small-terminal', './test-fixtures/game-start.tsx', { 
  preset: 'narrow' // 60×20
});
await visualTest('large-terminal', './test-fixtures/game-start.tsx', { 
  preset: 'wide' // 120×40  
});

✨ Benefits

1. Catch layout bugs early - Prevent issues like word wrapping or misaligned keyboards
2. Cross-platform consistency - Ensure Wordle looks the same on macOS, Linux, Windows
3. CI integration - Automatically verify UI changes in pull requests
4. Perfect for games - Visual correctness is crucial for game UX

🛠️ Easy Integration

Since you're already using Vitest, integration would be straightforward:

npm install ink-visual-testing --save-dev
npx ink-visual-testing init

The tool provides:

• 🎯 Terminal size presets (tiny, standard, wide, mobile, etc.)
• 🚀 Batch testing for multiple scenarios
• ⚙️ Configuration files for team consistency
• 📊 CLI tools for easy usage

🤝 Offer to Help

I'm the maintainer of ink-visual-testing and would be happy to:

• Create a PR with example visual tests for Inkle
• Help set up the testing pipeline
• Add Inkle as a showcase example in our documentation

Would you be interested in exploring this? I think Inkle would be a perfect example of how visual testing can benefit terminal games! 🎯

---

Links:

• 📦 ink-visual-testing on npm
• 📖 Documentation and examples
• 🎮 Terminal game testing examples

[jrr]

This looks great! I remember wanting to do storybook-like snapshot testing when I first wrote Inkle way back when. I'd be happy to take contributions that add testing with your library.

Hopefully the redux-like state pattern makes it easy. As a starting point, check out the "--test midgame" thing in CI. (and here in the source )