Charon/docs/plans/archive/pr460_frontend_coverage.md

PR #460: Frontend DNS Provider Coverage Plan

Overview

Add comprehensive test coverage for DNS provider feature to achieve 85%+ coverage threshold.

Files Requiring Tests

1. frontend/src/api/dnsProviders.ts

Status: No existing tests Target Coverage: 85%+

Test Cases:

• getDNSProviders() - Fetch all providers list
  • Successful response with providers array
  • Empty providers list
  • Error handling (network, 500, etc.)
• getDNSProvider(id) - Fetch single provider
  • Valid provider ID returns provider
  • Invalid ID (404 error)
  • Error handling
• getDNSProviderTypes() - Fetch supported types
  • Returns types array with field definitions
  • Error handling
• createDNSProvider(data) - Create new provider
  • Successful creation returns provider with ID
  • Validation errors (missing fields, invalid type)
  • Duplicate name error
  • Error handling
• updateDNSProvider(id, data) - Update existing
  • Successful update returns updated provider
  • Not found (404)
  • Validation errors
  • Error handling
• deleteDNSProvider(id) - Delete provider
  • Successful deletion (204)
  • Not found (404)
  • In-use error (409 - used by proxy hosts)
  • Error handling
• testDNSProvider(id) - Test saved provider
  • Success result with propagation time
  • Failure result with error message
  • Not found (404)
  • Error handling
• testDNSProviderCredentials(data) - Test before saving
  • Valid credentials success
  • Invalid credentials failure
  • Validation errors
  • Error handling

File: frontend/src/api/__tests__/dnsProviders.test.ts

---

2. frontend/src/hooks/useDNSProviders.ts

Status: No existing tests Target Coverage: 85%+

Test Cases:

• useDNSProviders() hook
  • Returns providers list on mount
  • Loading state during fetch
  • Error state on failure
  • Query key consistency
• useDNSProvider(id) hook
  • Fetches single provider when id > 0
  • Disabled when id = 0
  • Disabled when id < 0
  • Loading and error states
• useDNSProviderTypes() hook
  • Fetches types list
  • Applies staleTime (1 hour)
  • Loading and error states
• useDNSProviderMutations() hook
  • createMutation - Creates provider
    • Invalidates list query on success
    • Handles errors
  • updateMutation - Updates provider
    • Invalidates list and detail queries on success
    • Handles errors
  • deleteMutation - Deletes provider
    • Invalidates list query on success
    • Handles errors
  • testMutation - Tests provider
    • Returns test result
    • Handles errors
  • testCredentialsMutation - Tests credentials
    • Returns test result
    • Handles errors

File: frontend/src/hooks/__tests__/useDNSProviders.test.tsx

---

3. frontend/src/components/DNSProviderSelector.tsx

Status: No existing tests Target Coverage: 85%+

Test Cases:

• Component rendering
  • Renders with label when provided
  • Renders without label
  • Shows required asterisk when required=true
  • Shows helper text when provided
  • Shows error message when provided (replaces helper text)
• Provider filtering
  • Only shows enabled providers
  • Only shows providers with credentials
  • Filters out disabled providers
  • Filters out providers without credentials
• Loading states
  • Shows loading option while fetching
  • Disables select during loading
• Empty states
  • Shows "no providers available" when list is empty
  • Shows "no providers available" when all filtered out
• Selection behavior
  • Displays selected provider by ID
  • Shows "none" option when not required
  • Hides "none" option when required=true
  • Calls onChange with provider ID on selection
  • Calls onChange with undefined when "none" selected
• Provider display
  • Shows provider name
  • Shows default star icon for default provider
  • Shows provider type in parentheses
  • Translates provider type labels
• Disabled state
  • Disables select when disabled=true
  • Disables select during loading
• Accessibility
  • Error has role="alert"
  • Label properly associates with select

File: frontend/src/components/__tests__/DNSProviderSelector.test.tsx

---

4. frontend/src/components/ProxyHostForm.tsx

Status: Partial tests exist, DNS provider integration NOT covered Target Coverage: Add DNS-specific tests to existing suite

Test Cases to Add:

• Wildcard domain detection
  • Detects *.example.com as wildcard
  • Does not detect sub.example.com as wildcard
  • Detects multiple wildcards in comma-separated list
• DNS provider requirement for wildcards
  • Shows DNS provider selector when wildcard domain entered
  • Shows info alert explaining DNS-01 requirement
  • Shows validation error on submit if wildcard without provider
  • Does not show DNS provider selector without wildcard
• DNS provider selection
  • Selecting DNS provider updates form state
  • Clears DNS provider when switching to non-wildcard
  • Preserves DNS provider selection during form edits
• Form submission with DNS provider
  • Includes dns_provider_id in payload
  • Sends null when no provider selected
  • Sends provider ID when selected

File: frontend/src/components/__tests__/ProxyHostForm-dns.test.tsx (new file for DNS-specific tests)

---

Implementation Order

1. API Layer (dnsProviders.test.ts) - Foundation for all other tests
2. Hooks Layer (useDNSProviders.test.tsx) - Depends on API mocks
3. Selector Component (DNSProviderSelector.test.tsx) - Depends on hooks
4. Integration (ProxyHostForm-dns.test.tsx) - Tests full flow

Testing Strategy

• Use MSW (Mock Service Worker) for API mocking
• Follow existing patterns in useProxyHosts.test.tsx and ProxyHostForm.test.tsx
• Use React Testing Library for component tests
• Use @tanstack/react-query test utilities for hook tests
• Mock i18n translations
• Test both success and error paths
• Verify query invalidation on mutations

Coverage Target

Overall Goal: 85%+ coverage for all four files

• Statements: ≥85%
• Branches: ≥85%
• Functions: ≥85%
• Lines: ≥85%

Dependencies

• Existing test setup in frontend/src/test/setup.ts
• MSW handlers pattern from existing tests
• Mock data factories for DNS providers
• Translation mocks

Validation

Run coverage after implementation:

npm test -- --coverage --collectCoverageFrom='src/api/dnsProviders.ts' --collectCoverageFrom='src/hooks/useDNSProviders.ts' --collectCoverageFrom='src/components/DNSProviderSelector.tsx' --collectCoverageFrom='src/components/ProxyHostForm.tsx'

---

Completion Criteria:

• All four test files created
• All test cases implemented
• Coverage report shows ≥85% for all metrics
• All tests passing
• No console errors or warnings during test execution