# Testing Guide

## Overview
This project uses **Vitest** and **React Testing Library** for testing.

## Running Tests

```bash
# Run tests in watch mode
npm run test

# Run tests once
npm run test:run

# Run tests with UI
npm run test:ui

# Run tests with coverage
npm run test:coverage
```

## Test Structure

```
src/
├── components/
│   ├── __tests__/
│   │   └── ProtectedRoute.test.tsx
│   └── ProtectedRoute.tsx
├── lib/
│   ├── __tests__/
│   │   └── utils.test.ts
│   └── utils.ts
├── pages/
│   └── login/
│       ├── __tests__/
│       │   └── index.test.tsx
│       └── index.tsx
└── test/
    ├── setup.ts          # Test setup
    └── test-utils.tsx    # Custom render with providers
```

## Writing Tests

### Component Tests

```typescript
import { describe, it, expect } from 'vitest'
import { render, screen } from '@/test/test-utils'
import MyComponent from '../MyComponent'

describe('MyComponent', () => {
  it('should render correctly', () => {
    render(<MyComponent />)
    expect(screen.getByText('Hello')).toBeInTheDocument()
  })
})
```

### Testing with User Interactions

```typescript
import userEvent from '@testing-library/user-event'

it('should handle click', async () => {
  const user = userEvent.setup()
  render(<Button>Click me</Button>)
  
  await user.click(screen.getByRole('button'))
  expect(screen.getByText('Clicked')).toBeInTheDocument()
})
```

### Testing API Calls

```typescript
import { vi } from 'vitest'
import { adminApiHelpers } from '@/lib/api-client'

vi.mock('@/lib/api-client', () => ({
  adminApiHelpers: {
    getUsers: vi.fn(),
  },
}))

it('should fetch users', async () => {
  const mockGetUsers = vi.mocked(adminApiHelpers.getUsers)
  mockGetUsers.mockResolvedValue({ data: [] })
  
  // Test component that calls getUsers
})
```

## Coverage Goals

- **Statements**: 80%+
- **Branches**: 75%+
- **Functions**: 80%+
- **Lines**: 80%+

## Best Practices

1. **Test behavior, not implementation**
2. **Use semantic queries** (getByRole, getByLabelText)
3. **Avoid testing implementation details**
4. **Mock external dependencies**
5. **Keep tests simple and focused**
6. **Use descriptive test names**

## CI Integration

Tests run automatically on:
- Every push to main/develop
- Every pull request
- Before deployment

See `.github/workflows/ci.yml` for details.