Testing Guide

Comprehensive testing guide covering unit tests with Vitest and end-to-end testing with Playwright for CatCMS. [object Object]

Overview

Testing Philosophy

CatCMS follows a comprehensive testing approach:

  • Unit Tests - Fast, isolated tests for individual functions and services
  • End-to-End Tests - Browser-based tests for critical user journeys and workflows

Test Coverage Goals

  • 90% minimum code coverage for core business logic
  • All API endpoints have E2E test coverage
  • Key user workflows have comprehensive test coverage
  • Plugin functionality is thoroughly tested

Current Coverage Status

As of the latest test run:

πŸ“Š

Overall Coverage

90.86% code coverage

βœ…

Total Tests

684 passing tests

πŸ“

Test Files

26 test files

🎯

Statements

90.86% coverage

πŸ”€

Branches

90.34% coverage

βš™οΈ

Functions

96.23% coverage


Testing Stack

Core Testing Tools

⚑

Vitest

Fast, Vite-native test runner with excellent TypeScript support

🎭

Playwright

Reliable cross-browser testing with powerful debugging

πŸ“ˆ

@vitest/coverage-v8

Fast, accurate code coverage using V8's built-in coverage

Why These Tools?

  • Vitest - Fast, Vite-native test runner with excellent TypeScript support
  • Playwright - Reliable cross-browser testing with powerful debugging capabilities
  • Coverage-v8 - Fast, accurate code coverage using V8’s built-in coverage

Setup and Installation

Prerequisites

Install Dependencies

Configuration Files

The project includes pre-configured test setups:

  • vitest.config.ts - Vitest configuration
  • playwright.config.ts - Playwright configuration
  • tests/e2e/utils/test-helpers.ts - Shared test utilities

Unit Testing with Vitest

Vitest Configuration

Vitest Config

Real-World Unit Test Example

Cache Plugin Tests

Unit Testing Patterns

Testing with Mocks


End-to-End Testing with Playwright

Playwright Configuration

Playwright Config

Health Check Tests

Health Check Tests

Authentication Tests

Authentication Tests

Content Management Tests

Content Tests

API Testing with Playwright

API Tests


Running Tests

Unit Tests

Unit Test Commands

E2E Tests

E2E Test Commands


Coverage Reporting

Viewing Coverage Reports

Coverage Commands

Coverage Thresholds

The project enforces minimum coverage thresholds:

thresholds: {
  global: {
    branches: 90,
    functions: 90,
    lines: 90,
    statements: 90
  }
}

Recent Coverage Improvements:

The project recently increased coverage from 87% to over 90% by adding comprehensive tests for:

  • Media storage operations - 92.96%
  • Image optimization - 91.74%
  • Cache plugin functionality - extensive coverage
  • Core services (CDN, notifications, scheduler, workflow) - all >93%

Testing Plugins

Plugin Test Structure

Plugins include their own test files:

src/plugins/cache/
β”œβ”€β”€ services/
β”‚   β”œβ”€β”€ cache.ts
β”‚   └── cache-config.ts
└── tests/
    └── cache.test.ts

Example Plugin Test

Plugin Tests


Test Helpers and Utilities

Common Test Helpers

Test Helpers


Best Practices

1. Test Organization

  • Keep tests close to code - Unit tests live alongside the code they test
  • Logical grouping - Use describe blocks to organize related tests
  • Clear naming - Test names should describe what is being tested and expected outcome

Test Organization

2. Test Independence

  • Each test should be independent and not rely on other tests
  • Use beforeEach to set up fresh state
  • Clean up after tests when necessary

Test Independence

3. Async Testing

  • Always use async/await for asynchronous operations
  • Don’t forget to await promises in tests

Async Testing

4. Playwright Best Practices

  • Use test helpers - Create reusable functions for common operations
  • Wait for elements - Use Playwright’s built-in waiting mechanisms
  • Avoid fixed timeouts - Prefer waitForSelector over waitForTimeout
  • Handle HTMX - Use the waitForHTMX helper for dynamic updates

Testing Best Practices

  • Always define TypeScript interfaces for test data - Break down complex tests into smaller, focused tests - Use fixtures and factories for consistent test data - Test both success and failure cases - Verify error messages and status codes - Keep tests fast by mocking external dependencies - Run tests in CI/CD pipeline before deployment

Next Steps

Was this page helpful?