feat: Increase component test coverage

Description

Increase test coverage by adding unit tests for React components. Currently, only validation tests exist (11 test files, 4316 tests).

Current Test Coverage

• ✅ Excellent: Data validation tests
• ✅ Excellent: Markdown validation
• ✅ Excellent: Content quality checks
• ❌ Missing: Component unit tests
• ❌ Missing: Hook tests
• ❌ Missing: Utility function tests

Components Needing Tests (Priority Order)

High Priority

1. components/games/quiz-manager.tsx - Quiz card rendering
2. components/game-card.tsx - Game card component
3. components/code-block.tsx - Syntax highlighting
4. components/markdown-content.tsx - Markdown rendering
5. components/search.tsx - Search functionality

Medium Priority

6. components/quizzes-hero.tsx - Hero animations
7. components/roadmap-hero.tsx - Hero animations
8. components/header.tsx - Navigation
9. components/footer.tsx - Footer
10. components/theme-toggle.tsx - Dark mode toggle

Low Priority

• All other components in components/
• Hooks in hooks/ (if any)
• Utilities in lib/

Testing Framework

• Already using: Vitest + React Testing Library
• Good foundation exists

Example Test Structure

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { GameCard } from '@/components/game-card';

describe('GameCard', () => {
  it('renders game title', () => {
    render(<GameCard title="Test Game" slug="test" />);
    expect(screen.getByText('Test Game')).toBeInTheDocument();
  });

  it('renders game description', () => {
    render(<GameCard title="Test" description="Fun game" slug="test" />);
    expect(screen.getByText('Fun game')).toBeInTheDocument();
  });

  it('links to correct URL', () => {
    render(<GameCard title="Test" slug="test-game" />);
    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('href', '/games/test-game');
  });
});

Acceptance Criteria

• Add unit tests for 5 high-priority components
• Achieve at least 70% component coverage
• Test component rendering
• Test prop variations
• Test user interactions (click, hover)
• Test conditional rendering
• Mock external dependencies
• Add coverage reporting to package.json
• Display coverage in CI
• Document testing guidelines

Coverage Commands

{
  "scripts": {
    "test:coverage": "vitest run --coverage",
    "test:coverage:ui": "vitest --coverage --ui"
  }
}

Files to Create

• components/__tests__/game-card.test.tsx
• components/__tests__/quiz-manager.test.tsx
• components/__tests__/code-block.test.tsx
• components/__tests__/markdown-content.test.tsx
• components/__tests__/search.test.tsx
• docs/testing-guide.md - Testing best practices

Start by reviewing the existing Vitest and React Testing Library setup, then inspect the five high-priority components and current test files. Add the named component tests, coverage commands and CI reporting, and document the guidelines; done means at least 70% component coverage with rendering, props, interactions, conditional states and mocked dependencies covered.