https://github.com/AmielCyber/tdd-tic-tac-toe

Test Driven Development Tic Tac Toe Demo with Jest.
https://github.com/AmielCyber/tdd-tic-tac-toe

dark-theme jest light-theme react react-testing-library test test-driven-development tic-tac-toe typescript unit-testing usereducer

Last synced: 8 months ago
JSON representation

Test Driven Development Tic Tac Toe Demo with Jest.

• Host: GitHub
• URL: https://github.com/AmielCyber/tdd-tic-tac-toe
• Owner: AmielCyber
• Created: 2022-09-14T00:07:05.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-18T23:21:11.000Z (about 3 years ago)
• Last Synced: 2024-10-24T02:31:17.927Z (about 1 year ago)
• Topics: dark-theme, jest, light-theme, react, react-testing-library, test, test-driven-development, tic-tac-toe, typescript, unit-testing, usereducer
• Language: TypeScript
• Homepage:
• Size: 10.3 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# tdd-tic-tac-toe

## Description

To celebrate my first year using React, I build a Tic-Tac-Toe based on the first project I ever did with React.

This project is a test driven development using React Testing Library and Jest. Unlike the first project, this

project has better styling and many other features mentioned below.

## Demo

### [Live Demo](http://AmielCyber.github.io/tdd-tic-tac-toe)

### Screenshots

#### Light Theme

![Light Theme Desktop Preview](/assets/desktopLight.png)

#### Dark Theme

![Dark Theme Desktop Preview](/assets/desktopDark.png)

### Mobile Demo

![Mobile Preview](/assets/mobileDemo.gif)

## Features

- [x] Game class to track state of a game.

- [x] User can go to a previous game state.

- [x] useReducer is used to keep track an array of Game states that have been played.

- [x] Components and useReducer functions are fully tested and contain their own test file `.test`.

- [x] Game displays which player is next and if the game is over.

- [x] Users can choose to display or not to display previous games.

- [x] Play Again button appears when the game is over and when clicked it resets the game.

- [x] Compatible for mobile devices.

- [x] Compatible for accessibility.

- [x] Compatible for user system's theme preference (Light or Dark theme).