Spaces:
Running
Running
File size: 2,818 Bytes
60b6623 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
# Frontend Unit Tests
This directory contains unit tests for individual React components, contexts, and pages.
## Structure
```
unit_tests/
├── HeaderNav.test.tsx # Tests for HeaderNav component
├── FilterBar.test.tsx # Tests for FilterBar component
├── ExportModal.test.tsx # Tests for ExportModal component
├── FilterContext.test.tsx # Tests for FilterContext
├── HelpPage.test.tsx # Tests for HelpPage
└── README.md # This file
```
## Test Categories
### Component Tests
- **HeaderNav.test.tsx**: Tests navigation rendering, logo display, and button presence
- **FilterBar.test.tsx**: Tests filter controls, input rendering, and loading states
- **ExportModal.test.tsx**: Tests export modal functionality, bulk/single modes, and user interactions
### Context Tests
- **FilterContext.test.tsx**: Tests FilterContext state management, updates, and provider functionality
### Page Tests
- **HelpPage.test.tsx**: Tests help page content, sections, and action buttons
## Running Unit Tests
```bash
# Run all unit tests
npm run test:unit
# Run unit tests in watch mode
npm run test:unit:watch
# Run unit tests with coverage
npm run test:unit:coverage
```
## Test Patterns
### Component Testing
```typescript
import { render, screen } from '@testing-library/react'
import { describe, it, expect, vi } from 'vitest'
import ComponentName from '../../components/ComponentName'
describe('ComponentName', () => {
it('renders without crashing', () => {
render(<ComponentName />)
expect(screen.getByText('Expected Text')).toBeInTheDocument()
})
})
```
### Context Testing
```typescript
import { render, screen, fireEvent } from '@testing-library/react'
import { describe, it, expect, vi } from 'vitest'
import { ContextProvider } from '../../contexts/ContextName'
import { useContextName } from '../../hooks/useContextName'
// Test component to access context
const TestComponent = () => {
const context = useContextName()
return <div data-testid="context-value">{context.value}</div>
}
```
### Mocking
```typescript
// Mock external dependencies
vi.mock('react-router-dom', () => ({
useNavigate: () => vi.fn(),
useLocation: () => ({ pathname: '/' }),
}))
// Mock hooks
vi.mock('../../hooks/useHookName', () => ({
useHookName: () => ({
value: 'test',
setValue: vi.fn(),
}),
}))
```
## Best Practices
1. **Test individual components in isolation**
2. **Mock external dependencies**
3. **Test user interactions and state changes**
4. **Use descriptive test names**
5. **Keep tests focused and simple**
6. **Test both success and error cases**
## Coverage Goals
- **Components**: 90%+ coverage
- **Contexts**: 95%+ coverage
- **Pages**: 85%+ coverage
- **Overall**: 90%+ coverage
|