Skip to content

test: set up testing infrastructure with CI workflow and reference tests#108

Merged
TristanHourtoulle merged 12 commits intodevfrom
feat/testing
Feb 28, 2026
Merged

test: set up testing infrastructure with CI workflow and reference tests#108
TristanHourtoulle merged 12 commits intodevfrom
feat/testing

Conversation

@TristanHourtoulle
Copy link
Member

Summary

Set up the complete testing infrastructure for the project: Vitest + React Testing Library for unit/component tests, Playwright for E2E, and a CI workflow to run everything automatically. Includes reference test examples for each category (pure functions, hooks, components, E2E) to serve as a base for the team.

Type of Change

  • Feature
  • Bug Fix
  • Refactoring
  • Documentation
  • Performance
  • Other

Changes Overview

Testing Configuration

  • Vitest config with coverage reporting
  • Playwright config updates
  • @testing-library/user-event and ResizeObserver polyfill setup
  • Shared test setup (tests/setup.ts)

Test Infrastructure

  • Test factories (tests/factories/) for users, courses, quizzes - reusable data builders
  • Mock helpers (tests/mocks/) for axios, Next.js router, NextAuth session
  • Deduplicated MockEventSource utility

Reference Tests (examples for the team)

  • Pure functions: auth-utils, quiz, role-permissions, subscription-helpers
  • Hooks: useUserStatistics, useQuizPlayer, useGenerationProgress
  • Components: SigninForm, SignupForm, AuthGuard (RTL)
  • E2E: auth, dashboard, navigation flows (Playwright)

CI/CD

  • .github/workflows/test.yml - Vitest unit tests + Playwright E2E
  • PR coverage report
  • Caching for pnpm and Playwright browsers

Documentation

  • docs/TESTING.md - testing guide for the team
  • README section pointing to the guide

Technical Details

Files Changed: ~42 files
Main Areas:

  • tests/ - all test infrastructure, factories, mocks, and reference tests
  • .github/workflows/ - CI workflow
  • vitest.config.ts, playwright.config.ts - test runner configs
  • docs/TESTING.md - team documentation

Testing

  • Tested locally
  • No regression in existing features

Breaking Changes

None

Deployment Notes

No special steps required. New dev dependencies added (@testing-library/user-event).

Create reusable data builders (user, quiz, course) and mock utilities
(session, router, axios) to reduce duplication in future tests.
Remove duplicate MockEventSource from useGenerationProgress test and
use the shared one from setup.ts. Add instance tracking and
simulateProgressEvent helper to the shared mock.
Add GitHub Actions workflow that runs unit tests on PRs and posts a
sticky coverage comment via vitest-coverage-report-action. Add
json-summary reporter and expanded coverage exclusions to vitest
config. Add test:ci script for non-watch CI execution.
Lucide icons inside <label> elements were polluting accessible names,
preventing screen readers and Playwright from matching label text correctly.
… job

- Fix selectors to match actual UI (getByRole, getByPlaceholder)
- Remove conditional tests and arbitrary waits
- Fix routes to match real app structure
- Add E2E job to CI workflow (build + chromium + report artifact)
- Move permissions to job level (SonarQube compliance)
- Configure Playwright for CI (pnpm start instead of dev)
- quiz: shuffleArray immutability, shuffleQuiz answer preservation (11 tests)
- subscription-helpers: getSubscriptionStatus all branches, formatSubscriptionDate (12 tests)
- role-permissions: canUserModifyTicket/canUserReopenTicket per role (11 tests)
- auth-utils: isTokenExpired, getCurrentUserId id/_id fallback, isAuthenticated, getAuthHeaders (15 tests)
- useUserStatistics: stats computation, score distribution, trend, streaks, weekly activity, period filtering (23 tests)
- useQuizPlayer: initialization, answer submission, navigation, restart, insight creation, edge cases (17 tests)
ResizeObserver mock needed for Radix UI components in jsdom.
user-event enables realistic user interaction testing in RTL.
Reference implementations for the team to follow when adding component tests:
- AuthGuard: conditional rendering based on hook state (6 tests)
- SigninForm: form validation, submit flow, password toggle, callbacks (11 tests)
- SignupForm: registration validation, password requirements, error handling (9 tests)

Each file documents the RTL pattern used (mock hooks, userEvent.setup, waitFor).
- docs/TESTING.md: architecture, patterns for each test type, commands
- README.md: add test commands section with link to guide
@github-actions
Copy link

github-actions bot commented Feb 20, 2026

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 58.38% 411 / 704
🔵 Statements 59.39% 433 / 729
🔵 Functions 45.5% 76 / 167
🔵 Branches 57.51% 199 / 346
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
components/auth/signin-form.tsx 100% 85.71% 100% 100%
components/auth/signup-form.tsx 76.92% 87.5% 60% 76.92% 65-68, 210, 292
Generated in workflow #6 for commit afb76cd by the Vitest Coverage Report Action

@TristanHourtoulle TristanHourtoulle self-assigned this Feb 20, 2026
@TristanHourtoulle TristanHourtoulle added the enhancement Style / UI-UX improvements label Feb 20, 2026
@TristanHourtoulle TristanHourtoulle merged commit eb801a8 into dev Feb 28, 2026
9 checks passed
@TristanHourtoulle TristanHourtoulle deleted the feat/testing branch February 28, 2026 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Style / UI-UX improvements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants