Test Results Panel

A results panel for an AI coding assistant after it runs tests, or for a CI summary page. The three count chips in the header — passed, failed, skipped — roll digit by digit next to the total duration; below them a segmented ratio bar grows smoothly on a spring, with still-running tests shown as stripes. The count chips double as filter buttons, and the selected backdrop slides to its new spot. The list is grouped by suite and collapsible; expanding a failure shows the error message and a line diff (- expected / + actual), along with "Rerun this" and "Copy error". The filter supports controlled and uncontrolled modes.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<TestResultsPanel/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/test-results-panel.en.json

Usage

import { TestResultsPanel } from "@/components/ui/test-results-panel";

<TestResultsPanel
  running={false}
  suites={[
    {
      id: "cart",
      name: "cart-total.test.ts",
      tests: [
        { id: "c1", name: "subtotal is correct after adding items", status: "pass", duration: 12 },
        {
          id: "c2",
          name: "NT$100 off NT$1,000 applies to the total incl. shipping",
          status: "fail",
          duration: 18,
          error: { message: "discount not applied", expected: "950", actual: "1000" },
        },
        { id: "c3", name: "shows a notice when stock runs low", status: "skip" },
      ],
    },
  ]}
  onRerun={(testId) => console.log(testId ? `rerun ${testId}` : "rerun all")}
/>

Props

TestSuite

TestCase

TestError

The pure function diffLines(expected, actual) is also exported by name. It returns { type: "same" | "removed" | "added"; text }[], so you can reuse the same line comparison elsewhere.

How it works

• Rolling counts: each digit is an overflow-hidden column with 0–9 stacked vertically, and a spring (stiffness / damping) rolls it to the target digit; when digits are added, the ones digit keeps its own wheel.
• Ratio bar: the widths of the passed / failed / skipped / running segments tween on the same spring, with the running part drawn as stripes.
• Filtering: the count chips form an aria-pressed button group, and pressing the selected chip again returns to "all"; the selected backdrop slides via layoutId. Rows enter and exit with height and opacity when the filter changes.
• Line diff: diffLines compares the two texts by longest common subsequence (LCS) with no package dependency; expected lines get a red background, actual lines green, and shared lines grey.
• Auto-expand: with defaultExpandFailed on, the first failure to appear is expanded automatically; it only does so again after all failures have cleared and new ones appear, so rerunning a single test does not keep stealing expansion.
• Any test whose status is still running also counts as running, so you do not need to toggle running when rerunning a single test.
• The root sets --wb-test-results-panel-duration, which the colour transitions share, so you can override it globally.

Accessibility

• The count chips are aria-pressed buttons whose aria-label includes the status and count; the rolling digits are hidden from assistive tech
• When a run ends, an aria-live="polite" region announces "Passed 42, failed 3, skipped 1" once, without interrupting on every tick during the run
• The ratio bar is aria-hidden because the information is already in the counts
• Suite headers and failed rows are buttons with aria-expanded / aria-controls; ↑ / ↓ / Home / End move focus between them (roving tabindex), and Enter / Space expands or collapses
• The − / + markers on each diff line are hidden from assistive tech and replaced by sr-only "Expected" / "Actual" labels; each row's status and slow tests also get sr-only text
• When the user has reduce motion enabled, counts swap instantly, the ratio bar jumps into place, expansions appear immediately and status icons do not pop