Using jsTestDriver.js and jasmine.js to test angular

how_to.md

Context

• You are currently using jsTestDriver as your test runner and assert engine for all vanilla javascript objects. In order to test angular controllers we use jasmine.js version 1.3. Jasmine is another testing framework that sits on top of jsTestDriver. All jasmine versions past 2.0 seem to break some other dependencies such as angular-mocks.js.
• The order of the includes in the configuration file matters! jasmine.js and JasmineAdapter.js must be before angular.js and angular-mocks.js.
• The angular controller test cases must be declared after angular and angular mocks.
• All angular controller tests use jsTestDriver as the test runner, and jasmine as the assert engine.

Adding Angular Controllers to test suite

• Open up jsTestDriver.conf or javascript_testing_config.jstd. Both are YAML-like configuration files and can be used interchangeably.
• If your module has dependencies on other modules, include their full paths under the 'load' header before including the path to your new module.
• Add the full path to your angular controller test cases under the 'test' heading in the configuration file.
• You can run jsTestDriver from the command line, or from their many plugins for various IDE's.

Writing tests for Angular Controllers

• As mentioned previously, angular test cases use jsTestDriver as the test runner, and jasmine as the assert engine. A full tutorial on how to use jasmine.js is included here. Although their documentation is very good, it does not show us how to get an instance of our angular controller.
• To get an instance of our angular controller we use the angular-mocks module() function. As long as we have included the path of the 'fooApp' module in the configuration file, and the order of the includes is correct, we just need to pass the module function the name of the module we would like.
• Then we need to specify which controller we want. We again use angular-mocks inject() function and pass it an anonymous function containing $rootScope and $controller. We create a new scope and pass $controller the name of the controller we want, and the new scope. We now have access to the controller. We use the scope variable to access its members.
• To test individual functions of our controller we use the 'it()' function. We pass it the name of our test and an anonymous function containing the test. A list of jasmines asserts can be found here. Below is a full example.

describe('fooApp', function () {

    /* Get the fooApp Module */
    beforeEach(module('fooApp'));

    describe('barCtrl', function(){
        var scope;

        /* Get a specified controller on the fooApp Module */
        beforeEach(inject(function($rootScope, $controller) {
            scope = $rootScope.$new();
            $controller("barCtrl", {$scope: scope});
        }));

        it('Test for foo-bar-ness', function(){
            var result = scope.foo_bar_ness(testCase);
            expect(result).toEqual(true);
        });
    });
});

To see the results of your new tests you can run jsTestDriver from the command line as seen here, or from their many plugins for various IDE's.