[P1] Test file web-ui/__tests__/components/DiscoveryProgress.test.tsx is too large

[frankbria]

The file web-ui/tests/components/DiscoveryProgress.test.tsx is more than 27739 tokens and exceeds the length for most AI agent reads. This makes it difficult to parse.

Refactor the test file to break it up in more manageable pieces.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Related PRs

#187 - refactor: Consolidate web-ui test files to tests/ directory [merged]
#191 - feat(e2e): Enable conditional tests and fix discovery startup [merged]
#194 - Fix PRD generation progress tracking UI [merged]
#196 - fix(discovery): Synchronize PRD buttons and fix state persistence on tab revisit [merged]
#211 - feat(dashboard): Add PhaseProgress component for phase visualization [closed]

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[traycerai]

Plan

Observations

The file:web-ui/__tests__/components/DiscoveryProgress.test.tsx file contains 2992 lines organized into 7 distinct test suites covering different features of the DiscoveryProgress component. The file uses Jest with React Testing Library, follows TDD principles, and includes comprehensive mocks for APIs, WebSocket, and child components. The test suites are logically separated by feature areas (core functionality, answer UI, progress tracking, PRD generation, WebSocket handling, error recovery, and advanced UI features), making them natural candidates for splitting into separate files.

Approach

The refactoring will split the monolithic test file into 7 focused test files, each corresponding to a logical feature area. This approach maintains test isolation, preserves all existing test coverage, and improves maintainability by creating smaller, more manageable test files. A shared test utilities file will be created to extract common mocks, setup functions, and test data, reducing duplication across the split files. The file naming convention will follow the pattern DiscoveryProgress.[feature].test.tsx to maintain clear association with the component being tested.

Implementation Steps

1. Create Shared Test Utilities File

Create file:web-ui/__tests__/components/DiscoveryProgress.testutils.tsx to contain:

• Common Imports: All shared testing library imports (@testing-library/react, @testing-library/jest-dom, etc.)
• Mock Definitions: Centralized mock implementations for:
  • @hugeicons/react icons
  • projectsApi (getDiscoveryProgress, startDiscovery, submitAnswer, restartDiscovery, retryPrdGeneration)
  • WebSocket client (getWebSocketClient)
  • authFetch utility
  • ProgressBar and PhaseIndicator components
• Mock Setup Functions: Reusable functions like setupDefaultMocks(), setupWebSocketMock(), setupApiMocks()
• Test Data Fixtures: Common test data objects (mock project data, discovery states, questions, etc.)
• Helper Functions: Utility functions for common test operations (e.g., waitForDiscoveryState(), simulateWebSocketMessage())

2. Split Core Functionality Tests

Create file:web-ui/__tests__/components/DiscoveryProgress.core.test.tsx containing lines 99-728:

• Test Suites:
  • Data fetching and error handling
  • Loading states
  • Phase display (discovery/planning/active/review/complete)
  • Discovery states (discovering/completed/idle)
  • ProgressBar integration
  • Question display and counters
  • Start Discovery button functionality
  • Auto-refresh logic (10s intervals)
  • Accessibility (ARIA labels)
  • Responsive design
• Setup: Import shared utilities from DiscoveryProgress.testutils.tsx
• beforeEach/afterEach: Mock clearing, fake timers setup, WebSocket cleanup

3. Split Answer UI Tests

Create file:web-ui/__tests__/components/DiscoveryProgress.answer.test.tsx containing lines 781-1411:

• Test Suites (Feature 012 TDD tests):
  • Answer textarea attributes and validation (US1)
  • Character counter with color thresholds (US2)
  • Submit button enable/disable logic (US3)
  • Ctrl+Enter keyboard shortcut (US4)
  • Success messages with auto-dismiss (US6)
  • Error handling (validation errors, API failures, network errors) (US7)
• Setup: Import shared utilities and mock setup functions
• Focus: User interaction with the answer submission interface

4. Split Progress & State Tests

Create file:web-ui/__tests__/components/DiscoveryProgress.progress.test.tsx containing lines 1417-1923:

