refactor: Consolidate web-ui test files to __tests__/ directory - #187
Conversation
Migrate all test files from src/ to __tests__/ for single source of truth: - Merge AgentCard tests (28 comprehensive + 3 navigation tests) - Move component tests: DiscoveryProgress, PhaseIndicator, ProgressBar, ProjectCreationForm, Spinner, PRDModal, TaskTreeView - Move lib tests: api.test.ts - Remove duplicate HomePage/ProjectList tests (kept in __tests__/) - Update imports to use @/ alias pattern - Delete all test files from src/ Result: 50 test suites, 1300 tests (was 1546 with duplicates)
WalkthroughThis PR reorganizes and consolidates test files across the web-ui project. It expands the AgentCard test suite with comprehensive coverage for display, status, task management, and edge cases; migrates multiple test files to use path aliases ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Code Review: Test Consolidation to
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
web-ui/__tests__/components/AgentCard.test.tsx (2)
63-77: Consider updating comments to match theme-based styling.The test comments reference literal colors ("green for idle", "yellow for busy", "red for blocked"), but the assertions verify theme tokens (
bg-secondary,bg-primary/20,bg-destructive/10). While semantically equivalent in the default theme, this could be misleading if the theme changes.Consider updating comments to reflect the actual theme tokens being tested, e.g., "should apply secondary styling for idle status".
329-348: Test may produce false positives due to DOM accumulation.The
forEachloop callsrender()multiple times without cleanup between iterations. RTL'srenderappends to the DOM, so by the third iteration, there are three components rendered. ThequerySelector('.animate-pulse')finds the first match, potentially masking failures in later statuses.Consider using
test.eachfor proper test isolation:🔎 Proposed fix using test.each
- describe('Status Indicator', () => { - it('should show animated pulse dot for all statuses', () => { - const statuses: Array<'idle' | 'busy' | 'blocked'> = ['idle', 'busy', 'blocked']; - - statuses.forEach((status) => { - const agent: Agent = { - id: `agent-${status}`, - type: 'backend', - status, - tasksCompleted: 0, - }; - - const { container } = render(<AgentCard agent={agent} />); - - const dot = container.querySelector('.animate-pulse'); - expect(dot).toBeInTheDocument(); - expect(dot).toHaveClass('w-3', 'h-3', 'rounded-full'); - }); - }); - }); + describe('Status Indicator', () => { + it.each<'idle' | 'busy' | 'blocked'>(['idle', 'busy', 'blocked'])( + 'should show animated pulse dot for %s status', + (status) => { + const agent: Agent = { + id: `agent-${status}`, + type: 'backend', + status, + tasksCompleted: 0, + }; + + const { container } = render(<AgentCard agent={agent} />); + + const dot = container.querySelector('.animate-pulse'); + expect(dot).toBeInTheDocument(); + expect(dot).toHaveClass('w-3', 'h-3', 'rounded-full'); + } + ); + });
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
web-ui/__tests__/components/AgentCard.test.tsxweb-ui/__tests__/components/DiscoveryProgress.test.tsxweb-ui/__tests__/components/PRDModal.test.tsxweb-ui/__tests__/components/PhaseIndicator.test.tsxweb-ui/__tests__/components/ProgressBar.test.tsxweb-ui/__tests__/components/ProjectCreationForm.test.tsxweb-ui/__tests__/components/Spinner.test.tsxweb-ui/__tests__/components/TaskTreeView.test.tsxweb-ui/__tests__/lib/api.test.tsweb-ui/src/app/__tests__/page.test.tsxweb-ui/src/components/AgentCard.test.tsxweb-ui/src/components/__tests__/ProjectList.test.tsx
💤 Files with no reviewable changes (3)
- web-ui/src/components/tests/ProjectList.test.tsx
- web-ui/src/app/tests/page.test.tsx
- web-ui/src/components/AgentCard.test.tsx
🧰 Additional context used
🧠 Learnings (17)
📓 Common learnings
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: docs/CLAUDE.md:0-0
Timestamp: 2025-11-25T19:08:37.203Z
Learning: Applies to docs/web-ui/**/__tests__/**/*.test.{ts,tsx} : Create JavaScript test files colocated or in __tests__/ as *.test.ts
📚 Learning: 2025-11-25T19:08:37.203Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: docs/CLAUDE.md:0-0
Timestamp: 2025-11-25T19:08:37.203Z
Learning: Applies to docs/web-ui/**/__tests__/**/*.test.{ts,tsx} : Create JavaScript test files colocated or in __tests__/ as *.test.ts
Applied to files:
web-ui/__tests__/components/ProgressBar.test.tsxweb-ui/__tests__/components/ProjectCreationForm.test.tsxweb-ui/__tests__/components/TaskTreeView.test.tsxweb-ui/__tests__/components/Spinner.test.tsxweb-ui/__tests__/components/DiscoveryProgress.test.tsxweb-ui/__tests__/lib/api.test.tsweb-ui/__tests__/components/PhaseIndicator.test.tsxweb-ui/__tests__/components/PRDModal.test.tsxweb-ui/__tests__/components/AgentCard.test.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/**/*.{ts,tsx} : Use TypeScript 5.3+ for frontend development with React 18, Next.js 14, Tailwind CSS, and Hugeicons for icons
Applied to files:
web-ui/__tests__/components/ProjectCreationForm.test.tsxweb-ui/__tests__/components/Spinner.test.tsxweb-ui/__tests__/components/DiscoveryProgress.test.tsxweb-ui/__tests__/lib/api.test.tsweb-ui/__tests__/components/PhaseIndicator.test.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/**/*.{ts,tsx} : Use TypeScript strict mode and ensure 100% type safety with no hardcoded types or any usage in frontend code
Applied to files:
web-ui/__tests__/components/ProjectCreationForm.test.tsxweb-ui/__tests__/components/PhaseIndicator.test.tsx
📚 Learning: 2025-11-25T19:08:37.203Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: docs/CLAUDE.md:0-0
Timestamp: 2025-11-25T19:08:37.203Z
Learning: Applies to docs/web-ui/src/components/**/*.{ts,tsx} : Use PascalCase for React component names
Applied to files:
web-ui/__tests__/components/ProjectCreationForm.test.tsxweb-ui/__tests__/components/PhaseIndicator.test.tsx
📚 Learning: 2025-11-25T19:08:54.154Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T19:08:54.154Z
Learning: Applies to specs/*/tasks.md : Feature task files (tasks.md) must include phase-by-phase task breakdown with unique task identifiers (T001, T002, etc.), acceptance criteria per task, beads issue references, and estimated effort
Applied to files:
web-ui/__tests__/components/TaskTreeView.test.tsx
📚 Learning: 2025-11-25T19:08:37.203Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: docs/CLAUDE.md:0-0
Timestamp: 2025-11-25T19:08:37.203Z
Learning: Applies to docs/web-ui/**/*.{ts,tsx} : Use Next.js 14 with React 18 App Router for the frontend
Applied to files:
web-ui/__tests__/components/Spinner.test.tsx
📚 Learning: 2025-11-25T19:08:37.203Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: docs/CLAUDE.md:0-0
Timestamp: 2025-11-25T19:08:37.203Z
Learning: Applies to docs/web-ui/src/**/*.{ts,tsx} : Use Tailwind utility classes for styling instead of CSS modules
Applied to files:
web-ui/__tests__/components/Spinner.test.tsxweb-ui/__tests__/components/DiscoveryProgress.test.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/**/*.tsx : Replace all icon usage with Hugeicons (hugeicons/react) and do not mix with lucide-react
Applied to files:
web-ui/__tests__/components/Spinner.test.tsxweb-ui/__tests__/components/DiscoveryProgress.test.tsx
📚 Learning: 2025-11-25T19:08:37.203Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: docs/CLAUDE.md:0-0
Timestamp: 2025-11-25T19:08:37.203Z
Learning: Applies to docs/web-ui/src/components/**/*.{ts,tsx} : Use functional React components with TypeScript interfaces
Applied to files:
web-ui/__tests__/components/Spinner.test.tsxweb-ui/__tests__/components/DiscoveryProgress.test.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/app/page.tsx : Implement automatic project discovery start after project creation with loading state transitions and 'Start Discovery' button for idle projects
Applied to files:
web-ui/__tests__/components/DiscoveryProgress.test.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/lib/**/*.ts : Frontend API files must use const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080' pattern without hardcoded production URLs or different fallback ports
Applied to files:
web-ui/__tests__/lib/api.test.ts
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to tests/e2e/**/*.ts : Implement E2E tests using Playwright + TestSprite with loginUser() helper from tests/e2e/test-utils.ts for authentication
Applied to files:
web-ui/__tests__/lib/api.test.ts
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/reducers/agentReducer.ts : Use Context + Reducer pattern for multi-agent support handling up to 10 concurrent agents with independent state tracking and timestamp conflict resolution using last-write-wins
Applied to files:
web-ui/__tests__/components/AgentCard.test.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/contexts/AgentStateContext.ts : Use context-based state management with React Context + useReducer pattern for Dashboard with AgentStateContext, agentReducer, and useAgentState hook
Applied to files:
web-ui/__tests__/components/AgentCard.test.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/components/Dashboard.tsx : Use React.memo on all Dashboard sub-components and useMemo for derived state to optimize performance with multi-agent support
Applied to files:
web-ui/__tests__/components/AgentCard.test.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/components/AgentStateProvider.tsx : Wrap AgentStateProvider with ErrorBoundary component for graceful error handling in Dashboard
Applied to files:
web-ui/__tests__/components/AgentCard.test.tsx
🧬 Code graph analysis (1)
web-ui/__tests__/components/AgentCard.test.tsx (2)
web-ui/src/components/ErrorBoundary.tsx (1)
render(63-118)web-ui/src/components/AgentCard.tsx (1)
AgentCard(212-226)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Backend Unit Tests
- GitHub Check: Frontend Unit Tests
- GitHub Check: claude-review
- GitHub Check: E2E Smoke Tests (Chromium)
🔇 Additional comments (15)
web-ui/__tests__/components/PhaseIndicator.test.tsx (1)
3-3: LGTM! Clean migration to consolidated test directory.The migration comment clearly documents the source location, and the import path has been correctly updated to use the
@/alias pattern.Also applies to: 7-7
web-ui/__tests__/lib/api.test.ts (1)
4-4: LGTM! Import path correctly updated for lib module.The migration header and alias import path are both correctly applied, maintaining consistency with the broader test consolidation effort.
Also applies to: 44-44
web-ui/__tests__/components/ProgressBar.test.tsx (1)
3-3: LGTM! Migration executed correctly.The header comment and import alias are both properly updated, consistent with the test consolidation pattern across the PR.
Also applies to: 7-7
web-ui/__tests__/components/Spinner.test.tsx (1)
4-4: LGTM! Named import properly migrated.Both the migration header and the alias import (with named export) are correctly applied.
Also applies to: 9-9
web-ui/__tests__/components/PRDModal.test.tsx (1)
3-3: LGTM! Final test file migration looks good.The migration documentation and import path update are both correct, completing the consistent pattern across all test files in this PR.
Also applies to: 8-8
web-ui/__tests__/components/ProjectCreationForm.test.tsx (1)
4-4: LGTM! Clean migration with improved mocking.The import path has been correctly updated to use the
@/alias, and the enhanced axios mock with interceptor support makes the tests more realistic and robust.Also applies to: 10-10, 16-42
web-ui/__tests__/components/TaskTreeView.test.tsx (1)
3-3: LGTM! Clean import path migration.All imports and mock paths have been correctly updated to use the
@/alias pattern, maintaining consistency with the project's module resolution strategy.Also applies to: 8-12
web-ui/__tests__/components/DiscoveryProgress.test.tsx (1)
3-3: LGTM! Clean migration with consistent import paths.All imports and mock paths have been successfully updated to use the
@/alias pattern. The comprehensive test suite logic remains intact, ensuring continued coverage for this critical component.Also applies to: 7-7, 36-51
web-ui/__tests__/components/AgentCard.test.tsx (7)
1-18: LGTM - Well-structured test setup.Good consolidation with clear provenance comments. The
beforeEachmock reset ensures test isolation. Import using@/alias aligns with the PR objectives.
20-61: LGTM - Good display coverage.Tests verify the core rendering of agent ID, formatted type name, and task counter with clear assertions.
112-155: LGTM - Proper conditional rendering tests.Good use of
queryByTextfor asserting element absence. Tests correctly verify task display logic across all three status states.
157-200: LGTM - Comprehensive blocked status tests.Tests cover single task blocking, multiple tasks with count display, and absence of blocked section when not applicable.
202-262: LGTM - Complete badge type coverage.Tests all documented agent types plus the fallback for unknown types, verifying both styling classes and icon emojis.
264-327: LGTM - Thorough click interaction tests.Good coverage of callback invocation, optional callback handling, and cursor styling. The two tests without
onAgentClick(lines 282-295 and 313-326) test complementary aspects: exception safety vs. DOM presence with cursor class.
350-439: LGTM - Solid responsive and edge case coverage.Tests appropriately verify responsive styling classes, truncation behavior with title attribute for accessibility, and boundary conditions including zero/large values and undefined/empty states.
2 participants
Migrate all test files from src/ to tests/ for single source of truth:
ProjectCreationForm, Spinner, PRDModal, TaskTreeView
Result: 50 test suites, 1300 tests (was 1546 with duplicates)
Summary by CodeRabbit
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.