Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Test Results AI Block for Ark UI

A test run summarised in words and a pass-rate bar, filtered by status with counts, with five suites as collapsible rows, failed tests that open to their assertion, a stack trace and a real Copy error, and a Re-run failed button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show which tests failed and why without leaving the page, with this test runner view for React with Ark UI. Testbrook, a test runner view, opens with a summary worked out from the typed tests (20 passed, 2 failed, 3 skipped, 3.7 s) and a pass-rate bar, then a Toggle Group that filters by status with a count on each. Five suites are Collapsible rows in a fixed-height scroll region; a failed test opens to its assertion with expected and received values, a Stack trace disclosure and a Button that copies the error. The Shine Button Re-run failed turns one of the two failures into a pass and keeps the other failing with a new time. For CI dashboards, dev tools and release checklists.

FAQ

What stays in the page, and how do I make it real?

The 25 tests, their times and the two failure reports are typed in the file. The summary, the counts, the pass rate and the suite totals are worked out from them, and Copy error really copies the assertion and stack. Re-run failed runs nothing: the router test passes and the cache test keeps failing because that is what the sample says. To wire it for real, read your runner's JSON report into the same shape.

How is the pass rate worked out?

Passed tests divided by passed plus failed, rounded. Skipped tests are left out because they did not run.

What does the filter do to the suites?

It shows only the tests with that status. A suite with none of them is hidden, and if nothing matches the region says so. The region has a fixed height, so filtering never moves the page.

What happens when I press Re-run failed?

Each failed test takes the result typed for a re-run. The summary, the counts, the bar and the last-run time update, the test that now passes becomes a plain line, and the status line says how many are still failing. With nothing failing the button answers instead of doing nothing.

How does it work from the keyboard?

Suites and failed tests are buttons that open and close with Enter or Space, the filter is a toggle group, and the scroll region can be focused. Copy error is a button inside each open failure.

How does it look on a phone?

The times are hidden, the counts under each suite name stay, and the assertion scrolls sideways inside its box instead of widening the page.

All 100 ai blocks