Testing III
In this project, you will demonstrate proficiency by writing unit tests for an existing React application. Your tests should verify the behaviour listed in the Minimum Viable Product section.
Some of the topics covered were:
- Testing a React application.
- Using the
react-testing-library
testing framework. - Writing unit tests for React components.
Instructions
Read these requirements carefully. Understand exactly what is expected before starting.
You are allowed, and encouraged, to collaborate with your peers while working on this assignment. Remember to follow the twenty-minute rule and post questions to your cohort's help channel before seeking support from your PM and Instructor.
Commits
Please push your code often and use descriptive commit messages, this helps you and your project manager.
Project Description
In this project, you will write unit tests for an existing React appliation that controls a gate and shows two leds that portrait the status of the gate.
The requirements are listed under the Minimum Viable Product section below.
Project Set Up
Follow these steps to setup your git fork and branch.
- Fork this repository.
- Use GitHub's website to add your project manager as collaborator on your fork.
- Clone your forked version of the repository (Not Lambda's!).
- Create a new branch:
git checkout -b <firstName-lastName>
. - Commit changes to your
<firstName-lastName>
branch. - Push often to your branch:
git push origin <firstName-lastName>
.
Follow these steps for completing your project.
- Submit a Pull-Request to merge the
<firstName-lastName>
branch into the master branch on your fork. Please don't merge your own pull request - Use GitHub's webiste to add your project manager as a reviewer on the pull-request.
- Your project manager will count the project as complete by merging the branch back into the master branch of your forked repository.
Minimum Viable Product
After a set of interviews with the potential users of the solution, we gathered the following information about the desired functionality. Not all the information provided by our clients is relevant to the design of the solution, but it's included to help understand the requirements.
Your job is to write unit tests to ensure that the application behaves as expected.
The expected/assumed behavior of the application is listed below.
Gate
- defaults to
unlocked
andopen
- cannot be closed or opened if it is locked
Dashboard
- shows the controls and display
Display Component
- displays if gate is open/closed and if it is locked/unlocked
- displays 'Closed' if the
closed
prop istrue
and 'Open' if otherwise - displays 'Locked' if the
locked
prop istrue
and 'Unlocked' if othewise - when
locked
orclosed
use thered-led
class - when
unlocked
oropen
use thegreen-led
class
Controls Component
- provide buttons to toggle the
closed
andlocked
states. - buttons' text changes to reflect the state the door will be in if clicked
- the closed toggle button is disabled if the gate is closed
- the locked toggle button is disabled if the gate is open
Stretch Problem
This section is optional and not counted towards MVP. Start working on it after you're done with the main assignment.