• Test Suites:
  • Progress bar updates after answer submission (US8)
  • Question counter updates
  • Next question display and transitions (US9)
  • Smooth transition animations
  • Discovery completion flow (last question → planning phase) (US10)
  • UI cleanup on completion
• Setup: Import shared utilities and progress-specific test data
• Focus: State transitions and progress tracking

5. Split PRD Generation Tests

Create file:web-ui/__tests__/components/DiscoveryProgress.prd.test.tsx containing lines 1929-2145:

• Test Suites:
  • View PRD button display and functionality
  • Minimize/expand functionality
  • Task creation indicators
  • WebSocket-driven PRD progress tracking
  • PRD generation states (started/progress/completed/failed)
• Setup: Import shared utilities and PRD-specific mocks
• Focus: Post-discovery PRD generation UI and tracking

6. Split WebSocket Tests

Create file:web-ui/__tests__/components/DiscoveryProgress.websocket.test.tsx containing lines 2151-2454:

• Test Suites:
  • WebSocket message handler verification
  • Discovery event handling (discovery_starting, discovery_reset, question_ready)
  • PRD generation event handling (prd_generation_started, prd_generation_progress, prd_generation_completed, prd_generation_failed)
  • Project ID filtering (ignore messages for other projects)
  • WebSocket connection lifecycle
• Setup: Import shared utilities and WebSocket mock helpers
• Focus: Real-time communication and event handling

7. Split Error & Recovery Tests

Create file:web-ui/__tests__/components/DiscoveryProgress.error.test.tsx containing lines 2460-2780:

• Test Suites:
  • Stuck state detection (30s timeout)
  • Restart discovery button and functionality
  • restartDiscovery API call handling
  • PRD retry flows
  • retryPrdGeneration API call handling
  • Error state display and recovery
• Setup: Import shared utilities and error scenario mocks
• Focus: Error handling and recovery mechanisms

8. Split Advanced UI Tests

Create file:web-ui/__tests__/components/DiscoveryProgress.advanced.test.tsx containing lines 2784-2992:

• Test Suites:
  • Minimized view functionality
  • Auto-minimize after 3 seconds
  • Expand/minimize button interactions
  • Next phase indicators
  • Duplicate submission prevention
  • Advanced UI interactions
• Setup: Import shared utilities and UI-specific test helpers
• Focus: Advanced UI features and edge cases

9. Update Test Configuration

No changes needed to file:web-ui/jest.config.js as Jest will automatically discover all *.test.tsx files. The coverage threshold for file:web-ui/src/components/DiscoveryProgress.tsx (65% for branches, functions, lines, statements) will continue to apply across all split test files.

10. Verification Steps

After splitting the files:

1. Run all tests: Execute npm test to ensure all tests pass
2. Verify coverage: Run npm run test:coverage to confirm coverage thresholds are still met for DiscoveryProgress.tsx
3. Check test count: Verify the total number of test cases matches the original file
4. Validate imports: Ensure all shared utilities are properly imported in each split file
5. Review test isolation: Confirm each test file can run independently without dependencies on other split files

11. Documentation Update

Update file:TESTING.md or create a comment in the original test file location explaining:

• The test file has been split into multiple focused files
• List all the new test files and their purposes
• Reference the shared utilities file
• Explain the naming convention used

File Organization Summary

web-ui/__tests__/components/
├── DiscoveryProgress.testutils.tsx       (Shared utilities, mocks, fixtures)
├── DiscoveryProgress.core.test.tsx       (~630 lines - Core functionality)
├── DiscoveryProgress.answer.test.tsx     (~630 lines - Answer UI)
├── DiscoveryProgress.progress.test.tsx   (~506 lines - Progress tracking)
├── DiscoveryProgress.prd.test.tsx        (~216 lines - PRD generation)
├── DiscoveryProgress.websocket.test.tsx  (~303 lines - WebSocket handling)
├── DiscoveryProgress.error.test.tsx      (~320 lines - Error recovery)
└── DiscoveryProgress.advanced.test.tsx   (~208 lines - Advanced UI)

