Coverage Report
Coverage per file, ranked by uncovered lines rather than by percentage. A 400-line file at 92% has 32 untested lines; a 12-line file at 60% has 5 — and percentage ranks the small one first.
src/components/ui/coverage-report.tsxAbout
From the component's own source, where it was written.
Test coverage per file, with the uncovered lines named.
Sorted by uncovered lines rather than by percentage. A 400-line file at 92% has 32 untested lines; a 12-line file at 60% has 5. Percentage ranks the small file first and that is exactly backwards for someone deciding what to test next.
Four metrics are kept apart. Statement coverage flatters: a file can hit every statement and miss half its branches, which is where the bugs are. Branch coverage is the one shown in the bar.
The threshold is drawn as a line on each bar, so "below target" is visible per row without reading numbers.
Install
npx astralyx-ui add coverage-report
Usage
import { CoverageReport } from '@/components/ui/coverage-report'
<CoverageReport files={files} threshold={0.8} />Composer
Change the props and the source below follows.
<CoverageReport files={files} metric="branches" threshold={0.8} />Examples
Per-file coverage
<CoverageReport files={files} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
CoverageReport
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| files | CoverageFile[] | required | { path, statements, branches, functions, lines, uncovered? } — ratios 0–1. |
| threshold | number | 0.8 | Drawn as a line on every bar, so "below target" is visible per row without reading numbers. |
| metric | 'statements' | 'branches' | 'functions' | 'lines' | 'branches' | Statement coverage flatters: a file can hit every statement and miss half its branches, which is where the bugs are. |
| thresholdLabel | ReactNode | 'target' | — |
| uncoveredLabel | ReactNode | 'uncovered lines' | — |
| totalLabel | ReactNode | 'Total' | — |
| metricLabels | Record<'statements' | 'branches' | 'functions' | 'lines', ReactNode> | { statements: 'Stmts', branches: 'Branch', functions: 'Funcs', lines: 'Lines', } | — |
Types
CoverageFile
Test coverage per file, with the uncovered lines named.
| Field | Type | Description |
|---|---|---|
| path | string | — |
| statements | number | — |
| branches | number | — |
| functions | number | — |
| lines | number | — |
| uncovered? | number[] | Expands to the actual line numbers — the thing you need to act. |