Testing

Testing

Overview

Layer	Tool	Directory
Unit	Vitest	lib/**/*.test.ts, hooks/__tests__/
Component	Storybook + Vitest	stories/
E2E	Playwright	e2e/

Unit Tests (Vitest)

Configuration: vitest.config.ts with two projects:

1. Storybook browser tests — via Playwright browser
2. Node unit tests — for lib/hooks/components

Test Files

File	What it tests
lib/codeRunner.test.ts	Safe code execution, anti-cheat detection, timeout handling
lib/codeValidator.test.ts	Drill validation, Unicode normalization, pattern matching
lib/quizGenerator.test.ts	Quiz scoring: correct/incorrect, fast bonuses, streak multipliers
lib/storage.test.ts	localStorage persistence, SSR safety, export/import
lib/__tests__/problems-validation.test.ts	Data integrity across all 25 language problem sets
lib/__tests__/codeValidator.test.ts	Additional validator tests
hooks/__tests__/useDrill.test.tsx	Drill hook: session management, answer checking, streaks
hooks/__tests__/useQuiz.test.tsx	Quiz hook: question flow, scoring, time bonuses
hooks/__tests__/useFlashcardStudy.test.tsx	Study hook: rating, persistence, weak cards, prioritization
lib/flashcards/__tests__/adapters.test.ts	Flashcard adapters: all 5 sources, ID uniqueness, filtering

Total: 67 test files, 13,995 tests

Additional Test Files

File	What it tests
lib/__tests__/frontend-drills-validation.test.ts	All 460 frontend drill sample solutions produce correct expected output
lib/__tests__/problems-index.test.ts	Problem index functions: getProblemsForLanguage, categories, counts, search
lib/__tests__/complexityProblems.test.ts	Time/space complexity quiz problem integrity
lib/problems/__tests__/language-helpers.test.ts	Language-specific helper functions
components/__tests__/CodeEditor.test.tsx	Monaco editor component rendering and behavior

Frontend Drill Sample Validation

All 460 frontend drill sample solutions are validated as part of the Vitest suite (lib/__tests__/frontend-drills-validation.test.ts). This tests every problem across React, Angular, Vue, and Native JS by executing each sample through the validator and comparing the result to expected. Run after modifying any problem definitions or the code runner/validator:

npx vitest run lib/__tests__/frontend-drills-validation.test.ts

Running

pnpm test              # Run all unit tests
pnpm test:watch        # Watch mode
pnpm test -- --coverage # With coverage

E2E Tests (Playwright)

Configuration: playwright.config.ts

Browser Projects

Project	Viewport
Chromium	Desktop
Firefox	Desktop
WebKit (Safari)	Desktop
Mobile Chrome	390x844
Mobile Safari	390x844

Test Files

File	What it tests
e2e/home.spec.ts	Home page renders, language grid visible
e2e/language-selection.spec.ts	Language selection and routing
e2e/drill-mode.spec.ts	Drill flow: start, type, validate, next
e2e/quiz-mode.spec.ts	Quiz flow: start, answer, score
e2e/reference.spec.ts	Reference page loads methods
e2e/exercises.spec.ts	Exercise page: Learn/Practice tabs, tests
e2e/problems/	Per-language problem validation (JS, TS, Python, Java, Go, Ruby, C, C++, C#, MongoDB, PostgreSQL, MySQL)
e2e/problems/all-problems-validation.spec.ts	Cross-language problem data integrity

Shared Utilities

• e2e/fixtures/test-utils.ts — Common test helpers

Running

pnpm test:e2e           # Run all E2E tests
pnpm test:e2e:ui        # Interactive Playwright UI

Storybook

Configuration: .storybook/main.ts (nextjs-vite framework)

Stories

Story	Component
stories/DifficultyBadge.stories.tsx	Difficulty badges in all states
stories/LanguageIcon.stories.tsx	Language icons for all 25 languages
stories/LoadingSpinner.stories.tsx	Loading states
stories/MethodCard.stories.tsx	Method cards
stories/ProgressBar.stories.tsx	Progress bar variants
stories/StatsBar.stories.tsx	Stats display
stories/Timer.stories.tsx	Timer modes
stories/BackLink.stories.tsx	Back navigation link
stories/Navbar.stories.tsx	Navigation bar states
stories/LivePreview.stories.tsx	Live code preview (HTML, CSS, JS, React, Vue, Angular)
stories/ClearDataDialog.stories.tsx	Data clearing confirmation dialog

Running

pnpm storybook          # Start Storybook dev server (port 6006)
pnpm build-storybook    # Static Storybook build

CI Pipeline

pnpm ci   # Runs: typecheck → lint:biome → lint → build → vitest

Pre-commit Hooks (Husky + lint-staged)

On every commit:

1. Biome — biome check --write on staged .js/.jsx/.ts/.tsx files
2. ESLint — eslint --fix --max-warnings 0 on staged files