April 09 2015

Unit Testing in AngularJS with Mocha, Chai, Sinon & ngMock

When I started learning about unit testing in AngularJS one of the first things I noticed was the number of different libraries needed to get the job done (Mocha, Chai, Sinon, ngMock, Karma, Istanbul) and I found it difficult getting my head around exactly what does what, so in case there's anybody else going through the same thing I thought I'd share my experience.

I'm assuming you're already familiar with the concept of unit testing and it's benefits so I'll just jump straight into the nitty gritty.

AngularJS Unit Testing Tools/Libraries

I decided to go with the following set of tools for writing my unit tests, but most of these have various alternatives and can be used in multiple combinations:

Because the usage of these libraries is so intertwined I thought the best way to show how they work is with a complete example that highlights which parts are handled by each library.

To start with here's a very simple AngularJS service with just one method that logs a message, admittedly not the most useful service in the world but it'll do for our purposes.

An example AngularJS service / factory to be unit tested

simpleService.js

And here's the unit test for the simple angular service showing which parts are handled by each of the unit testing libraries listed above.

An AngularJS unit test / spec for testing the example service

simpleService.spec.js

See in action on Plunker at http://plnkr.co/edit/9aBcNM?p=preview.

 

Additional AngularJS Unit Testing Tools

There are a couple of other tools worth mentioning for completeness, they're not used for writing the actual tests like the above but help with other parts of the process:

 

Karma - AngularJS Unit Test Runner

Karma is the de-facto test runner used to run unit tests for AngularJS, it’s a command line application that runs on NodeJS and is installed using NPM (node package manager).

Tests can technically be run directly in a browser without the need for a test runner, however some of the benefits that Karma brings are:

  • It can monitor files for any changes and automatically run all tests when anything is updated, so you don’t need to remember to run your tests manually
  • It can run tests in multiple browsers at the same time
  • It’s run from the command line so it can be easily integrated as part of an automated build process

All of the configuration settings for tests are located in the “karma.conf.js” file, and include things like:

  • which testing framework to load (e.g. Mocha)
  • a list of other plugins to load (e.g. Chai, Sinon, Istanbul etc)
  • the list of test files and application files to include and exclude
  • which browser/s to use for running the tests (e.g. Chrome, PhantomJS)
  • various other bits and pieces of information, for full details check out the karma docs

To start karma:

  1. Open a command window and navigate to the folder in your project that contains your karma.conf.js file
  2. Run the command: karma start

 

Istanbul - AngularJS Unit Test Code Coverage Report Generator

Istanbul is a code coverage tool for JavaScript, it can be used to generate HTML reports showing the percentage of coverage you have throughout your application and lets you drill down to exactly which lines are not covered.

If you have sections of your code that aren't testable or that you want to exclude from the coverage report you can use the comment /* istanbul ignore next */ above the block of code you want ignored like this:

/* istanbul ignore next */
function functionToIgnore() {

    ...

}

 

RequireJS + AngularJS

RequireJS is used to asynchronously load javascript files and dependencies, and to wrap code in modules that are used throughout the application.

While this library isn't used specifically for unit testing, if your project uses RequireJS then your unit tests will need to be setup differently, to see a plunk of the above example implemented with RequireJS go to http://plnkr.co/edit/JTL79b?p=preview

 

AngularJS Development Sydney

Feel free to contact me if you're looking for web development or AngularJS development or consulting services in Sydney Australia, I also provide remote contracting services for clients outside Sydney.


Sponsored by