[TEST] UI Test Suite Fixes - 136 Failing Tests

[JoshuaAFerguson]

Problem

The UI test suite has 136 failing tests out of 201 total (32% passing rate), with 43 uncaught exceptions.

This indicates widespread issues with:

• Component imports (e.g., Cloud component not imported)
• Test environment setup
• Mock data
• Component rendering

Current Status

• Total Tests: 201
• Passing: 65 (32%)
• Failing: 136 (68%)
• Uncaught Exceptions: 43
• Overall Coverage: ~32%

Test File Status

Test File	Status	Issue
SessionCard.test.tsx	❌ FAILING	Unknown
SecuritySettings.test.tsx	❌ FAILING	Unknown
admin/APIKeys.test.tsx	❌ FAILING	Unknown
admin/AuditLogs.test.tsx	❌ FAILING	Unknown
admin/Controllers.test.tsx	❌ FAILING	Missing Cloud import
admin/License.test.tsx	❌ FAILING	Unknown
admin/Monitoring.test.tsx	❌ FAILING	Unknown
admin/Recordings.test.tsx	❌ FAILING	Unknown
admin/Settings.test.tsx	❌ FAILING	Unknown

Critical Error Example

Controllers.test.tsx:

ReferenceError: Cloud is not defined
src/pages/admin/Controllers.tsx:389:20

<Cloud sx={{ fontSize: 48, opacity: 0.3 }} />

Root Cause: Missing import statement for Cloud icon from Material-UI

This pattern likely exists in other test files as well.

---

Tasks

Phase 1: Fix Existing Tests (P0)

Goal: Get all 201 tests passing

Tasks:

1. Fix Import Errors:

   • Identify all missing imports (Cloud, etc.)
   • Add proper import statements
   • Verify all Material-UI icons imported
   • Check for missing component imports

2. Fix Test Environment Setup:

   • Review vitest configuration
   • Ensure proper test setup file
   • Verify mock providers (Router, Theme, etc.)
   • Fix any global setup issues

3. Fix Mock Data:

   • Review API mocking (MSW or similar)
   • Ensure proper test data fixtures
   • Fix async data loading in tests
   • Verify WebSocket mocking

4. Fix Component Rendering:

   • Identify components failing to render
   • Fix prop validation errors
   • Ensure proper context providers
   • Fix state management in tests

5. Fix Uncaught Exceptions:

   • Identify all 43 exception sources
   • Add proper error boundaries in tests
   • Fix async errors (Promise rejections)
   • Add timeout handling

---

Phase 2: Add Tests for New v2.0 Features (P1)

Goal: Test new admin pages and features

New Components Requiring Tests:

1. Admin Agents Page (NEW in v2.0):

   • Agent list rendering
   • Agent status indicators
   • Real-time status updates (WebSocket)
   • Agent filtering (online/offline)
   • Agent details view

2. Session VNC Viewer (NEW in v2.0):

   • VNC connection establishment
   • WebSocket connection
   • Canvas rendering
   • Input handling (keyboard, mouse)
   • Connection error handling
   • Disconnection handling

3. Updated Session Management:

   • Hibernate action
   • Wake action
   • Agent assignment display
   • VNC access button

4. Real-time Updates:

   • WebSocket connection handling
   • Session status updates
   • Agent status updates
   • UI refresh on updates

---

Phase 3: Increase Coverage (P2)

Goal: Achieve 60%+ UI coverage

Areas Needing More Tests:

1. Component Interactions:

   • Button clicks
   • Form submissions
   • Dialog interactions
   • Table sorting/filtering
   • Search functionality

2. State Management:

   • Context updates
   • Redux/state changes
   • Local component state
   • Effect hooks

3. Error Handling:

   • API errors
   • Network failures
   • Validation errors
   • Error boundaries

4. Edge Cases:

   • Empty states
   • Loading states
   • Error states
   • Permission denied states

---

Test Infrastructure Requirements

Dependencies Check

{
  "@testing-library/react": "^14.0.0",
  "@testing-library/user-event": "^14.0.0",
  "vitest": "^1.0.0",
  "@vitest/ui": "^1.0.0",
  "happy-dom": "^12.0.0"
}

Mock Setup

// Mock API responses
vi.mock('../api/client', () => ({
  fetchAgents: vi.fn(),
  fetchSessions: vi.fn(),
  // ...
}));

// Mock WebSocket
global.WebSocket = vi.fn(() => ({
  send: vi.fn(),
  close: vi.fn(),
  addEventListener: vi.fn(),
}));

// Mock Router
import { MemoryRouter } from 'react-router-dom';

Test Utilities

• Component render helpers
• Mock data factories
• WebSocket test client
• API mock helpers

---

Deliverables

1. Fixed Test Files:

   • All 9 existing test files passing
   • Import errors resolved
   • Mock setup corrected
   • Environment issues fixed

2. New Test Files:

   • pages/admin/Agents.test.tsx (new)
   • components/SessionVNCViewer.test.tsx (new)
   • Additional component tests (10+ files)

3. Coverage Report:

   • Target: 60%+ overall coverage
   • All pages: 50%+ minimum
   • Critical components: 70%+

4. Test Documentation:

   • Test execution guide
   • Mock setup guide
   • Troubleshooting guide

---

Success Criteria

• ✅ All 201 tests passing (0 failures)
• ✅ 60%+ overall UI coverage
• ✅ New v2.0 pages fully tested
• ✅ WebSocket integration tested
• ✅ Real-time updates validated
• ✅ 100+ new test cases added

---

References

• Test Files: ui/src/**/*.test.tsx
• Test Coverage Analysis: .claude/reports/TEST_COVERAGE_ANALYSIS_2025-11-23.md
• Vitest Config: ui/vitest.config.ts

---

Estimated Effort

3-4 days (24-32 hours)

• Fix existing tests: 12-16 hours
• New v2.0 tests: 8-12 hours
• Coverage improvements: 4-8 hours

---

Acceptance Criteria

1. All 201 existing tests passing
2. No uncaught exceptions
3. New admin pages tested
4. 60%+ coverage achieved
5. WebSocket flows validated
6. CI/CD pipeline integration

[JoshuaAFerguson]

Update — April 2026. Most of the failures the original report cites have been resolved:

• tsc --noEmit error count went from 609 → 86 in fix(ui): wire vitest setup file (drops 507 of 609 type errors) #254 by wiring the existing src/test/setup.ts (which extends Vitest with jest-dom matchers) into vite.config.ts. The 525-error delta was almost entirely 'toBeInTheDocument' does not exist on type 'Assertion<HTMLElement>' — a single config bug, not 525 separate test bugs.
• The @types/node reference in tsconfig.json resolved the global.IntersectionObserver = … mock declarations.

Remaining: ~86 type errors in production-code paths (Dashboard.tsx, AuditLogs.tsx, UserSettings.tsx, Compliance.tsx, SessionCard.test.tsx mock-shape drift). These are real per-file fixes, not config issues.

Recommend retitling this to [TEST] UI type errors in admin pages and SessionCard mocks (~86) or closing this and opening a fresh, narrower one.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity.

Action Required:

• If this issue is still relevant, please add a comment to keep it open
• If this is blocked, add the status:blocked label
• If this is no longer needed, it will be closed in 7 days

[github-actions]

This issue was automatically closed due to inactivity.

If you believe this was closed in error, please reopen it with a comment explaining why it should remain open.