# Frontend Coverage Gap Analysis and Test Plan

**Date**: 2026-01-25
**Goal**: Achieve 85.5%+ frontend test coverage (CI-safe buffer over 85% threshold)
**Current Status**: 85.06% (local) / 84.99% (CI)

---

## Executive Summary

**Coverage Gap**: 0.44% below target (85.5%)
**Required**: ~50-75 additional lines of coverage
**Strategy**: Target 4 high-impact files with strategic test additions
**Timeline**: 2-3 hours for implementation
**Risk**: LOW - Clear test patterns established, straightforward implementations

---

## Coverage Analysis

### Current Metrics (v8 Coverage Provider)

| Metric     | Percentage | Status |
|------------|------------|--------|
| Lines      | 85.75%     | ✅ Pass (85% threshold) |
| Statements | 85.06%     | ✅ Pass |
| Branches   | 78.23%     | ⚠️  Below ideal (80%+) |
| Functions  | 79.25%     | ⚠️  Below ideal (80%+) |

### CI Variance Analysis

- **Local**: 85.06% statements
- **CI**: 84.99% statements
- **Variance**: -0.07% (7 basis points)
- **Root Cause**: Timing/concurrency differences in CI environment
- **Mitigation**: Target 85.5% (50bp buffer) to ensure CI passes consistently

---

## Target Files (Ranked by Impact)

### 1. **Plugins.tsx** - HIGHEST PRIORITY ⚡

**Current Coverage**: 58.18% lines (lowest in codebase)
**File Size**: 391 lines
**Uncovered Lines**: ~163 lines
**Potential Gain**: +1.2% total coverage

**Why Target This File**:
- Lowest coverage in entire codebase (58%)
- Well-structured, testable component
- Clear user flows and state management
- Existing patterns for similar pages (ProxyHosts.tsx @ 94.46%)

**Uncovered Code Paths**:
1. ✘ Plugin toggle logic (enable/disable)
2. ✘ Reload plugins flow
3. ✘ Error handling branches
4. ✘ Metadata modal open/close
5. ✘ Status badge rendering logic (switch cases)
6. ✘ Built-in vs external plugin separation
7. ✘ Empty state rendering
8. ✘ Plugin grouping and filtering
9. ✘ Documentation URL handling
10. ✘ Modal metadata display

**Testing Complexity**: MEDIUM
**Expected Coverage After Tests**: 85-90%

---

### 2. **Tabs.tsx** - QUICK WIN 🎯

**Current Coverage**: 70% lines, 0% branches (!)
**File Size**: 59 lines
**Uncovered Lines**: ~18 lines
**Potential Gain**: +0.15% total coverage

**Why Target This File**:
- **CRITICAL**: 0% branch coverage despite being a UI primitive
- Small file = fast implementation
- Simple component with clear test patterns
- Used throughout app (high importance)
- Low-hanging fruit for immediate gains

**Uncovered Code Paths**:
1. ✘ TabsList rendering and className merging
2. ✘ TabsTrigger active/inactive states
3. ✘ TabsContent mount/unmount
4. ✘ Keyboard navigation (focus-visible states)
5. ✘ Disabled state handling
6. ✘ Custom className application

**Testing Complexity**: LOW
**Expected Coverage After Tests**: 95-100%

---

### 3. **Uptime.tsx** - HIGH IMPACT 📊

**Current Coverage**: 65.04% lines
**File Size**: 575 lines
**Uncovered Lines**: ~201 lines
**Potential Gain**: +1.5% total coverage

**Why Target This File**:
- Second-lowest page coverage
- Complex component with multiple sub-components
- Heavy mutation/query usage (good test patterns exist)
- Critical monitoring feature

**Uncovered Code Paths**:
1. ✘ MonitorCard status badge logic
2. ✘ Menu dropdown interactions
3. ✘ Monitor editing flow
4. ✘ Monitor deletion with confirmation
5. ✘ Health check trigger
6. ✘ Monitor creation form submission
7. ✘ History chart rendering
8. ✘ Empty state handling
9. ✘ Sync monitors flow
10. ✘ Error states and toast notifications

**Testing Complexity**: HIGH (multiple mutations, nested components)
**Expected Coverage After Tests**: 80-85%

---

### 4. **SecurityHeaders.tsx** - MEDIUM IMPACT 🛡️

