Last post we talked about how to setup Karma with mocha and chai. This post we see some particularities in setting up Karma to test Angular apps.

Since Karma loads the JavaScript files for us, we won't include an index.html to bootstrap the Angular app or to initialize some Angular modules. This is nice but at the same time poses a probem. By only loading the files, we can not use Angular's dependency injection system when testing code.

We use angular-mocks to circumvent this problem.

First, install angular mocks.

bower install angular-mocks --save-dev

Modify karma.config.js to include Angular mocks.

files: [
    "node_modules/chai/chai.js",
    "src/vendor/angular/angular.js",
    "src/vendor/angular-mocks/angular-mocks.js",
    "src/js/app.js",
    "tests/**/*.js"
],

Finally, ensure the module to test is ready by including the following in each test:

beforeEach(angular.mock.module("APP"))

This will make the specific module ready to be tested. So all controllers and services defined on the module are available for testing.

You'll find an example on github.