auto-claude: subtask-1-3 - Document testing requirements and setup

This commit is contained in:
2026-01-25 06:34:13 +01:00
parent 52fcf579ad
commit 5822ceb7c4
+119 -12
View File
@@ -372,34 +372,141 @@ export function WelcomeMessage() {
## Testing
### Unit Tests
- Write tests for utility functions and complex logic
- Use Vitest as the testing framework
- Place test files next to the code they test with `.test.ts` or `.test.tsx` extension
This project uses **Vitest** as its testing framework. Vitest is a fast, modern test runner built for Vite-based projects, offering:
- Lightning-fast execution with native ESM support
- Jest-compatible API for easy migration and familiarity
- First-class TypeScript support
- Built-in coverage reporting with c8
**Current State:** The project is fully configured with Vitest, but **no tests currently exist**. We encourage contributors to add tests for new features and gradually improve test coverage.
### Test Setup
Vitest is already configured in `package.json`:
```json
{
"scripts": {
"test": "vitest",
"test:coverage": "vitest run --coverage"
},
"devDependencies": {
"vitest": "^1.3.1"
}
}
```
### Running Tests
```bash
# Run tests in watch mode (recommended during development)
npm test
# Run tests once (useful for CI/CD)
npm run test:coverage
# The test runner will:
# - Automatically detect .test.ts, .test.tsx, .spec.ts, .spec.tsx files
# - Re-run tests when files change (in watch mode)
# - Display coverage reports (with --coverage flag)
```
### Writing Tests
When adding tests to this project, follow these conventions:
#### 1. **File Naming & Location**
- Place test files **next to the code they test**
- Use `.test.ts` or `.test.tsx` extension for test files
- Match the filename of the file being tested
Example:
```
src/utils/
├── formatDate.ts # Source file
└── formatDate.test.ts # Test file
```
#### 2. **Test Structure**
- Use `describe` blocks to group related tests
- Use `it` or `test` for individual test cases
- Write descriptive test names that explain the expected behavior
Example:
```typescript
// formatDate.test.ts
// src/utils/formatDate.test.ts
import { describe, it, expect } from 'vitest';
import { formatDate } from './formatDate';
describe('formatDate', () => {
it('formats date correctly', () => {
it('formats date in DD.MM.YYYY format', () => {
const date = new Date('2024-01-15');
expect(formatDate(date)).toBe('15.01.2024');
});
it('handles invalid dates gracefully', () => {
const invalidDate = new Date('invalid');
expect(formatDate(invalidDate)).toBe('Invalid Date');
});
});
```
### Running Tests
```bash
# Run tests in watch mode
npm test
#### 3. **Component Testing**
For React components, use Vitest with React Testing Library patterns:
# Run tests once with coverage
npm run test:coverage
```typescript
// src/components/Button.test.tsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Button } from './Button';
describe('Button', () => {
it('renders with correct text', () => {
render(<Button>Click me</Button>);
expect(screen.getByText('Click me')).toBeInTheDocument();
});
});
```
#### 4. **What to Test**
- **Utility functions** - Pure functions and helpers
- **Business logic** - Complex calculations and transformations
- **Hooks** - Custom React hooks with multiple states
- **Components** - User interactions and rendering logic
- **API integrations** - Service layer functions (use mocks)
#### 5. **Testing Conventions**
- **Arrange-Act-Assert** pattern for test structure
- **One assertion per test** when possible (for clarity)
- **Mock external dependencies** (API calls, database, etc.)
- **Test edge cases** and error conditions
- **Use meaningful test data** that reflects real usage
Example:
```typescript
describe('calculateDiscount', () => {
it('applies 10% discount for orders over $100', () => {
// Arrange
const orderTotal = 150;
const discountThreshold = 100;
// Act
const result = calculateDiscount(orderTotal, discountThreshold);
// Assert
expect(result).toBe(135); // 150 - 15 (10%)
});
});
```
### Test Coverage Goals
While we don't enforce strict coverage requirements, aim for:
- **80%+ coverage** for utility functions and business logic
- **60%+ coverage** for components
- **100% coverage** for critical paths (authentication, payments, data validation)
Run `npm run test:coverage` to see current coverage reports.
## Commit Guidelines
### Commit Message Format