notes-app-full-stack-testing

The intention is to build and deploy a very simple app (FE/BE + DB) which can be used to demonstrate tests for each layer using vitest, supertest, react-testing-library and playwright.

Starting point for building the app was the great FreeCodeCamp tutorial Full Stack Project Tutorial – Create A Notes App Using React and Node.js

Refactored the app for testability and added a few additional tweaks.

Deployed app

• FE and BE services are deployed using the free tier on render.com
• Database is deployed using serverless postgres on neon

https://notes-app-full-stack-bjml.onrender.com/

Note: Free tier services sleep after inactivity and may take up to 60 seconds to wake up.

FE Implementation

• React
• Typescript
• Axios

BE Implementation

• Node.js
• Typescript
• Express
• Postgres
• Primsa (DB ORM)

Database

• Postgres with Serverless hosting on Neon

Test Layers

FE End to End Tests (e2e)

Executes against the deployed app in real environment

• Playwright.io with typescript
• Allure Production Test Report with history

FE Service Tests

Executes using frontend service running with local backend + db

• docker and Playwright.io

FE Component Tests

Executes against virtual DOM and mocked backend

• React Testing Library with vitest
• Mock Service Worker(msw) to mock the api
• msw/data for data store

BE e2e Tests

Executes api tests against dockerised App and Seeded DB

• docker, supertest and vitest

BE Integration Tests

Executes tests using mocked dependencies

• supertest, vitest and vitest-mock-extended

API Contract Tests

Executes against dockerised BE App and Seeded DB

• Contract tests with pact