**Current Coverage**: 64.61% lines
**File Size**: 339 lines
**Uncovered Lines**: ~120 lines
**Potential Gain**: +0.9% total coverage

**Why Target This File**:
- Third-lowest page coverage
- Critical security feature
- Complex CRUD operations
- Good reference: AuditLogs.tsx @ 84.37%

**Uncovered Code Paths**:
1. ✘ Profile creation form
2. ✘ Profile update flow
3. ✘ Delete with backup
4. ✘ Clone profile logic
5. ✘ Preset tooltip rendering
6. ✘ Profile grouping (custom vs presets)
7. ✘ Empty state for custom profiles
8. ✘ Built-in preset rendering loops
9. ✘ Dialog state management

**Testing Complexity**: MEDIUM
**Expected Coverage After Tests**: 78-82%

---

## Implementation Strategy

### Phase 1: Quick Wins (Target: +0.2%)

**Priority**: IMMEDIATE
**Files**: Tabs.tsx
**Estimated Time**: 30 minutes
**Expected Gain**: 0.15-0.2%

#### Test File: `frontend/src/components/ui/__tests__/Tabs.test.tsx`

**Test Cases**:
1. ✅ Tabs renders with default props
2. ✅ TabsList applies custom className
3. ✅ TabsTrigger renders active state
4. ✅ TabsTrigger renders inactive state
5. ✅ TabsTrigger handles disabled state
6. ✅ TabsContent shows when tab is active
7. ✅ TabsContent hides when tab is inactive
8. ✅ Focus states work correctly
9. ✅ Keyboard navigation (Tab, Arrow keys)
10. ✅ Custom props pass through

---

### Phase 2: High Impact (Target: +1.5%)

**Priority**: HIGH
**Files**: Plugins.tsx
**Estimated Time**: 1.5 hours
**Expected Gain**: 1.2-1.5%

#### Test File: `frontend/src/pages/__tests__/Plugins.test.tsx`

**Test Suites**:

##### Suite 1: Component Rendering (10 tests)
1. ✅ Renders loading state with skeletons
2. ✅ Renders empty state when no plugins
3. ✅ Renders built-in plugins section
4. ✅ Renders external plugins section
5. ✅ Displays plugin metadata correctly
6. ✅ Shows status badges (loaded, error, pending, disabled)
7. ✅ Renders header with reload button
8. ✅ Displays info alert
9. ✅ Groups plugins by type (built-in vs external)
10. ✅ Renders documentation links when available

##### Suite 2: Plugin Toggle Logic (8 tests)
1. ✅ Enables disabled plugin
2. ✅ Disables enabled plugin
3. ✅ Prevents toggling built-in plugins
4. ✅ Shows error toast for built-in toggle attempt
5. ✅ Shows success toast on enable
6. ✅ Shows success toast on disable
7. ✅ Shows error toast on toggle failure
8. ✅ Refetches plugins after toggle

##### Suite 3: Reload Plugins (5 tests)
1. ✅ Triggers reload mutation
2. ✅ Shows loading state during reload
3. ✅ Shows success toast with count
4. ✅ Shows error toast on failure
5. ✅ Refetches plugins after reload

##### Suite 4: Metadata Modal (7 tests)
1. ✅ Opens metadata modal on "Details" click
2. ✅ Closes metadata modal on close button
3. ✅ Displays all plugin metadata fields
4. ✅ Shows version when available
5. ✅ Shows author when available
6. ✅ Renders documentation link in modal
7. ✅ Shows error details when plugin has errors

##### Suite 5: Status Badge Rendering (4 tests)
1. ✅ Shows "Disabled" badge for disabled plugins
2. ✅ Shows "Loaded" badge for loaded plugins
3. ✅ Shows "Error" badge for error state
4. ✅ Shows "Pending" badge for pending state

---

### Phase 3: Additional Coverage (Target: +1.0%)

**Priority**: MEDIUM
**Files**: SecurityHeaders.tsx
**Estimated Time**: 1 hour
**Expected Gain**: 0.8-1.0%

#### Test File: `frontend/src/pages/__tests__/SecurityHeaders.test.tsx`

