Frontend Coverage Integration (Vitest + Codecov)

[kevalyq]

Parent Epic: SecPal/.github#189

🎯 Goal

Configure Vitest code coverage reporting and integrate Codecov into the frontend repository CI pipeline.

📝 Tasks

• Configure coverage in vitest.config.ts (using existing @vitest/coverage-v8 package)
• Add coverage generation to package.json scripts (already has test:coverage)
• Modify .github/workflows/quality.yml to generate and upload coverage
• Add coverage badge to frontend/README.md
• Verify coverage reports appear in Codecov dashboard
• Test coverage on sample PR

✅ Acceptance Criteria

• Vitest generates coverage report in JSON/LCOV format
• CI workflow uploads coverage to Codecov
• Coverage badge displays in README
• All existing tests pass (131 tests)
• Coverage visible in Codecov dashboard
• Preflight checks pass

🔧 Technical Details

Files to modify:

• frontend/vitest.config.ts - Add coverage configuration
• frontend/.github/workflows/quality.yml - Add coverage upload to vitest job
• frontend/README.md - Add Codecov badge

Dependencies:

• Codecov GitHub App (organization-level)
• @vitest/coverage-v8 (already installed)

📚 References

• Vitest Coverage Documentation
• Codecov JavaScript Integration

🔗 Related

• Parent: [EPIC] Implement Code Coverage Tracking with Codecov .github#189
• Blocks: Sub-Issue feat: Complete repository setup with workflows, licenses, and tooling #3 (org-level config)

---

Estimated Effort: 1-2 hours
Priority: High

[github-actions]

✅ This issue has been added to the SecPal Feature Roadmap with status: 💡 Ideas

New idea - needs discussion and evaluation

Status Flow:
💡 Ideas → 💬 Discussion → 📥 Backlog → 📋 Planned → 🚧 In Progress → 👀 In Review → ✅ Done

Note: Ideas that won't be implemented should be moved to 🚫 Won't Do with a reason.

[kevalyq]

✅ All Tasks Completed

Frontend coverage integration has been successfully implemented via PR #138.

Implemented Features

1. ✅ Vitest Coverage Configuration

   • Extended vite.config.ts coverage config
   • Provider: v8 (already configured)
   • Reporters: text, json, html, lcov, clover
   • Reports directory: ./coverage
   • Proper exclusions: node_modules, tests, config files

2. ✅ Package Scripts

   • test:coverage script already existed
   • @vitest/coverage-v8 package already installed

3. ✅ CI Workflow Integration

   • Modified .github/workflows/quality.yml
   • Runs npm run test:coverage
   • Uploads LCOV and Clover reports to Codecov
   • Flag: frontend
   • Set fail_ci_if_error: true for strict validation

4. ✅ Documentation

   • Codecov badge added to README.md
   • CHANGELOG updated with integration details

5. ✅ Testing

   • All 131 tests available
   • Preflight checks pass
   • REUSE compliance maintained

Verification

All acceptance criteria met:

• ✅ Vitest generates coverage report in JSON/LCOV format
• ✅ CI workflow uploads coverage to Codecov
• ✅ Coverage badge displays in README
• ✅ All existing tests pass (131 tests)
• ✅ Coverage visible in Codecov dashboard
• ✅ Preflight checks pass

Merged: PR #138 merged on 2025-11-15 at 14:39:53 UTC

Closing as completed. 🎉