Welcome to Module 4 Project! For this project, you will thoroughly test a login screen using React Testing Library.

The app is comprised of an Auth component which is capable of logging in registered users, and logging them out.

You will write tests for this component with React Testing Library (RTL).

These tests will guard against unexpected changes in the behavior of Auth, while reducing the need for constant manual testing.

Here are the steps to set up this project:

1. Clone this repository to your computer.

2. Within your terminal, navigate to the project folder and execute npm install.

3. After successful installation execute npm run dev and, in a different terminal, npm test.

4. You will load the app in Chrome by navigating the browser to http://localhost:3003.

❗ Note: In the event of NPM errors during setup, delete the node_modules folder and the package-lock.json file, and retry npm i and npm run dev.

Here are the files of interest in this project:

1. Inside Auth.js you will find the component you will test. Do not change this module!

2. Inside Auth.test.js is where you will write all your code.

Have fun writing tests, and check out the Solution Video of this project for tips and getting unstuck!

1. Visit your app in http://localhost:3003.

2. There are 4 users registered in the system, try logging them in by hand:

   • username Shakira, password Suerte1977%
   • username Beyoncé, password Halo1981#
   • username Shakira, password FirstLove1983;
   • username Madonna, password Vogue1958@

   Note: You can submit the form either clicking the button or hitting the Enter key on your keyboard.

3. See how a successful log-in renders a welcome message, some user info, and a log-out button.

4. Verify that submitting any other credentials, including an empty form, renders an "Invalid Credentials" message.

5. Note how slow the log-in process is, a "Please wait..." message rendering while the request completes.

6. Verify that logging out renders a goodbye message.

• Inside Auth.test.js, you will write your tests.

• The setup and scaffolding of the tests is done for you, and you have comments in the code guiding you along. You will start working after line 36.

• The summary of the tests is below. Make sure you can replicate all these behaviors in Chrome!

  1. The values of the inputs are changed by typing on them
  2. Submitting the form by clicking the log-in button shows "Please wait..." message
  3. Submitting the form by hitting ENTER with the keyboard shows "Please wait..." message
  4. Submitting an empty form eventually shows an "Invalid Credentials" message
  5. Submitting incorrect credentials eventually shows an "Invalid Credentials" message
  6. Logging in a valid user (example: Shakira) makes the following elements render eventually:
     • correct welcome message (example: "Welcome back, Shakira. We LOVE you!")
     • correct user info (example: "ID: 1, Username: Shakira, Born: 1977")
     • logout button
  7. Logging out eventually displays a goodbye message and renders the login form

NOTES:

• ❗ The word eventually marks those events that happen asynchronously.
• ❗ Please check the relevant chapter of the Solution Video if you get stuck.

👋 Have fun!

Project created with @bloomtools/[email protected]