Each file will be under 700 lines, making them easily parsable by AI agents while maintaining comprehensive test coverage and clear organization by feature area.

Import In IDE

🤖 Prompt for AI Agents

## Observations

The `file:web-ui/__tests__/components/DiscoveryProgress.test.tsx` file contains 2992 lines organized into 7 distinct test suites covering different features of the DiscoveryProgress component. The file uses Jest with React Testing Library, follows TDD principles, and includes comprehensive mocks for APIs, WebSocket, and child components. The test suites are logically separated by feature areas (core functionality, answer UI, progress tracking, PRD generation, WebSocket handling, error recovery, and advanced UI features), making them natural candidates for splitting into separate files.

## Approach

The refactoring will split the monolithic test file into 7 focused test files, each corresponding to a logical feature area. This approach maintains test isolation, preserves all existing test coverage, and improves maintainability by creating smaller, more manageable test files. A shared test utilities file will be created to extract common mocks, setup functions, and test data, reducing duplication across the split files. The file naming convention will follow the pattern `DiscoveryProgress.[feature].test.tsx` to maintain clear association with the component being tested.

## Implementation Steps

### 1. Create Shared Test Utilities File

Create `file:web-ui/__tests__/components/DiscoveryProgress.testutils.tsx` to contain:

- **Common Imports**: All shared testing library imports (`@testing-library/react`, `@testing-library/jest-dom`, etc.)
- **Mock Definitions**: Centralized mock implementations for:
  - `@hugeicons/react` icons
  - `projectsApi` (getDiscoveryProgress, startDiscovery, submitAnswer, restartDiscovery, retryPrdGeneration)
  - WebSocket client (`getWebSocketClient`)
  - `authFetch` utility
  - `ProgressBar` and `PhaseIndicator` components
- **Mock Setup Functions**: Reusable functions like `setupDefaultMocks()`, `setupWebSocketMock()`, `setupApiMocks()`
- **Test Data Fixtures**: Common test data objects (mock project data, discovery states, questions, etc.)
- **Helper Functions**: Utility functions for common test operations (e.g., `waitForDiscoveryState()`, `simulateWebSocketMessage()`)

### 2. Split Core Functionality Tests

Create `file:web-ui/__tests__/components/DiscoveryProgress.core.test.tsx` containing lines 99-728:

- **Test Suites**:
  - Data fetching and error handling
  - Loading states
  - Phase display (discovery/planning/active/review/complete)
  - Discovery states (discovering/completed/idle)
  - ProgressBar integration
  - Question display and counters
  - Start Discovery button functionality
  - Auto-refresh logic (10s intervals)
  - Accessibility (ARIA labels)
  - Responsive design
- **Setup**: Import shared utilities from `DiscoveryProgress.testutils.tsx`
- **beforeEach/afterEach**: Mock clearing, fake timers setup, WebSocket cleanup

### 3. Split Answer UI Tests

Create `file:web-ui/__tests__/components/DiscoveryProgress.answer.test.tsx` containing lines 781-1411:

- **Test Suites** (Feature 012 TDD tests):
  - Answer textarea attributes and validation (US1)
  - Character counter with color thresholds (US2)
  - Submit button enable/disable logic (US3)
  - Ctrl+Enter keyboard shortcut (US4)
  - Success messages with auto-dismiss (US6)
  - Error handling (validation errors, API failures, network errors) (US7)
- **Setup**: Import shared utilities and mock setup functions
- **Focus**: User interaction with the answer submission interface

### 4. Split Progress & State Tests

Create `file:web-ui/__tests__/components/DiscoveryProgress.progress.test.tsx` containing lines 1417-1923:

- **Test Suites**:
  - Progress bar updates after answer submission (US8)
  - Question counter updates
  - Next question display and transitions (US9)
  - Smooth transition animations
  - Discovery completion flow (last question → planning phase) (US10)
  - UI cleanup on completion
- **Setup**: Import shared utilities and progress-specific test data
- **Focus**: State transitions and progress tracking

### 5. Split PRD Generation Tests

