Jotto
Status
Completed
Project Type
Personal
Technologies
Typescript, ReactJS, NodeJS, Jest, & Enzyme
Role(s)
Software programming
Jotto is a word guessing app. Every guess is added to a table and shows you
how many letters it has in common with the secret word. I made 2 versions of
this app, one using Redux and the other using Hooks & Context,
These apps were made as part of a Udemy course and were my introduction to
testing in React. However, I did add a challenge for myself by adding Typescript to them as well.
NOTE: The video below shows the hidden word just so you can see how the application reacts to a wrong or correct guess.
NOTE: The video below shows the hidden word just so you can see how the application reacts to a wrong or correct guess.
Redux
Hooks & Context
The GuessedWords component will display all the guesses the user makes.
I am using a setup function (which you can see in my GitHub repo) to add an array of guesses to the state. That function returns a shallow version of my GuessedWords component, meaning only the parent component is rendered. That way we can ignore the behavior of all the child components within GuessedWords while testing it. The 3rd test is what checks that we have the correct amount of guesses in the state.
I am using a setup function (which you can see in my GitHub repo) to add an array of guesses to the state. That function returns a shallow version of my GuessedWords component, meaning only the parent component is rendered. That way we can ignore the behavior of all the child components within GuessedWords while testing it. The 3rd test is what checks that we have the correct amount of guesses in the state.
Here are some tests in the Input component.
In the beforeEach(), we replace React's useState with our fake function (jest.fn()). We will return an array with an empty string and our mockSetCurrentGuess. The "mockSetCurrentGuess" will let us see when useState is called. The empty string represents the arguments that useState() will be called with. In these tests, we want to see if useState() was called and if it was called with the correct arguments.
In the beforeEach(), we replace React's useState with our fake function (jest.fn()). We will return an array with an empty string and our mockSetCurrentGuess. The "mockSetCurrentGuess" will let us see when useState is called. The empty string represents the arguments that useState() will be called with. In these tests, we want to see if useState() was called and if it was called with the correct arguments.
