temetro/.agents/skills/ai-elements/references/test-results.md

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

Status	Color	Use Case
passed	Green	Test succeeded
failed	Red	Test failed
skipped	Yellow	Test skipped
running	Blue (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 />

Prop	Type	Default	Description
summary	unknown	-	Test results summary.
className	string	-	Additional CSS classes.

<TestSuite />

Prop	Type	Default	Description
name	string	-	Suite name.
status	unknown	-	Overall suite status.
defaultOpen	boolean	-	Initially expanded.

<Test />

Prop	Type	Default	Description
name	string	-	Test name.
status	unknown	-	Test status.
duration	number	-	Test duration in ms.

<TestResultsHeader />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the div element.

<TestResultsSummary />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the div element.

<TestResultsDuration />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLSpanElement>	-	Any other props are spread to the span element.

<TestResultsProgress />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the div element.

<TestResultsContent />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the div element.

<TestSuiteName />

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CollapsibleTrigger>	-	Any other props are spread to the CollapsibleTrigger component.

<TestSuiteStats />

Prop	Type	Default	Description
passed	number	0	Number of passed tests.
failed	number	0	Number of failed tests.
skipped	number	0	Number of skipped tests.
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the div element.

<TestSuiteContent />

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CollapsibleContent>	-	Any other props are spread to the CollapsibleContent component.

<TestStatus />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLSpanElement>	-	Any other props are spread to the span element.

<TestName />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLSpanElement>	-	Any other props are spread to the span element.

<TestDuration />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLSpanElement>	-	Any other props are spread to the span element.

<TestError />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the div element.

<TestErrorMessage />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLParagraphElement>	-	Any other props are spread to the p element.

<TestErrorStack />

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLPreElement>	-	Any other props are spread to the pre element.