# Search Implementation Tests

## Test Requirements

The search implementation must pass these tests to be considered complete:

### 1. Frontend Tests

#### Basic Search Form

- [ ] Search page (`/search`) loads successfully
- [ ] Search form uses semantic HTML5 `<input type="search">`
- [ ] Form includes proper `<label>` and accessibility attributes
- [ ] Search input has `name="q"` attribute
- [ ] Form uses `method="get"` for shareable URLs
- [ ] Form works without JavaScript (progressive enhancement)

#### Search Input Behavior

- [ ] Search input shows correct mobile keyboard (with "Search" button)
- [ ] Real-time search triggers after 300ms delay when JavaScript enabled
- [ ] Search suggestions appear as user types
- [ ] Search works with form submission when JavaScript disabled
- [ ] Empty search query handled gracefully

#### Search Results Display

- [ ] Topic matches displayed with proper formatting
- [ ] Section matches show topic#section format
- [ ] Results are clickable and navigate correctly
- [ ] No results state handled appropriately
- [ ] Loading states shown during search

### 2. Backend Tests

#### Search API Endpoint

- [ ] `/search` endpoint exists in copilot server
- [ ] Accepts GET requests with `q` parameter
- [ ] Returns JSON response with proper structure
- [ ] Handles empty query gracefully
- [ ] Returns appropriate HTTP status codes

#### Search Logic

- [ ] Generative search using LLM infrastructure works
- [ ] Topic suggestions include relevant matches
- [ ] Section recommendations work correctly
- [ ] Search results are ranked by relevance
- [ ] Search handles special characters and edge cases

#### Performance Requirements

- [ ] Search response time < 300ms average
- [ ] Caching works for common searches
- [ ] API handles concurrent requests properly
- [ ] Error handling for search failures

### 3. Integration Tests

#### End-to-End Search Flow

- [ ] User can search from any page
- [ ] Search results link to correct topic pages
- [ ] Section links navigate to proper anchors
- [ ] Search URLs are shareable (`/search?q=query`)
- [ ] Back/forward navigation works correctly

#### Topic Navigation

- [ ] Topic links work: `/t/topic_name`
- [ ] Section anchors work: `/t/topic_name#section`
- [ ] Nested topics work: `/t/parent/child`
- [ ] 404 handling for non-existent topics

### 4. Accessibility Tests

#### WCAG Compliance

- [ ] Search form has proper ARIA labels
- [ ] Search results announced to screen readers
- [ ] Keyboard navigation works throughout
- [ ] Focus management handled correctly
- [ ] Color contrast meets WCAG AA standards

#### Mobile Usability

- [ ] Search works on mobile devices
- [ ] Touch targets are appropriately sized
- [ ] Search input properly sized for mobile
- [ ] Results readable on small screens

### 5. Code Quality Tests

#### TypeScript/JavaScript

- [ ] No TypeScript errors in search-related files
- [ ] Proper error handling throughout
- [ ] No `any` types used
- [ ] Code follows project style guidelines

#### Python (Backend)

- [ ] Type annotations present
- [ ] Proper exception handling
- [ ] Code passes ruff linting
- [ ] No hardcoded secrets or sensitive data

## Test Commands

### Frontend Tests

```bash
cd shells/shell-web
pnpm test
pnpm quality
```

### Backend Tests

```bash
cd copilot
uv run ruff check .
uv run black --check .
uv run mypy .
uv run pytest tests/
```

### Integration Tests

```bash
# Start both servers
cd shells/shell-web && pnpm dev &
cd copilot && uv run fastapi dev main.py &

# Run end-to-end tests
pnpm test:e2e
```

## Success Criteria

All tests must pass before the search implementation is considered complete. The implementation should:

1. Work without JavaScript (progressive enhancement)
2. Meet performance requirements (< 300ms response time)
3. Follow accessibility guidelines (WCAG AA)
4. Use semantic HTML5 for search functionality
5. Integrate properly with existing topic structure
6. Handle edge cases and errors gracefully