real-dev-squad/react-tests-tdd

Complete the following exercise with tests

Simple React App with Tests (Beta, WIP)

This is a work in progress repo, not ready for prime time yet - Ankush

Create a simple react app that has tests working

Clone this repo and ensure that you are following Git Flow convention to submitting PRs to your OWN repo

To Do

• Setup testing framework
• Add tests
• Setup GitHub actions

Requirements:

Note This project uses volta, so please set it up. Also, read: Why use Volta?

Ensure that you follow TDD approach to writing your code. The tests are available and marked as skip. Enable your tests by converting the skip into test

Ensure that your milestone tests are passing, before submitting the PR

Milestone Tall

• Create a controlled component input box
• Create a composed sign up component using the input box components
• Perform validations on the input to enable/disable the Next step button

Milestone Grande

• Create an OTP component
• Upon successful email/name entry, get to OTP step

Milestone vocabulary

Starbucks has the following denotions for sizes:

Tall - Small glass
Grande - Regular glass
Venti - Big mug
Trenta - Biggest bucket

References to watch

• Simple easy to understand video on doing TDD by Eve Porcello - YouTube Link at time 5:46:14

• Links and resources for Eve's talk about TDD with React! ⚛️ - eveporcello/women-of-react-2020 GitHub Link

• Testing React by Kent C Todds - YouTube Link

• Testing Overview - Official Docs

What we will be developing?

A guide for beginners to understand and learn Testing in ReactJS Project. This would be a detail documentation on Testing.

react-tests-tdd's Issues

[IMP] Create a sample application for TDD

App Idea: A digital place to keep your events in one place. This app will ask for login/register and give you the ability to create, edit, and update events.

Pages:

1. A login screen
2. A register screen
3. Create an event
4. Save it
5. Delete it
6. Edit it
7. Change style
8. About page
9. Contact Us

Tech:

1. ReactJS
2. TypeScript
3. NodeJs
4. React Testing lib

Goal: To have a TDD approach to creating applications and tests should act like documentation.

Create Registration page

Create a form which will have the following fields:

1. name
2. email
3. password
4. random avtaar

Should follow TDD approach

Create endpoints for Registration page

1. NodeJS create endpoints for user registration
2. Write test-cases for the user registeration

Upgrade packages

Housekeeping

Stop tests on push

Issue

• When a PR is created, the git workflow runs tests on all the pull requests, but once the tests are run on pull requests they run again during push

When was the issue discovered?

• The issue was discovered on 18th August 2022 during a hangout call while trying to merge PRs.

Files that might be creating this

• .github/workflows/test.yml

Screenshot of the Problem

1. Setup the folder structure

Setup initial instructions and reading material

Setup the Readme

Follow along TDD: Create tests for simple input

Create specs for an input component named <StarbucksInput>

15-30 min React Exercise

• Task: Make all tests pass

1. Fork and clone the repo, checkout to develop branch, install the packages

2. Run yarn test
   Things will pass, because the test cases in the spec is not enabled to run yet.

3. Go to the specs file: Link to index.spec.js
   It has details for you to implement a simple input component

4. On line 5 of that specs file, change describe.skip to say just describe (remove .skip keyword)

5. Then run yarn test again
   This time, it will fail (because there is no component that satisfies the cases)

6. WRITE that component according to the spec. Make all the tests pass. You are not allowed to change anything in the tests file.

It's a very simple react component you have to write.

Read the test cases first. Are you able to understand what your component should do?