- This is 2. part of the educational materials for testing FE libraries
- 1. part with simpler unit tests is here
In this project you will find implemented TODO application
in 3 different FE libraries:
- React - implemented in ./packages/react
- Vue - implemented in ./packages/vue
- Svelte - implemented in ./packages/svelte
and also backend in NestJS that resides in ./packages/be.
There is also some shared code located inside ./packages/shared-code that all packages above are using.
All code is written using TypeScript and manages using npm workspaces.
- All apps have configured ESLint, Prettier and tests (main focus is on FE apps)
- Git Hooks features using Husky
- There are also configured some GitHub workflows
- User can
add
/complete
/delete
TODO - Apps use TanStack Query for data
fetching
/mutation
- Apps have
light
/dark
mode using Tailwind - Apps are managed using Vite
- App were created based
on Vite templates:
npm create vite@latest <app-name> --template {react|vue|svelte}-ts
- App were created based
on Vite templates:
- Unit and integration tests are written using Testing Library (Jest style
assertions)
- APIs are mocked using mswjs node server
- E2E tests are written using Cypress
- APIs are mocked using Cypress intercept
- There is an API for CRUD operations for TODOs
- TODOs are store inside PostgreSQL and data are managed
using TypeORM
- There can be easily generated migrations based on changes to
entities schema
usingnpm commands
- There can be easily generated migrations based on changes to
- API endpoints are validated using DTOs classes with class-validators and class-transformers
- ENVs are type safe and validated using Zod
- Run
npm install
in the root (no need to run install in packages)- Note that BE app requires connection to the database, see README for BE for more details
- Then run
npm run dev
in the BE application and also in one of the FE app
Read assignment description and improve your coding and testing skills!