Apartment rental clone website.
- NextJS - React Framework
- NextAuth - Authentication
- Storybook - Design & Testing (a11y & visual)
- Jest - Testing (unit)
- Prisma - Database ORM and design
- PostgreSQL - Database (Prisma handles all the communication)
- Tailwind CSS - Styling
- Cypress - Testing (component & e2e)
Directory | Purpose |
---|---|
.github |
GitHub templates and workflow |
.storybook |
Storybook config |
app |
Application itself |
cypress |
Component and E2E tests |
components |
UI pieces |
lib |
Functions |
prisma |
DB schema and changes |
stories |
Design examples, accessibility tests and visual tests |
tests |
Unit tests |
Test all (as much as possible)
- Unit tests are for general & functional behavior [Jest]
- Component tests are for evaluating the component's values (text) and display (existence and visibility in the webpage) [Cypress]
- UI tests are for maintaining the component's design consitency [Storybook, Chromatic]
- E2E tests are for user behavior [Cypress]
It is better to test the component's UI in Storybook. Why?
- In Cypress, you have to explicitly mention (eg.) the color or layout of the component
- In Storybook w/ Chromatic, it automatically detects the changes and notifies for any changes.
Special cases might apply. Example, different layouts for different screen dimensions requring some components to be hidden while others are visible.
All the lines and branches.
As much as possible, since some parts (like component
and e2e
tests) are better tested manually.
This is possible when workflows are too complex for e2e
tests that it makes more sense to test it manually in the browser or when live data is difficult to be provided when testing component
s.