Sudoku game forked from raravi/sudoku.
This fork is showing how to test game's components using Cypress, cypress-react-unit-test, and the open source visual image diffing plugin cypress-image-snapshot. All images are stored in cypress/snapshots folder.
Read Visual testing for React components using open source tools and browse these slides.
Watch the entire free series of videos explaining visual testing step-by-step in the playlist Visually testing React component using open source tools.
- Introduction
- Writing first React component test
- Visual testing for Numbers element
- Visual test for selected number
- Testing static sections of the game
- Testing timer display by controlling the application's clock
- Restore synthetic clock
- Update image snapshots
- Style Numbers component
- Click event test for Numbers component
- Mocking value passed via Context Provider
- Storing snapshot images
- Running image tests on CI
- Use image tolerance value when comparing image snapshots
- using a local Docker container to generate local snapshots
- Running the same Docker container locally and on CI
- Dealing with dynamic data by hiding it from the snapshot
- Make Sudoku board deterministic
- Local interactive workflow to skip snapshots
- Clipping snapshots
- Add wait before taking a snapshot
- Testing responsive design
- Testing responsive design - alternative take
- Collected code coverage
- Using GitHub Actions
- Mocking ES6 module import for deterministic board
- Refactor loading of fixtures to use imports
- Test to play the first move
- Write a test that wins the game
- Post visual status check to GitHub
- Factoring out Overlay component
- Setting up Prettier
Still to record:
- making a pull request commit check for visual results
Small loops and demos
- Sudoku game
- Responsive styles
- Components in React DevTools
- Sudoku deterministic board with one move
- Visual diffs as commit status
