Frontend Coverage Report Setup

This document describes how frontend test coverage reporting is configured in this project.

Overview

Frontend test coverage is generated using Vitest’s built-in coverage functionality with the v8 coverage provider. Coverage reports are automatically generated during CI builds and uploaded as publicly accessible badges.

Local Development

Running Coverage Reports

# Run tests with coverage report
npm run test:coverage

# View HTML coverage report
open coverage/index.html

Coverage Configuration

Coverage is configured in vitest.config.ts:

coverage: {
  provider: 'v8',
  reporter: ['text', 'html', 'lcov', 'json'],
  exclude: [
    'node_modules/',
    'src/test/',
    '**/*.d.ts',
    '**/*.config.*',
    '**/coverage/**',
    'src/scripts/**',
  ]
}

CI/CD Integration

Cloud Build Configuration

The cloudbuild.yaml file includes steps to:

  1. Run frontend tests with coverage
  2. Extract coverage percentage from the output
  3. Generate a coverage badge JSON file
  4. Upload the badge to Google Cloud Storage

Coverage Badge Generation

The coverage badge is generated in the following steps:

  1. Run Tests with Coverage 
    CI=true npm run test:coverage > coverage-output.txt 2>&1
  2. Extract Coverage Percentage 
    COVERAGE=$(grep -E "All files" coverage-output.txt | head -1 | awk -F'|' '{print $2}' | tr -d ' ')

  3. Generate Badge JSON

    {
  "schemaVersion": 1,
  "label": "${BRANCH_NAME}-frontend-coverage",
  "message": "${COVERAGE}%",
  "color": "${COLOR}"
}

  4. Upload to GCS

    gsutil cp frontend-coverage-badge.json gs://${BUCKET}/coverage-badges/frontend-${BRANCH_NAME}-coverage.json

Badge Colors

Coverage badges use the following color scheme:

  • 90%+: brightgreen
  • 80-89%: green
  • 70-79%: yellow
  • 60-69%: orange
  • <60%: red

Using Coverage Badges and Reports

Once uploaded, coverage badges and reports can be accessed via:

Coverage Badge

Direct JSON URL

https://storage.googleapis.com/{BUCKET}/coverage-badges/frontend-{BRANCH}-coverage.json

Shields.io Badge URL

https://img.shields.io/endpoint?url=https://storage.googleapis.com/{BUCKET}/coverage-badges/frontend-{BRANCH}-coverage.json

[![Frontend Coverage](https://img.shields.io/endpoint?url=https://storage.googleapis.com/{BUCKET}/coverage-badges/frontend-{BRANCH}-coverage.json)](https://storage.googleapis.com/{BUCKET}/coverage-reports/frontend-{BRANCH}/index.html)

Full Coverage Report

The complete HTML coverage report is available at:

https://storage.googleapis.com/{BUCKET}/coverage-reports/frontend-{BRANCH}/index.html

This report includes:

  • File-by-file coverage breakdown
  • Line-by-line coverage visualization
  • Uncovered code highlighting
  • Coverage trends and statistics

Troubleshooting

Coverage Not Generated

If coverage reports are not generated:

  1. Ensure @vitest/coverage-v8 is installed: 
    npm install --save-dev @vitest/coverage-v8
  2. Check that the coverage directory exists after running tests: 
    ls -la coverage/

Badge Not Updating

If the badge doesn’t update:

  1. Check Cloud Build logs for errors
  2. Verify the GCS bucket permissions allow public read access
  3. Clear browser cache or add a cache-busting parameter to the URL

Low Coverage Numbers

If coverage seems unexpectedly low:

  1. The coverage includes all files, including those without tests
  2. Check the coverage exclusions in vitest.config.ts
  3. Review the HTML coverage report to identify untested files