Unit Testing with Karma

Karma is a unit testing framework that works especially nicely with Angular. A unit test will test a single tiny piece of our app. We might write a test for a single controller for example. Unit tests generally don’t care about the template, they only test the code. We can write unit tests for template code, but this is generally a little more complex.

In this section we are going to use Karma to unit test a controller.

Installation

First up we need to install Karma. Karma is a NodeJS module, and Node is a JavaScript runtime that runs in your command line. We will need to have Node installed to run Karma. If you don’t have it, you can grab it from here:

http://nodejs.org/

test your installation by typing node at a command line.

NPM

Once you have Node, you will we use NPM (Node Package Manager) to install a few Karma packages, like so:

npm init
npm install karma --save-dev
npm install -g karma-cli
npm install jasmine-core --save-dev
npm install karma-jasmine --save-dev
npm install karma-chrome-launcher --save-dev

Depending on your exact version of Node and Karma, NPM may complain about missing dependencies. If you see any red error messages, go and get those dependencies too.

Once Karma is installed, you should be able to type karma at a command line and see a helpful message.

Initialise Karma

Karma needs a karma.conf.js file in the root of your project directory to tell it how to work. Use the command line to navigate to the folder in which you want to work. Now type karma init. You will be taken through a wizard which will create the karma.conf.js file. Keep all the defaults for now.

karma init

We can now start the Karma runner using:

karma start

Specifying files

Karma may be running, but until we give it some files to test, nothing will happen. We need to tell it where to find our JavaScript. Open up the karma.conf.js file, look for the files attribute, and change it like so:

files: ["lib/*.js", "js/*.js", "specs/angular-mocks.js", "specs/*.js"];

This is a list of file paths to look at in order. Karma will use this to create a complete version of our app.

Writing a test

A Karma test contains one or more describe blocks, which can be nested. These define groups of functionality. Inside these are our tests, which are defined using the it function. These tests contain numerous expectations.

If a test fails, the strings in the describe and it blocks will be used to create an error message.

describe("Maths in the universe", function () {
  it("should be the case that 1 plus 1 is 2", function () {
    expect(1 + 1).toEqual(2);
  });
});

Testing the actual app.

To test an Angular controller, we have to do a little more work. Remember that the main purpose of the controller is to initialise $scope. If we want to test functions on our controller, we must get hold of a$scope object, use the controller to initialise it, and then check that it does what we expect it to do.

We do this in a beforeEach block. This will build a new $scope object before each test is executed:

describe("MyController", function () {
  // Load the module containing MyController
  beforeEach(module("app"));

  var scope;
  // inject the $controller and $rootScope services
  beforeEach(inject(function ($controller, $rootScope) {
    // Create a new scope from $rootScope
    scope = $rootScope.$new();
    // Instantiate the controller
    $controller("myController", {
      $scope: scope,
    });
  }));

  it("should have a hamster", function () {
    expect(scope.hamster).toBeDefined();
  });

  it("should say hello to Hammy", function () {
    scope.sayHello();
    expect(scope.greeting).toBe("Hello Hammy");
  });
});