-
- -
-

Get your Frontend JavaScript Code Covered

-
-
-

So finally you're testing your frontend JavaScript code? Great! The more you -write tests, the more confident you are with your code… but how much precisely? -That's where code coverage might -help. -

-

The idea behind code coverage is to record which parts of your code (functions, - statements, conditionals and so on) have been executed by your test suite, - to compute metrics out of these data and usually to provide tools for navigating - and inspecting them.

-

Not a lot of frontend developers I know actually test their frontend code, - and I can barely imagine how many of them have ever setup code coverage… - Mostly because there are not many frontend-oriented tools in this area - I guess.

-

Actually I've only found one which provides an adapter for Mocha and - actually works…

- -

Blanket.js is an easy to install, easy to configure, -and easy to use JavaScript code coverage library that works both in-browser and -with nodejs. -

-

Its use is dead easy, adding Blanket support to your Mocha test suite - is just matter of adding this simple line to your HTML test file:

-
<script src="vendor/blanket.js"
-        data-cover-adapter="vendor/mocha-blanket.js"></script>
-
- -

Source files: blanket.js, - mocha-blanket.js -

-

As an example, let's reuse the silly Cow example we used - in a previous episode:

-
// cow.js
-(function(exports) {
-  "use strict";
-
-  function Cow(name) {
-    this.name = name || "Anon cow";
-  }
-  exports.Cow = Cow;
-
-  Cow.prototype = {
-    greets: function(target) {
-      if (!target)
-        throw new Error("missing target");
-      return this.name + " greets " + target;
-    }
-  };
-})(this);
-
- -

And its test suite, powered by Mocha and Chai:

-
var expect = chai.expect;
-
-describe("Cow", function() {
-  describe("constructor", function() {
-    it("should have a default name", function() {
-      var cow = new Cow();
-      expect(cow.name).to.equal("Anon cow");
-    });
-
-    it("should set cow's name if provided", function() {
-      var cow = new Cow("Kate");
-      expect(cow.name).to.equal("Kate");
-    });
-  });
-
-  describe("#greets", function() {
-    it("should greet passed target", function() {
-      var greetings = (new Cow("Kate")).greets("Baby");
-      expect(greetings).to.equal("Kate greets Baby");
-    });
-  });
-});
-
- -

Let's create the HTML test file for it, featuring Blanket and its adapter - for Mocha:

-
<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Test</title>
-  <link rel="stylesheet" media="all" href="vendor/mocha.css">
-</head>
-<body>
-  <div id="mocha"></div>
-  <div id="messages"></div>
-  <div id="fixtures"></div>
-  <script src="vendor/mocha.js"></script>
-  <script src="vendor/chai.js"></script>
-  <script src="vendor/blanket.js"
-          data-cover-adapter="vendor/mocha-blanket.js"></script>
-  <script>mocha.setup('bdd');</script>
-  <script src="cow.js" data-cover></script>
-  <script src="cow_test.js"></script>
-  <script>mocha.run();</script>
-</body>
-</html>
-
- -

Notes:

-
    -
  • Notice the data-cover attribute we added to the script tag - loading the source of our library;
    • -
  • The HTML test file must be served over HTTP for the adapter to - be loaded.
    • -
-

Running the tests now gives us something like this:

-

- screenshot -

-

As you can see, the report at the bottom highlights that we haven't actually - tested the case where an error is raised in case a target name is missing. - We've been informed of that, nothing more, nothing less. We simply know - we're missing a test here. Isn't this cool? I think so!

-

Just remember that code coverage will only bring you numbers and - raw information, not actual proofs that the whole of your code logic has - been actually covered. If you ask me, the best inputs you can get about - your code logic and implementation ever are the ones issued out of pair programming -sessions - and code reviews — - but that's another story.

-

So is code coverage silver bullet? No. Is it useful? Definitely. Happy testing! -

-
- -
- -
-