Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Error blocks

Pro

Failed Test Run Error Block for Ark UI

A test-runner window: a tree of suites and tests with their results, a Failed only switch, and a pane that compares expected and received values with the differing characters underlined.

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

Let a developer see what a test expected and what it got, with this failed test run for React with Ark UI. It's an app window in a fixed-height frame on plus-marked corners. The top bar holds the heading ("2 of 9 tests failed") and the one Shine Button, Run failed tests again. The list pane is a Tree View of three suites and nine tests, each with a shape and a word (a cross and Failed, a check and Passed), under a Switch that shows only the failed ones. The pane beside it follows the chosen test: Expected and Received as two aligned lines with the characters that differ underlined, the four lines of the test with the failing one marked, the first stack line and a suggested fix. The frame's corners come from Guides, and the entrance is CSS only. For a test runner, a CI dashboard or any tool that reports assertions.

FAQ

What is real here, and what stays local?

Nothing runs. The suites, tests, values, source lines and stack lines are typed sample data in the file, and Run failed tests again waits a moment and says it did not run anything. To wire it for real, fill SUITES from your runner's report, and start the run from the button.

How are the differing characters found?

By a small function that takes what the two values share at their start and at their end and underlines what lies between, in both lines. The lines are printed in a monospace font with the labels the same width, so they line up character for character, and the underline is not the only cue: the lines carry a minus and a plus, and the words Expected and Received.

What does a passing test show?

The same blocks, so the pane never changes size: the two lines are equal with no underline, the test's source is shown, and the stack and fix blocks say the test passed in so many milliseconds and there is nothing to fix.

How does the keyboard work?

Tab enters the tree on one row; the arrow keys move between rows, the side arrows open and close a suite, Home and End jump, and Enter chooses a test. The pane and the code windows in it are scroll regions with their own tab stops and names. The status line says which test is open and its result.

What does Failed only do?

It rebuilds the tree with only the suites and tests that failed, so the list never has to be searched. If the test you were reading passed, the pane moves to the first failed one. Turning it off brings every test back and keeps the one chosen.

What changes on a phone?

The tree sits above the pane in one scrolling column, with the Switch above the tree and the button shortened to Run failed (its name stays Run failed tests again). The long code lines scroll inside their windows, not the page.

All 100 error blocks