Test results

A test run as the agent sees it: counts that double as filters, progress while running, failures that open to the error, diff and stack, and rerun.

Markdown

On this page

Progress while the suite runs, then a failure you can expand and rerun.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/test-results.json

Usage

tsx

import { TestResults } from "@/components/ui/chatcn/test-results"

<TestResults
  tests={[
    { id: "1", file: "tests/webhooks.test.ts", name: "verifies the signature", status: "passed", durationMs: 4 },
    {
      id: "2",
      file: "tests/webhooks.test.ts",
      suite: ["deliver"],
      name: "retries with backoff",
      status: "failed",
      error: { message: "expected 3 calls, got 2", expected: "3", actual: "2", stack },
    },
  ]}
  durationMs={2310}
  onRerunFailed={rerunFailed}
/>

Tests group by file. Files with a failure open by themselves, and so do their failing tests. While running, pass total so the 2 px bar under the header shows real progress.

Examples

Passing, skipped and empty

The failed, passed and skipped counts are toggle buttons that filter the list. An empty run says where test files are expected to live.

All passing, skipped tests and an empty run.

Props

Prop	Type	Notes
`tests`	`TestCase[]`	`{ id, name, file, suite?, status, durationMs?, error? }`
`status`		`passed`, `failed`, `skipped`, `running` or `queued`
`error`	`TestError`	`{ message, stack?, expected?, actual? }`
`running`	`boolean`	Spinner, done of total, progress bar
`total`	`number`	Expected test count, for progress
`durationMs`	`number`	Shown after the run
`title`	`ReactNode`	Default Tests
`onRerunFailed`	`() => void`	Shows Rerun failed
`onRerun`	`(test) => void`	Rerun one failed test
`filter`, `defaultFilter`, `onFilterChange`	`"all" \| "failed" \| "passed" \| "skipped"`
`appRoot`, `getFrameHref`		Passed to each failure's stack trace
`maxHeight`	`number \| string`	Scroll height for long runs

Keyboard

Key	Action
`Tab`	Counts, Rerun failed, then each file and failing test
`Enter`, `Space`	Toggle a filter, open a file or a failure

Accessibility

Every status has a word for screen readers (Passed, Failed, Skipped, Running, Queued) next to its icon.
Count buttons use aria-pressed. Progress is a progressbar with the done and total counts.
The final tally is announced once through a polite live region.

Motion

Files and failures open with a 200 ms height and opacity transition. The chevron turns over 150 ms.
The progress bar scales, never resizes, with a linear 300 ms step between updates.
Under reduced motion everything snaps.