felladrin / felladrin/MiniSearch

test: add component-level tests for key UI flows

Closed
#2,516 0 comments 0 reactions 0 assignees View on GitHub
test
Dominant language
TypeScript
Stars
587
Forks
70
Avg merge
1h 42m
Merged PRs (30d)
184

Description

## Problem

Client components are the user-facing surface of the application, but test coverage is sparse:

- **58 test files** total, but only **11 are component tests** ( in )
- The coverage report shows at **0%** in the summary (likely excluded or not run)
- Key UI flows (search form, results display, AI response, history, settings) have minimal or no component tests

## Current State

| Directory | Test Files | Coverage |
|-----------|------------|----------|
| `client/modules/` | 26 | 78.69% |
| `client/components/` | 11 | ~0% (not measured) |
| `server/` | 21 | 87.11% |
| `shared/` | 0 | N/A |

## Why It Matters

- UI bugs reach users before they're caught by tests
- Refactoring components is risky without tests
- Accessibility and responsive behavior aren't verified
- The 11 existing component tests are a good start, but they don't cover the critical flows

## Proposed Test Targets

Prioritize tests for these components/flows:

1. **Search Form** (`client/components/Search/Form/`)
- Query input and submission
- URL parameter handling (`/?q=...`)
- Empty query validation
- Search suggestions

2. **Search Results** (`client/components/Search/Results/`)
- Text results rendering
- Image results rendering
- Empty results state
- Error/degraded states (retry button, cached results banner)

3. **AI Response** (`client/components/AiResponse/`)
- Response streaming and rendering
- Citations linking to sources
- Follow-up questions
- Error handling

4. **History** (`client/components/Search/History/`)
- History drawer open/close
- Search history list
- Restore from history
- Clear history

5. **Settings/Menu** (`client/components/Pages/Main/Menu/`)
- Settings form validation
- Inference type switching
- Access key input

## Acceptance Criteria

- Component tests added for the 5 priority areas above
- Tests use React Testing Library (already configured)
- `npm test` passes
- Component coverage is measurable and reported
- Tests verify user interactions, not implementation details

Contributor guide

Open the contributing guide

Research direction

Start with the existing component tests and the five listed areas under client/components/: Search/Form, Search/Results, AiResponse, Search/History, and Pages/Main/Menu. Use the configured React Testing Library and run npm test. Done means user interactions and the listed states are covered, npm test passes, and component coverage is measurable and reported.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, testing
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.