Friday, July 4, 2014

New Feature and Refactoring Freedom: Determining Code Coverage in Sails.js

Happy Independence Day!  To celebrate the USA's birthday, I offer a quick post on exercising your freedom as a developer to implement new features or refactor code without flying blind or worrying what you may have missed or broken.  I'm of course talking about some code coverage in Sails.js.

In my prior post on Web API development in Sails.js, we utilized Grunt and Mocha as the primary tools for our unit tests.  However, what we did not review was how to target what you missed in your unit tests.  After all, what good are running unit tests if you don't know where your gaps lie?




Istanbul (not Constantinople) to the rescue!  Istanbul is a fantastic JavaScript library which produces all manners of code coverage report formats.  For the purpose of this exercise, we will simply have it generate a /coverage folder in our root with nicely formatted HTML showing us where our code coverage gaps are.

Referring back to our sample Sails.js project, the AgileMovieDB API, we'll need to first go into the command line and type in these commands to install Istanbul and the grunt-mocha-istanbul Grunt task library.

  • sudo npm install -g istanbul
  • sudo npm install grunt-mocha-istanbul --save-dev
The second bit will save a dev dependency of grunt-mocha-istanbul to your package.json.  Fantastic.

Now, we need to do a little bit of Gruntfile.js hacking.

Gruntfile.js: mocha_istanbul task setup in initConfig
mocha_istanbul: {
            coverage: {
                src: 'tests', // the folder, not the files,
                options: {
                    mask: '**/*.spec.js'
                }
            },
            coveralls: {
                src: 'tests', // the folder, not the files
                options: {
                    coverage:true,
                    check: {
                        lines: 75,
                        statements: 75
                    },
                    root: './api', // define where the cover task should consider the root of libraries that are covered by tests
                    reportFormats: ['html']
                }
            }
        },


Gruntfile.js: Register a Coverage Task
// Code Coverage with Mocha and Istanbul (not Constantinople)
    grunt.registerTask('coverage', ['mocha_istanbul:coverage']);


Congratulations, folks, we've got code coverage in our Sails.js application.  How do we run it?  Fire up the command line and type in this command: grunt coverage.

You'll notice a new /coverage folder in the root of the /Server folder.  Expand it, then expand the lcov-report folder.  Open up index.html in your favorite browser, and you should see the following output:


The links for each of the folders are hot, so let's examine one of our managers/ that's giving us some code coverage issues.


As you can see, Istanbul gives us some fantastic qualitative and quantitative measures.  What's highlighted in red is what was not tested, and the number to the right of the line number indicates the # of times that line of code was hit.  Brilliant.

Using Istanbul code coverage with Mocha unit tests will enable us the freedom to implement features and refactor our Sails.js code without the worry of "flying blind" as our software evolves.  I hope this post proves useful in your continuing quest for quality MEAN stack development using Sails.js for the Web API!

1 comment:

john said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me..
I am a regular follower of your blog. Really very informative post you shared here.
Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai .
or Javascript Training in Chennai.
Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai