- Use the RTL big 3:
screen,render,expect - Accessible Testing with React Testing Library
https://alchemeetme-testing.netlify.app/
For this deliverable, you will be writing tests for our Alche-Meet-Me profile viewer. Our application currently displays a header with an image and some text greeting the current user (me!). It also displays a card with some things about the user.
Your task is to write tests that ensure our app displays all of the correct elements for both the header and user profile. A more detailed list of things to test for is in the acceptance criteria.
Modify the files App.test.jsx for the Header and Home.test.jsx for the Profile
Use the template to start your project.
- Tests ensure the header is displaying properly by testing for:
- header image
- profile name
- Background Color (stretch)
- Tests ensure the Profile is displaying properly by testing for:
- name
- motto
- interests heading
- avatar
- header image
- list of user likes
- (Stretch) You can also write tests that ensures the
userobject received as a prop to theHomecomponent has the following shape:- id
- name
- avatar
- header
- likes
- motto
- color
| Tasks | Points |
|---|---|
| Tests wrote for user profile | 4 |
| Tests wrote for the header | 4 |
| Successful netlify deployment | 2 |
The api sending my profile information is from a supabase db ('src/services/user.js'), and you can see my credentials in the .env file. This is def a bad practice, but a necessary evil. You can replace my supabase url and key in the .env file with your own credentials to display your own data.
You will need to create a new users table in supabase with fields for:
- name
- avatar
- header
- likes (this field requires the array option in supabase)
- motto
- color
These fields are currently required for display with no code changes. Feel free to add any more fields you desire, and make the required code changes to display the field.