Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Test Coverage Dashboard Block for Svelte

A tree of source folders and files with the share of lines covered, over the chosen file as numbered code with uncovered lines marked, Previous and Next uncovered buttons, and range chips that jump to a gap.

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

Find the lines that no test reaches, with this coverage panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner starts with a Tree View of three Covermap source folders and five files, each with the percentage of its lines covered. The file you pick is shown under it as numbered code in a mono face: a line no test reached has a heavy bar in the gutter and a muted ground, a partly covered branch has a half bar, and both are announced in words. Previous and Next uncovered scroll the code to each gap in turn, and the gaps are also chips ("Uncovered: 6-7, 11-12, 18") that jump straight to one. It is built from Tree View, Button and Guides. For engineering dashboards and pull request pages.

FAQ

How do I fill it with my files?

Edit SOURCES: each file has an id, a name, its folder and lines, each line written with hit, miss, part or plain (a line no test could reach, such as a brace or a comment). The percentages, the gaps, the folder totals and the header sentence are all counted from those lines.

How is the percentage counted?

Only lines a test could reach count. A covered line counts as one and a partly covered line, such as a branch where one side never ran, counts as half. Folders add up their files' lines rather than averaging the file percentages.

How do the buttons and chips work?

A gap is a run of consecutive lines that are uncovered or partly covered. Next uncovered goes to the following gap and wraps to the first, Previous goes back, and the chips jump to a gap directly. The current gap is outlined, the code region scrolls to it, and the status line says "Range 2 of 3: lines 11 to 12."

How is the coverage shown without colour?

By shape and words. A missed line has a full-height bar and its text starts with a hidden "Not covered", a partly covered line has a half-height bar and "Partly covered", and a legend under the code explains both marks. No state depends on a colour.

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

Everything: the lines are typed and nothing was run. Generate the lines and their states from your coverage report (an lcov or Istanbul file lists the hit count per line and the branches) and load the chosen file on demand.

How does it look on a phone?

The tree stays in a scrolling region, the code keeps its width and scrolls sideways inside its band, and the Previous and Next buttons sit under the file name.