A per-file test coverage list that ranks files by number of uncovered lines rather than coverage percentage, so the file most worth testing next shows up first.
"use client";
import CoverageReport, {
type CoverageFile,
} from "@/components/ui/coverage-report";
const files: CoverageFile[] = [
{
path: "src/lib/money.ts",
statements: 0.82,
branches: 0.62,
functions: 0.8,
lines: 0.82,
uncovered: [12, 34, 35, 48, 61, 62, 77, 88, 101, 102],
},
{
path: "src/lib/dates.ts",
statements: 0.72,
branches: 0.44,
functions: 0.65,
lines: 0.74,
uncovered: [5, 14, 15, 22, 30, 31, 42],
},
{
path: "src/lib/highlighter.ts",
statements: 0.88,
branches: 0.71,
functions: 0.85,
lines: 0.88,
uncovered: [9, 20, 33, 47],
},
{
path: "src/lib/styles.ts",
statements: 0.98,
branches: 0.96,
functions: 0.98,
lines: 0.98,
uncovered: [142],
},
{
path: "src/components/ui/table.tsx",
statements: 1,
branches: 1,
functions: 1,
lines: 1,
uncovered: [],
},
];
export default function CoverageReportDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6 text-foreground">
<div className="w-full max-w-xl">
<CoverageReport files={files} threshold={0.8} />
</div>
</div>
);
}