astralyxdev

Coverage Report

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Coverage Report to your project and fits it to your theme.

Code

How Coverage Report is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}

Dependencies

More by astralyxdev

View all
  • Rate Limit Meter

    Rate Limit Meter

    26
  • Note Graph

    Note Graph

    18
  • Checkout Summary

    Checkout Summary

    14
  • Migration List

    Migration List

    8
  • IP Cluster

    IP Cluster

    8
  • Prompt Versions

    Prompt Versions

    7
  • Budget Guard

    Budget Guard

    7
  • Health Checks

    Health Checks

    6