**Test Cases** (15 critical paths):
1. ✅ Renders loading state
2. ✅ Renders preset profiles
3. ✅ Renders custom profiles
4. ✅ Opens create profile dialog
5. ✅ Creates new profile
6. ✅ Opens edit dialog
7. ✅ Updates existing profile
8. ✅ Opens delete confirmation
9. ✅ Deletes profile with backup
10. ✅ Clones profile with "(Copy)" suffix
11. ✅ Displays security scores
12. ✅ Shows preset tooltips
13. ✅ Groups profiles correctly
14. ✅ Error handling for mutations
15. ✅ Empty state rendering

---

## Test Implementation Guide

### Technology Stack

- **Test Runner**: Vitest
- **Testing Library**: React Testing Library
- **Mocking**: Vitest vi.mock
- **Query Client**: @tanstack/react-query (with test wrapper)
- **Assertions**: @testing-library/jest-dom matchers

### Example Test Patterns

See the plan document for full code examples of:
1. Component Test Setup (Tabs.tsx example)
2. Page Component Test Setup (Plugins.tsx example)
3. Testing Hooks (Reference pattern)

---

## Expected Outcomes & Validation

### Coverage Targets Post-Implementation

| Phase | Files Tested | Expected Line Coverage | Expected Gain | Cumulative |
|-------|--------------|------------------------|---------------|------------|
| Baseline | - | 85.06% | - | 85.06% |
| Phase 1 | Tabs.tsx | 95-100% | +0.15% | 85.21% |
| Phase 2 | Plugins.tsx | 85-90% | +1.2% | 86.41% |
| Phase 3 | SecurityHeaders.tsx | 78-82% | +0.5% | 86.91% |
| **TOTAL** | **3 files** | **-** | **+1.85%** | **~86.9%** |

### Success Criteria

✅ **Primary Goal**: CI Coverage ≥ 85.0%
✅ **Stretch Goal**: CI Coverage ≥ 85.5% (buffer for variance)
✅ **Quality Goal**: All new tests follow established patterns
✅ **Maintenance Goal**: Tests are maintainable and descriptive

### CI Validation Process

1. **Local Verification**:
   ```bash
   cd frontend && npm run test:coverage
   # Verify: "All files" line shows ≥ 85.5%
   ```

2. **Pre-Push Check**:
   ```bash
   cd frontend && npm test
   # All tests must pass
   ```

3. **CI Pipeline**:
   - Frontend unit tests run automatically
   - Codecov reports coverage delta
   - CI fails if coverage drops below 85%

---

## Implementation Timeline

### Day 1: Quick Wins + Setup (2 hours)

**Morning** (1 hour):
- [ ] Implement Tabs.tsx tests (all 10 test cases)
- [ ] Run coverage locally: `npm run test:coverage`
- [ ] Verify Phase 1 gain: +0.15-0.2%
- [ ] Commit: "test: add comprehensive tests for Tabs component"

**Afternoon** (1 hour):
- [ ] Set up Plugins.tsx test file structure
- [ ] Implement Suite 1: Component Rendering (10 tests)
- [ ] Implement Suite 2: Plugin Toggle Logic (8 tests)
- [ ] Verify tests pass: `npm test Plugins.test.tsx`

### Day 2: High Impact Files (3 hours)

**Morning** (1.5 hours):
- [ ] Complete Plugins.tsx remaining suites:
  - Suite 3: Reload Plugins (5 tests)
  - Suite 4: Metadata Modal (7 tests)
  - Suite 5: Status Badge Rendering (4 tests)
- [ ] Run coverage: should be ~86.2%
- [ ] Commit: "test: add comprehensive tests for Plugins page"

**Afternoon** (1.5 hours):
- [ ] Implement SecurityHeaders.tsx tests (15 test cases)
- [ ] Focus on CRUD operations and state management
- [ ] Final coverage check: target 86.5-87%
- [ ] Commit: "test: add tests for SecurityHeaders page"

---

## Conclusion

This plan provides a systematic approach to closing the 0.44% coverage gap and establishing a solid 50bp buffer above the 85% threshold. By focusing on **Tabs.tsx** (quick win), **Plugins.tsx** (highest impact), and **SecurityHeaders.tsx** (medium impact), we can efficiently achieve 86.5-87% coverage with well-structured, maintainable tests.

**Next Step**: Begin Phase 1 implementation with Tabs.tsx tests.

---

**Plan Status**: ✅ COMPLETE
**Approved By**: Automated Analysis
**Implementation ETA**: 2-3 hours
**Expected Result**: 86.5-87% coverage (CI-safe)