Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Regression Tests Dashboard Block for Svelte

Two test runs compared: baseline and candidate selects over six typed runs, a count strip filtering Regressed, Fixed and Still failing, a table with failure details per test, and a quarantine switch that adjusts the pass rate.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See which tests broke between two runs and which got fixed, with this regression panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner starts with two Native Selects, Baseline and Candidate, over six Flakewatch runs. A strip of chips shows the counts and filters the table: All changed, Regressed (passed, now fails), Fixed (failed, now passes) and Still failing. Each row names the test and its suite, shows the change as a glyph and a word, and has a Details button that opens the failure message and how many times it was retried. A Switch per test quarantines it, which takes it out of the pass rate in the header ("Pass rate 98%, excluding 1 quarantined"). The list is a fixed-height region, so filtering to nothing shows an Empty state without moving the panel. For CI dashboards and release checks.

FAQ

How do I fill it with my runs?

Edit RUNS: an id, a label and fails, the ids of the tests that failed in that run, and TESTS, where each test has a name, a suite, the failure message and its retries. TOTAL is the size of the whole suite, which only the pass rate uses. The change of each test is worked out by comparing the two runs you pick.

How is a change decided?

A test that failed in the candidate and passed in the baseline is Regressed, one that failed in the baseline and passes now is Fixed, and one that failed in both is Still failing. Tests that did the same in both runs are not listed. Picking the same run on both sides shows an empty state that says so.

What does quarantine do?

It removes the test from the pass rate in the header and the status line: the figure is the share of the suite that passed, leaving quarantined tests out of both sides. The switch only changes this page; it does not skip the test in your runner, so wire it to your own list of quarantined tests.

Does filtering move the panel?

No. The table sits in a region of fixed height that scrolls, with a sticky header, and the count strip shows how many tests each filter would list. Choosing a filter closes any open details and announces how many tests are shown.

What stays local, and how do I wire it for real?

Everything: the runs and messages are typed and no test was run. Feed the runs from your CI provider's test reports, keep the message of the first failing assertion, and store the quarantine list where your runner can read it.

How does it look on a phone?

The two selects stack, the change word moves under the test name, and the Quarantined switch stays at the end of each row.