Test results
A summary of a test run with pass and fail counts, each suite, and the error for anything that failed.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/test-results.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/test-results.json
Usage & API
Example
import { TestResults } from "@/components/ai/test-results"
<TestResults
suites={[]}
duration={1}
open={[]}
onToggle={() => {}}
/>Props TestResults
| Prop | Type & description | Required |
|---|---|---|
suites | Suite[] | Required |
duration | number | Required |
running | boolean | Optional |
onRerun | () => void | Optional |
open | string[] | Required |
onToggle | (file: string) => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Run summary is the only layout. The sample starts on a first run lasting 2.4 seconds, with checkout/coupon.test.ts already open. That file passes a percent coupon and rounding, fails rejects an expired coupon because it received ok true and a discount of 1500 instead of ok false and reason expired, and skips stacks with gift cards. tax.test.ts is three passes. api/orders.test.ts fails returns 409 on duplicate key, expected 409 and received 500, and passes create and list. lib/money.test.ts passes GBP and JPY and skips BHD with 3 decimals. Rerun failed waits a second and a half, shows Running…, then swaps in a second run of 0.6 seconds where the orders failure becomes a pass at 19 milliseconds. The coupon failure is still there, so the button stays enabled. The card does not filter to failed tests on its own. The sample chose what the second payload contains.
Choosing a layout
Use it at the end of an edit, when the person asked the agent to change code and the next question is whether the tests agree. Lead with the counts so a failure is obvious before anyone opens a file. Open the suite that failed, which the sample does for the coupon file, and leave the green suites shut until someone asks. Wire onRerun to the command you actually run. The button does not know which tests failed. Your handler decides what the next suites array contains. Set running while that work is in flight so the header and the button tell the truth.
A diff is the better fit while the person is still deciding which hunks to keep. A file tree is the better fit when the question is which paths the agent touched, not how a run went. A code block is the better fit when you need to show the test source itself. The error block here is a message, an expected value, a received value and a location. It is not an editor. A data table is the better fit when the rows are query results with sortable columns, not test cases. Do not put a stack trace in a table and call it a run.
Why is Rerun failed sometimes disabled?
It disables while running is true, and it also disables when no test has status fail. A run of only passes and skips does not offer the button as active. Skip is not a failure. If you omit onRerun, the button is not rendered at all. The click handler is yours. The label does not mean the component knows how to re-execute a file.
What gets shown for a failure that has no error object?
The row still shows the red icon, the name and the milliseconds. The expected, received and location block is rendered only when error is present. The sample failures include that object, so both the coupon mismatch and the 409 versus 500 mismatch draw the block. A suite row turns red if any child failed, even when the suite is collapsed, and the trailing text includes the failed count.