promptCompare
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v138View latest version
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.
npx ai-elements@latest add test-results
- 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 | Color | Use Case |
|---|---|---|
passed | Green | Test succeeded |
failed | Red | Test failed |
skipped | Yellow | Test skipped |
running | Blue (animated) | Test in progress |
See scripts/test-results-basic.tsx for this example.
See scripts/test-results-suites.tsx for this example.
See scripts/test-results-errors.tsx for this example.
| Prop | Type | Default | Description |
|---|---|---|---|
summary | unknown | - | Test results summary. |
className | string | - | Additional CSS classes. |
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Suite name. |
status | unknown | - | Overall suite status. |
defaultOpen | boolean | - | Initially expanded. |
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Test name. |
status | unknown | - | Test status. |
duration | number | - | Test duration in ms. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other props are spread to the div element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other props are spread to the div element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLSpanElement> | - | Any other props are spread to the span element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other props are spread to the div element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other props are spread to the div element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.ComponentProps<typeof CollapsibleTrigger> | - | Any other props are spread to the CollapsibleTrigger component. |
| 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. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.ComponentProps<typeof CollapsibleContent> | - | Any other props are spread to the CollapsibleContent component. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLSpanElement> | - | Any other props are spread to the span element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLSpanElement> | - | Any other props are spread to the span element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLSpanElement> | - | Any other props are spread to the span element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other props are spread to the div element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLParagraphElement> | - | Any other props are spread to the p element. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.HTMLAttributes<HTMLPreElement> | - | Any other props are spread to the pre element. |