frontend/src/test/unit_tests/README.md

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

# 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

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

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

// 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