Test Coverage Dashboard Block for Vue

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.

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.

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."

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.

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.

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.