Create `file:web-ui/__tests__/components/DiscoveryProgress.prd.test.tsx` containing lines 1929-2145:

- **Test Suites**:
  - View PRD button display and functionality
  - Minimize/expand functionality
  - Task creation indicators
  - WebSocket-driven PRD progress tracking
  - PRD generation states (started/progress/completed/failed)
- **Setup**: Import shared utilities and PRD-specific mocks
- **Focus**: Post-discovery PRD generation UI and tracking

### 6. Split WebSocket Tests

Create `file:web-ui/__tests__/components/DiscoveryProgress.websocket.test.tsx` containing lines 2151-2454:

- **Test Suites**:
  - WebSocket message handler verification
  - Discovery event handling (discovery_starting, discovery_reset, question_ready)
  - PRD generation event handling (prd_generation_started, prd_generation_progress, prd_generation_completed, prd_generation_failed)
  - Project ID filtering (ignore messages for other projects)
  - WebSocket connection lifecycle
- **Setup**: Import shared utilities and WebSocket mock helpers
- **Focus**: Real-time communication and event handling

### 7. Split Error & Recovery Tests

Create `file:web-ui/__tests__/components/DiscoveryProgress.error.test.tsx` containing lines 2460-2780:

- **Test Suites**:
  - Stuck state detection (30s timeout)
  - Restart discovery button and functionality
  - `restartDiscovery` API call handling
  - PRD retry flows
  - `retryPrdGeneration` API call handling
  - Error state display and recovery
- **Setup**: Import shared utilities and error scenario mocks
- **Focus**: Error handling and recovery mechanisms

### 8. Split Advanced UI Tests

Create `file:web-ui/__tests__/components/DiscoveryProgress.advanced.test.tsx` containing lines 2784-2992:

- **Test Suites**:
  - Minimized view functionality
  - Auto-minimize after 3 seconds
  - Expand/minimize button interactions
  - Next phase indicators
  - Duplicate submission prevention
  - Advanced UI interactions
- **Setup**: Import shared utilities and UI-specific test helpers
- **Focus**: Advanced UI features and edge cases

### 9. Update Test Configuration

No changes needed to `file:web-ui/jest.config.js` as Jest will automatically discover all `*.test.tsx` files. The coverage threshold for `file:web-ui/src/components/DiscoveryProgress.tsx` (65% for branches, functions, lines, statements) will continue to apply across all split test files.

### 10. Verification Steps

After splitting the files:

1. **Run all tests**: Execute `npm test` to ensure all tests pass
2. **Verify coverage**: Run `npm run test:coverage` to confirm coverage thresholds are still met for `DiscoveryProgress.tsx`
3. **Check test count**: Verify the total number of test cases matches the original file
4. **Validate imports**: Ensure all shared utilities are properly imported in each split file
5. **Review test isolation**: Confirm each test file can run independently without dependencies on other split files

### 11. Documentation Update

Update `file:TESTING.md` or create a comment in the original test file location explaining:
- The test file has been split into multiple focused files
- List all the new test files and their purposes
- Reference the shared utilities file
- Explain the naming convention used

## File Organization Summary

```
web-ui/__tests__/components/
├── DiscoveryProgress.testutils.tsx       (Shared utilities, mocks, fixtures)
├── DiscoveryProgress.core.test.tsx       (~630 lines - Core functionality)
├── DiscoveryProgress.answer.test.tsx     (~630 lines - Answer UI)
├── DiscoveryProgress.progress.test.tsx   (~506 lines - Progress tracking)
├── DiscoveryProgress.prd.test.tsx        (~216 lines - PRD generation)
├── DiscoveryProgress.websocket.test.tsx  (~303 lines - WebSocket handling)
├── DiscoveryProgress.error.test.tsx      (~320 lines - Error recovery)
└── DiscoveryProgress.advanced.test.tsx   (~208 lines - Advanced UI)
```

Each file will be under 700 lines, making them easily parsable by AI agents while maintaining comprehensive test coverage and clear organization by feature area.

---

Execution Information

Branch: main
Commit: 3876f8d

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.