CRASM-3764: Epic - Frontend Testing Documentation Suite

[jsalinasnttdata]

🗣 Description

This PR implements comprehensive frontend testing documentation for the XFD (CyHy Dashboard) project, providing standardized guidelines, templates, and CI integration for consistent testing practices across the team.

What's New

📚 Complete Documentation Structure

docs/testing/
├── README.md                           # Central testing hub
└── frontend/
    ├── unit-templates/                 # Ready-to-use test templates
    │   ├── README.md                   # Template navigation
    │   ├── component-templates.md      # React component tests
    │   ├── hook-templates.md           # Custom hook tests
    │   ├── utility-templates.md        # Utility function tests
    │   ├── context-templates.md        # Context provider tests
    │   └── integration-templates.md    # Integration test patterns
    └── CI_COVERAGE_GUIDELINES.md       # Coverage thresholds & CI setup

frontend/src/tests/README.md            # Enhanced main testing guide

🎯 Key Features

Enhanced Main Testing Guide (frontend/src/tests/README.md)

• 📖 Quick start guide for new developers
• 🏗️ Mirrored directory structure explanation
• 🔧 Testing stack documentation (Vitest, RTL, jsdom)
• 🎨 XFD-specific patterns and considerations
• ⚠️ Current inconsistencies and migration guidance
• 🐛 Comprehensive troubleshooting section

Unit Test Template Suite (docs/testing/frontend/unit-templates/)

• 30+ copy-paste ready test templates
• XFD-specific patterns using test-utils
• Component, hook, utility, context, and integration examples
• Real project patterns from existing codebase

CI Coverage Guidelines (docs/testing/frontend/CI_COVERAGE_GUIDELINES.md)

• Current coverage thresholds (46.5% lines, 34.6% branches, etc.)
• Local development commands
• GitHub Actions + Coveralls integration
• Quality gates and failure troubleshooting

📖 How to Review This PR

1. Start with the Central Hub

👉 Begin here: docs/testing/README.md

• Overview of frontend/backend testing organization
• Links to all documentation resources

2. Main Testing Documentation

👉 Core guide: frontend/src/tests/README.md

• Comprehensive testing guide for day-to-day development
• Quick start section for new team members
• XFD-specific testing patterns and considerations

3. Template Library

👉 Ready-to-use templates: docs/testing/frontend/unit-templates/

• Start with README.md for navigation
• Browse templates by category (components, hooks, utilities, etc.)
• Each template includes XFD-specific patterns and imports

4. CI & Coverage

👉 Coverage guidelines: docs/testing/frontend/CI_COVERAGE_GUIDELINES.md

• Current coverage thresholds and CI configuration
• Local commands for coverage analysis
• Troubleshooting coverage issues

🚀 Quick Start for Team Members

For New Developers

1. Read the Quick Start section in the main testing guide
2. Browse the unit test templates for your specific testing needs
3. Use import { render, screen } from 'test-utils' for all new tests
4. Follow the mirrored directory structure: src/components/Header/ → tests/components/Header/

For Existing Team Members

1. Review Current Inconsistencies section for migration guidance
2. Standardize on import { render, screen } from 'test-utils' pattern
3. Use templates for consistent test patterns going forward

📊 Coverage Status

• Current thresholds: Lines 46.5%, Branches 34.6%, Functions 41.5%
• Auto-updating: Thresholds automatically increase with improvements
• CI integration: GitHub Actions + Coveralls tracking

🎯 Epic Completion

This PR completes epic CRASM-3764 with all child tickets delivered:

• ✅ CRASM-3786: Enhanced frontend testing README
• ✅ CRASM-3787: Comprehensive unit test template suite
• ✅ CRASM-3788: CI coverage and reporting guidelines

🔗 Quick Navigation

• 📖 Central Testing Hub
• 🧪 Main Testing Guide
• 📋 Unit Test Templates
• 📊 Coverage Guidelines

---

Ready for team review! Start with any of the quick navigation links above. The documentation is designed to be self-guided and comprehensive for both new and existing team members.

✅ Pre-approval checklist

• This PR has an informative and human-readable title.
• Changes are limited to a single goal - eschew scope creep!
• All future TODOs are captured in issues, which are referenced in code comments.
• All relevant type-of-change labels have been added.
• I have read the CONTRIBUTING document.
• These code changes follow cisagov code standards.
• All relevant repo and/or project documentation has been updated to reflect the changes in this PR.
• Tests have been added and/or modified to cover the changes in this PR.
• All new and existing tests pass.
• Bump major, minor, patch, pre-release, and/or build versions as appropriate via the bump_version script if this repository is versioned and the changes in this PR warrant a version bump.
• Create a pre-release (necessary if and only if the pre-release version was bumped).

✅ Pre-merge checklist

• Revert dependencies to default branches.
• Finalize version.

✅ Post-merge checklist

• Create a release (necessary if and only if the version was bumped).