Code Coverage Report: the Wallaby Way

Many of you have used several different code coverage solutions and reports. In this blog post we will explore some of the essential features of a code coverage report solution and introduce the way we have implemented them in wallaby.js app.

File tree

First, a good JavaScript code coverage report should display an annotated project source code tree. Folders is a natural way to organise your project code into modules or subsystems, and sometimes one may only be interested in focusing on a specific part of the project when working with code coverage metrics.

Not many code coverage solutions bother to provide the tree, and it is sad, because the project file tree with node annotations is a great way to explore the code coverage for individual modules.

Here’s an example from JetBrains IDEs:

Sortable table

Second, a good JavaScript code coverage report should provide an option to sort source files by coverage value, also by a number of total/covered branches/lines/functions, whatever criteria of the code coverage is used. It helps to quickly identify what files need more coverage.

For example, let’s take a look at the Istanbul code coverage report:

We are able to sort all folders, including any nested ones, by coverage, and also open an individual folder and sort its files.

JetBrains IDEs provide a separate view, where you can sort by coverage in any selected folder, but for any nested subfolders you’ll only get an aggregated coverage and have to open it separately to see its files. It’s just like a file tree, but sortable on each individual level.

The issue here in both mentioned ways to present the data is that you can only sort files located in an opened folder, and for the files in its subfolders you can only see/sort by the aggregated values. So it’s not possible to easily display a few least covered files in a whole project or a specific module folder with a few subfolders.

The Wallaby Way

In the new wallaby.js app coverage report we have decided to address the above mentioned issues and to efficiently combine both annotated project file tree and a selected folder/module sortable list of files.

The idea is very simple - you select a folder, and you get the full sortable table of all files in the folder and its subfolders (with a relative path where required).

This way you can both browse the tree structure, see the aggregated coverage values, select a folder/module, and easily find the least covered files no matter how deep your folder structure is.

You can read more about Wallaby.js App and its other features in our introductory blog post.

That’s it for the post, thanks for reading! Follow us on Twitter to avoid missing new wallaby.js app features announcements.