aethex-studio/TEST_README.md

# Testing Guide for AeThex Studio

## Overview

AeThex Studio uses **Vitest** and **React Testing Library** for testing. This setup provides fast, modern testing with excellent TypeScript support.

## Prerequisites

Install testing dependencies:

```bash
npm install -D vitest @vitest/ui @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom @vitejs/plugin-react
```

## Running Tests

```bash
# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run test:coverage
```

## Test Structure

```
src/
├── components/
│   ├── __tests__/
│   │   └── ErrorBoundary.test.tsx
│   └── ui/
│       └── __tests__/
│           └── loading-spinner.test.tsx
├── hooks/
│   └── __tests__/
│       ├── use-keyboard-shortcuts.test.ts
│       └── use-mobile.test.ts
└── test/
    └── setup.ts
```

## Writing Tests

### Component Tests

```typescript
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { YourComponent } from '../YourComponent';

describe('YourComponent', () => {
  it('should render correctly', () => {
    render(<YourComponent />);
    expect(screen.getByText('Expected Text')).toBeInTheDocument();
  });
});
```

### Hook Tests

```typescript
import { describe, it, expect } from 'vitest';
import { renderHook } from '@testing-library/react';
import { useYourHook } from '../useYourHook';

describe('useYourHook', () => {
  it('should return expected value', () => {
    const { result } = renderHook(() => useYourHook());
    expect(result.current).toBe(expectedValue);
  });
});
```

## Test Coverage

Current coverage for tested components:

- ✅ ErrorBoundary: Full coverage
- ✅ LoadingSpinner: Full coverage
- ✅ useKeyboardShortcuts: Core functionality
- ✅ useIsMobile: Breakpoint logic

### Coverage Goals

- Unit Tests: 80%+ coverage
- Integration Tests: Critical user flows
- E2E Tests: Main features (future)

## Best Practices

1. **Arrange-Act-Assert**: Structure tests clearly
2. **Test behavior, not implementation**: Focus on what users see
3. **Use data-testid sparingly**: Prefer accessible queries
4. **Mock external dependencies**: Keep tests isolated
5. **Keep tests simple**: One concept per test

## Mocking

### Window APIs

Already mocked in `src/test/setup.ts`:
- `window.matchMedia`
- `IntersectionObserver`
- `ResizeObserver`

### Custom Mocks

```typescript
vi.mock('../yourModule', () => ({
  yourFunction: vi.fn(),
}));
```

## CI/CD Integration

Add to your CI pipeline:

```yaml
- name: Run Tests
  run: npm test

- name: Check Coverage
  run: npm run test:coverage
```

## Debugging Tests

```bash
# Run specific test file
npm test -- ErrorBoundary.test.tsx

# Run tests matching pattern
npm test -- --grep "keyboard"

# Debug in VS Code
# Add breakpoint and use "Debug Test" in test file
```

## Resources

- [Vitest Documentation](https://vitest.dev/)
- [React Testing Library](https://testing-library.com/react)
- [Testing Best Practices](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)

## Future Enhancements

- [ ] Add E2E tests with Playwright
- [ ] Set up visual regression testing
- [ ] Add performance testing
- [ ] Implement mutation testing
- [ ] Add integration tests for API calls