Testing

The unit, integration, browser and smoke tests that validate the application from source code to staging.

Overview

The test suite is intentionally small but covers several layers of the platform. Each test has been selected to demonstrate a different testing technique, including schema validation, dependency mocking, browser automation, accessibility analysis, container verification and post-deployment smoke testing.

Diagram

flowchart LR
    Source[Source Code]
    Vitest[Vitest]
    Playwright[Playwright]
    Image[Docker Image]
    Staging[Staging Environment]

    Source --> Vitest
    Source --> Playwright
    Playwright --> Image
    Image --> Staging

    Vitest --> Unit[Unit Test]
    Vitest --> Integration[Route Integration Test]
    Playwright --> Browser[Browser and Accessibility Tests]
    Image --> Container[Container Smoke Test]
    Staging --> Deployment[Deployment Smoke Test]

Current Test Coverage

Layer	Tool	Current example
Unit	Vitest	Verifies that the contact schema rejects an invalid email address.
Integration	Vitest	Calls the contact route with valid input and verifies both Resend operations through a mocked client.
End-to-end	Playwright	Submits the contact form through the browser and verifies its success state.
Navigation	Playwright	Moves between documentation chapters and verifies the active navigation state.
Responsive	Playwright	Confirms that the compact documentation navigation is used at a mobile viewport.
Theme	Playwright	Selects dark mode and verifies that the choice persists after a reload.
Accessibility	Playwright and axe-core	Scans the contact section for automatically detectable accessibility violations.
Container	Shell, Docker and curl	Starts the production image, verifies the homepage response and confirms that the container uses the non-root `nextjs` user.
Deployment	Shell and curl	Requests the staging homepage over HTTPS after ECS reports a stable deployment.

Unit and Integration Testing

Vitest runs the fast tests that exercise application code without opening a browser.

The unit test calls the Zod contact schema directly. The integration test calls the actual Next.js route handler but replaces the Resend SDK with a mock. This allows the test to verify the route response, destination addresses and number of email operations without making an external network request.

Browser Testing

Playwright builds the application and runs it using the same Next.js standalone output used by the production container. Chromium then exercises representative user behaviour against the running application.

The contact-form browser test intercepts /api/contact and returns a controlled response. It verifies the browser experience without invoking the server route or sending email. The remaining browser tests cover documentation navigation, responsive behaviour, theme persistence and accessibility.

Note

Automated tests never send a real email. Resend is mocked in the route integration test, while the browser test intercepts the contact API request before it reaches the application server.

Smoke Testing

The container smoke test starts the built Docker image with representative runtime configuration and waits for the application to respond. It checks for expected homepage content and verifies that the image runs as the non-root nextjs user.

After an ECS deployment becomes stable, the staging smoke test performs an HTTPS request against staging.portfolio.trentmizzi.me and verifies identifying page content. This confirms that DNS, TLS, the load balancer, ECS and the application are working together from the public entry point.

Running Tests Locally

The root Makefile provides a consistent interface for local testing:

Command	Purpose
`make test`	Run the Vitest unit and integration tests.
`make test-e2e`	Build the application and run all Playwright browser tests.
`make test-all`	Run ESLint, TypeScript, Vitest and Playwright.
`make test-container`	Build the Docker image and run its container smoke test.
`make test-staging`	Run the HTTPS smoke test against staging.

A single Playwright file can be run through the package command when a more focused check is required:

pnpm --filter portfolio-frontend test:e2e tests/e2e/contact-form.spec.ts

Quality Gates

The pre-commit hook runs ESLint and the fast Vitest suite. This provides immediate feedback without adding the production build and browser startup time to every commit.

GitHub Actions provides the broader pull-request checks:

ESLint.
TypeScript type checking.
Next.js production build.
Vitest unit and integration tests.
Playwright browser and accessibility tests.
Docker image build and container smoke test.

The deployment workflow adds a final staging smoke test after ECS reports that the updated service is stable.

Current Boundaries

The suite currently provides one representative example at each testing layer rather than pursuing a coverage target. Resend provider behaviour is mocked, Chromium is the only browser used in CI, and the deployment workflow's pre-deployment image-test stage remains a placeholder. These areas can be expanded as the application introduces more behaviour and operational requirements.