Module 7 — Capstone Project

Who this is for: Every student who wants to solidify their knowledge. Watching tutorials is passive; writing tests against a complex codebase is active learning.

The Challenge: A Production-Ready Testing Suite

In this final module, you will not be writing an application from scratch. Instead, you will be handed a fully functioning, undocumented, untested full-stack application.

Your mission is to wrap this application in a bulletproof testing net, ensuring that future developers can refactor it without fear.

The Application: SecureAuth Pro

SecureAuth Pro is a Next.js (frontend) and Express.js (backend) application backed by PostgreSQL. It features user registration, JWT-based login, password resets, and a protected dashboard.

Project Deliverables

You must implement the entire Testing Pyramid and automate it.

Phase 1: Unit & Integration Testing (Jest & Supertest)

You will focus on the Node.js backend.

1. Middleware Testing: Write unit tests for the JWT authentication middleware. Mock the jsonwebtoken library. Ensure it returns 401 Unauthorized for expired tokens.
2. Database Mocking: Write unit tests for the UserRepository. Mock the Prisma/Sequelize database driver to test successful user creation and constraint violations (duplicate emails).
3. API Integration: Use Supertest to spin up the Express app in-memory. Write a test suite for POST /api/auth/login. Assert the response contains a valid token structure when correct credentials are provided.

Phase 2: Frontend Component Testing (React Testing Library)

You will focus on the Next.js frontend.

1. Form Validation: Render the <RegistrationForm />. Use RTL to fill the inputs. Assert that clicking submit with an invalid email format renders an error boundary on the screen.
2. API Mocking: Render the <Dashboard /> component. Mock the global fetch API to simulate a successful data retrieval. Assert that the user's data renders correctly on the screen after the loading state resolves.

Phase 3: End-to-End Testing (Playwright)

You will test the system exactly as a real user would.

1. The Golden Path: Write a Playwright script that navigates to the homepage, clicks "Sign Up", fills the form, submits, logs in, and verifies the dashboard loads.
2. Auth Bypass: Implement a global-setup.js script to save the login state. Write a second test that navigates directly to /dashboard utilizing the saved state, proving it bypasses the login screen.
3. Network Interception: Intercept the backend API call on the login page. Force it to return a 500 Internal Server Error. Assert that the UI gracefully displays a toast notification to the user rather than crashing.