Test results

Displays suites, derived pass/fail/skip totals, elapsed time and failure details with optional retries.

Preview

Test results

1 passed1 failed1 skipped3 of 3 complete428 ms

Composer · 3 tests · 428 ms

passedSends a complete prompt82 ms
failedRetains the draft after failure146 ms
Failure details for Retains the draft after failure
Expected "Review the diff", received "".
Stack trace
```
at assertDraft (composer.test.tsx:42:5)
at retryTest (composer.test.tsx:38:3)
```
skippedPastes an attachment

In action

Inspect failures and retry a recorded result

Draft recovery checks

1 passed1 failed1 skipped3 of 3 complete428 ms

Composer · 3 tests · 428 ms

passedSends a complete prompt82 ms
failedRetains the draft after failure146 ms
Failure details for Retains the draft after failure
Expected "Review the diff", received "".
Stack trace
```
at assertDraft (composer.test.tsx:42:5)
at retryTest (composer.test.tsx:38:3)
```
skippedPastes an attachment

When to use

Use it for

Render supplied test suites, durations in milliseconds and per-test failures.
Provide onRetry to request another run; new application data determines the resulting status.
Counts and completion progress derive from the displayed tests, including skipped and running states.

Avoid

Executing tests or marking them passed merely because a retry callback resolves.
Announcing full changing logs through a live region.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { TestResults } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/test-results.

Copy the source

npx @noorddev/vlak-cli add test-results

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/test-results.json

Installs the same source through the shadcn CLI.

React

import { TestResults } from "@noorddev/vlak-react";

<TestResults suites={[{ id: "composer", name: "Composer", tests: [{ id: "send", name: "Sends a prompt", status: "passed", duration: 82 }, { id: "retry", name: "Retains failed drafts", status: "failed", error: "Expected the original draft.", stack: "at retryTest (composer.test.tsx:38:3)" }] }]} duration={428} />

See the integration example to compose these components with your application's model and data.

Props

TestResults

Test hierarchy and derived totals, with runner-owned status and retry results.

Prop	Type	Default	Description
`suites`required	`TestResultSuite[]`
`title`	`ReactNode`	`"Test results"`
`duration`	`number`		Total elapsed time in milliseconds, when measured by the runner.
`defaultOpen`	`boolean`	`true`
`onRetry`	`(test: TestResultItem, suite: TestResultSuite) => void \| Promise<void>`		Requests a retry; only new supplied test data changes the displayed result.

Also accepts Omit<HTMLAttributes<HTMLElement>, "title">.

The ref reaches HTMLElement.

Keyboard

Keys	Does
`Tab`	Tab reaches suite/failure disclosures, retry actions and stack copy controls.
`Enter, Space`	Enter or Space toggles disclosures or requests retry for the focused failed test.

Accessibility

Text labels distinguish all five states without color dependence.
A concise atomic status announces totals; failure text remains ordinary readable content.
The named native progress element avoids a zero maximum for empty results.
Retries prevent duplicate activation, retain actionable failure feedback and ignore stale completion after data changes.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<section class="rs-test-results" aria-labelledby="tests-title"><header class="rs-test-results-header"><span class="rs-test-results-title" id="tests-title">Test results</span><div class="rs-test-results-summary" role="status"><span class="rs-badge-solid">1 passed</span><span class="rs-badge-muted">1 failed</span><span class="rs-test-results-note">2 of 2 complete</span></div><progress class="rs-test-results-progress" value="2" max="2" aria-label="Tests completed"></progress></header><div class="rs-test-results-content"><p class="rs-test-results-note">Open a suite to inspect its results.</p></div></section>

Classes

.rs-test-results-test.rs-test-results-line.rs-test-results-name.rs-test-results-note.rs-test-results-error.rs-test-results.rs-test-results-header.rs-test-results-title.rs-test-results-summary.rs-test-results-progress.rs-test-results-content.rs-test-results-list

Depends on

Badge Button Collapsible Code block

Use elsewhere

Markdown reference Registry JSON Source AI integration guide