| name | test-frontend-coverage |
| version | 1.0.0 |
| description | Run frontend tests with coverage analysis and threshold validation (minimum 85%) |
| author | Charon Project |
| license | MIT |
| tags | testing, coverage, frontend, vitest, validation |
| compatibility | [object Object] |
| requirements | [object Object], [object Object], [object Object] |
| environment_variables | [object Object], [object Object] |
| parameters | [object Object] |
| outputs | [object Object], [object Object] |
| metadata | [object Object] |
Test Frontend Coverage
Overview
Executes the frontend test suite using Vitest with coverage enabled, generates a JSON coverage summary, and validates that the total statements coverage meets or exceeds the configured threshold (default: 85%).
This skill is designed for continuous integration and pre-commit hooks to ensure code quality standards are maintained.
Prerequisites
- Node.js 18.0 or higher installed and in PATH
- npm 9.0 or higher installed and in PATH
- Python 3.8 or higher installed and in PATH
- Frontend dependencies installed (
cd frontend && npm install) - Write permissions in
frontend/coverage/directory
Usage
Basic Usage
Run with default settings (85% minimum coverage):
cd /path/to/charon
.github/skills/scripts/skill-runner.sh test-frontend-coverage
Custom Coverage Threshold
Set a custom minimum coverage percentage:
export CHARON_MIN_COVERAGE=90
.github/skills/scripts/skill-runner.sh test-frontend-coverage
CI/CD Integration
For use in GitHub Actions or other CI/CD pipelines:
- name: Run Frontend Tests with Coverage
run: .github/skills/scripts/skill-runner.sh test-frontend-coverage
env:
CHARON_MIN_COVERAGE: 85
Parameters
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| verbose | boolean | No | false | Enable verbose test output |
Environment Variables
| Variable | Required | Default | Description |
|---|---|---|---|
| CHARON_MIN_COVERAGE | No | 85 | Minimum coverage percentage required for success |
| CPM_MIN_COVERAGE | No | 85 | Legacy name for minimum coverage (fallback) |
Outputs
Success Exit Code
- 0: All tests passed and coverage meets threshold
Error Exit Codes
- 1: Coverage below threshold or coverage file generation failed
- Non-zero: Tests failed or other error occurred
Output Files
- frontend/coverage/coverage-summary.json: Vitest coverage summary (JSON format)
- frontend/coverage/index.html: HTML coverage report (viewable in browser)
Console Output
Example output:
Computed frontend coverage: 87.5% (minimum required 85%)
Frontend coverage requirement met
Examples
Example 1: Basic Execution
.github/skills/scripts/skill-runner.sh test-frontend-coverage
Example 2: Higher Coverage Threshold
export CHARON_MIN_COVERAGE=90
.github/skills/scripts/skill-runner.sh test-frontend-coverage
Example 3: View HTML Coverage Report
.github/skills/scripts/skill-runner.sh test-frontend-coverage
open frontend/coverage/index.html # macOS
xdg-open frontend/coverage/index.html # Linux
Error Handling
Common Errors
Error: Coverage summary file not found
Solution: Check that Vitest is configured with --coverage and --reporter=json-summary
Error: Frontend coverage X% is below required Y%
Solution: Add tests for uncovered components or adjust threshold
Error: npm ci failed
Solution: Clear node_modules and package-lock.json, then reinstall dependencies
Related Skills
- test-frontend-unit - Fast unit tests without coverage
- test-backend-coverage - Backend Go coverage tests
- utility-cache-clear-go - Clear build caches
Notes
- Vitest Configuration: Uses istanbul coverage provider for JSON summary reports
- Coverage Directory: Coverage artifacts are written to
frontend/coverage/ - Python Dependency: Uses Python for decimal-precision coverage comparison
- Idempotency: Safe to run multiple times; cleans up old coverage files
- CI Mode: Runs
npm ciin CI environments to ensure clean installs
Last Updated: 2025-12-20
Maintained by: Charon Project Team
Source: scripts/frontend-test-coverage.sh