Adding code coverage checking

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 6 years ago

Now that we have code coverage being reported, let's make sure that nobody commits code which drops code coverage below our standard by adding a check-coverage script that utilizes istanbul's built-in check-coverage command.

[00:00] Now that we have coverage reporting, we want to make sure that our coverage doesn't drop below a certain level. If we run NPM run test single, that we get our coverage reporting. We'll see that we have 100 percent coverage on statements, branches, functions, and lines. That's awesome, and it's actually quite easy to accomplish in such a small library.

[00:20] In bigger libraries or in projects, it's a little bit more difficult to get that kind of coverage, and so having a standard that you can't drop below is a really good thing. As we add features to our Star Wars named library, we're going to want to make sure that we don't drop in coverage, but that we always test the new features that come in.

[00:39] Let's go ahead and add a git hook using the g-hooks that we installed earlier for our pre-commit to make sure that we don't drop in coverage. We're going to add a new script, and I'll just enter it in here now. NPM run check coverage. Then let's go ahead and go to our scripts, and we'll add a check coverage script. This one will simply be Istanbul check coverage. This is where we'll specify what levels our coverage should be at.

[01:12] For statements, we want it to be 100 percent. For branches, we want 100 percent. For functions, we want 100 percent, and for lines, we want 100 percent. Now if we run NPM run check coverage, then it will succeed if there's nothing wrong with our coverage.

[01:35] Let's go ahead and drop our coverage a little bit. If I add a random function in here, do something, and we considered out, log hi, our tests aren't running this, our codes aren't running this, this function won't be covered.

[01:49] Now if I run NPM run test single to get our coverage reporting, you'll see that our functions are down to 50 percent. Now if we run NPM run check coverage, we're going to get a big error. It will explain that our coverage isn't to the standard that we specified.

[02:11] This is part of our pre-commit git hook, we won't be able to commit to our code anything that drops below our coverage standard. Which in our case with this small library is 100 percent across the board, that is how you add coverage checking to your library.

[02:29] Because we have this now, we want to actually add this to our Travis, that not only will the test run, but we make sure that we have everything covered before we release any new version. We'll have NPM run check coverage and that will be part of our Travis build.

[02:48] In review, all that we need to do is we create a script called check coverage. We use Istanbul's built-in check coverage functionality, and we specify our standard for statements, branches, functions, and lines.

[03:01] Then we also added the check coverage command to our pre-commit git hooks, nobody can commit coverage that is below our standard. In the case that something ever does happen, we have this in our Travis as well to make sure that we don't really send anything that is below our coverage standard. That's how you add coverage checking to your library.

janppires
janppires
~ 8 years ago

Hi Kent!

How can we integrate this coverage checking with webpack?

I have been searching but I haven't found anything. =(

Thanks!

janppires
janppires
~ 8 years ago

I got the answer myself.

In an webpack usage, we still need to install "istanbul" dependency, just to run the command "istanbul check-coverage build/reports/web-coverage/coverage-final.json --statements 100 --branches 100 --functions 100 --lines 100" agains the "coverage-final.json" produced by karma-coverage. So it's important to have reporter type as "json" in the reporters array of coverageReporter karma.config file.

coverageReporter : {
          dir: 'build/reports/web-coverage',
          reporters: [
              {type: 'json', subdir: '.'},
          ]
      },

Cheers

Markdown supported.
Become a member to join the discussionEnroll Today