Test Results

Display test suite results with pass/fail/skip status and error details.

The TestResults component displays test suite results including summary statistics, progress, individual tests, and error details.

See scripts/test-results.tsx for this example.

Installation

npx ai-elements@latest add test-results

Features

  • Summary statistics (passed/failed/skipped)
  • Progress bar visualization
  • Collapsible test suites
  • Individual test status and duration
  • Error messages with stack traces
  • Color-coded status indicators

Status Colors

StatusColorUse Case
passedGreenTest succeeded
failedRedTest failed
skippedYellowTest skipped
runningBlue (animated)Test in progress

Examples

Basic Usage

See scripts/test-results-basic.tsx for this example.

With Test Suites

See scripts/test-results-suites.tsx for this example.

With Error Details

See scripts/test-results-errors.tsx for this example.

Props

<TestResults />

PropTypeDefaultDescription
summaryunknown-Test results summary.
classNamestring-Additional CSS classes.

<TestSuite />

PropTypeDefaultDescription
namestring-Suite name.
statusunknown-Overall suite status.
defaultOpenboolean-Initially expanded.

<Test />

PropTypeDefaultDescription
namestring-Test name.
statusunknown-Test status.
durationnumber-Test duration in ms.

<TestResultsHeader />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLDivElement>-Any other props are spread to the div element.

<TestResultsSummary />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLDivElement>-Any other props are spread to the div element.

<TestResultsDuration />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLSpanElement>-Any other props are spread to the span element.

<TestResultsProgress />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLDivElement>-Any other props are spread to the div element.

<TestResultsContent />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLDivElement>-Any other props are spread to the div element.

<TestSuiteName />

PropTypeDefaultDescription
...propsReact.ComponentProps<typeof CollapsibleTrigger>-Any other props are spread to the CollapsibleTrigger component.

<TestSuiteStats />

PropTypeDefaultDescription
passednumber0Number of passed tests.
failednumber0Number of failed tests.
skippednumber0Number of skipped tests.
...propsReact.HTMLAttributes<HTMLDivElement>-Any other props are spread to the div element.

<TestSuiteContent />

PropTypeDefaultDescription
...propsReact.ComponentProps<typeof CollapsibleContent>-Any other props are spread to the CollapsibleContent component.

<TestStatus />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLSpanElement>-Any other props are spread to the span element.

<TestName />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLSpanElement>-Any other props are spread to the span element.

<TestDuration />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLSpanElement>-Any other props are spread to the span element.

<TestError />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLDivElement>-Any other props are spread to the div element.

<TestErrorMessage />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLParagraphElement>-Any other props are spread to the p element.

<TestErrorStack />

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLPreElement>-Any other props are spread to the pre element.