Unit Testing Your AngularJS Applications With Jasmine

Since the role of JavaScript is increasing day by day, In my recent projects, currently we are using Dojo and AngularJS part SOA based projects. My managers are forcing me to use TDD style of development including JavaScript code. I have been able to find a few interesting tools to support Test Driven Development (TDD) with JavaScript and that are also well integrated with Visual Studio 2012/2013. I want to share that with you in this article.

Currently used tools in my JavaScript projects for Unit Testing:

• Jasmine: Jasmine is a behavior-driven development framework ( BDD ) for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
  
  
• Test Runner: Apart from the selection of testing framework, now need to choose a task runner. All the below examples “Karma” is used as test runner.
  
  
• Angular- mock: Angular provides its own mocking framework which helps in mocking the dependent objects.

Test-Driven Development (TDD)



Mix of BDD ( Behaviour-Driven Development ) and TDD ( Test-Driven Development ).



Advantages of BDD (Behaviour-Driven Development ):

• Common understanding
• Externally visible
• Implementation independent
• Executable requirements
• Living documentation
• Specification by example

AngularJS can be tested in a lot of ways and multiple testing frameworks now available in market. But first choice in today's market is “Jasmine”.

Apart from the selection of testing framework, now need to choose a task runner. But choice for task runner along with testing framework “Jasmine” is Karma. The following examples run by test runner using tool name with “Karma”.

How to Setup the Environment

1. Create an ASP.NET Project (Created empty ASP.NET MVC Project with Unit Tests).
   
   
   
   
2. Install Jasmine from the Nuget package manager.
   
   
   
   
3. Install Unit Test runner Karma from Nuget package manager.
   
   
   
   
4. Sample project structure in VS 2013.
   
   

Before writing test let’s understand the following three items which are minimum to write any unit test using Jasmine.

1. Describe: This is a global function that takes string and function as parameter which represents a suite of test. In another way, it provides us a way to group multiple tests.
   
   
2. beforeEach and afterEach: Need to execute some code— before and after each spec similar to NUnit test method initialize the test cases ( init ) and cleanup some test data etc. (cleanup).
   
   
3. It: This is another function which is written inside global function and takes two parameter as above string and function and this function is actual test.
   
   
4. Expect: It takes the function that need to be tested as parameter and provide a list of matchers to match the result.

Example of Unit Test

describe("A Test Suite Name", function() {
   it("can add two positive integers", function() {
      expect(calculator.add(5, 12)).toEqual(17);
   });
});

Sample Jasmine Test

describe("CreateLayerLauncherCtrl: specifications", function ()
{
    "use strict";
    var scope, rootScope, controller, mapConfigSrvc, $q;
    beforeEach(module("connect"));
    beforeEach(module(function ($provide, $translateProvider)
    {
        $provide.value('$state',
        {
            go: function () {}
        });
        $translateProvider.useLoader();
        $translateProvider.translations('en',
        {});
        $translateProvider.use('en');
    }));
    it("should check if annotation tools, thematic maps creation, querying functionality are disabled", function ()
    {
        var $scope = {};
        controller('createLayerLauncherCtrl',
        {
            $scope: $scope,
            mapConfigSrvc: mapConfigSrvc
        });
        rootScope.$digest();
        expect($scope.annotationDisabled).toBeTruthy();
    });
});
beforeEach(inject(function ($injector)
{
    rootScope = $injector.get('$rootScope');
    scope = rootScope.$new();
    controller = $injector.get('$controller');
    mapConfigSrvc = $injector.get('mapConfigSrvc');
    $q = $injector.get('$q');
    var configObj = {
        disableAnnotation: true,
        disableThematic: true,
        mapView:
        {
            disableQueryView: "true"
        }
    };
    spyOn(mapConfigSrvc, 'getConfig').and.returnValue($q.when(configObj));
}));

My AngularJS app

angular.module("connect.panel").controller("createLayerLauncherCtrl", ["$scope", "mapConfigSrvc",
    function ($scope, mapConfigSrvc)
    {
        $scope.annotationDisabled = false;
        $scope.endUserThematicDisabled = false;
        $scope.disableQueryView = false;
        mapConfigSrvc.getConfig().then(function (config)
        {
            $scope.annotationDisabled = config.disableAnnotation;
            $scope.endUserThematicDisabled = config.disableThematic;
            $scope.disableQueryView = config.mapView.disableQueryView === "true" ? true : false;
        });
    }
]);

Run your test with task runner using Karma from command line:

# Start Karma using your configuration:
karma start MyTest.conf.js

Or directly use the following command to run specific JavaScript file.

karma start my.conf.js --log-level debug --single-run

Sample MyTest.conf.js

// Karma configuration
module.exports = function (config)
{
    config.set(
    {
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',
        // frameworks to use
        frameworks: ['jasmine'],
        // list of files / patterns to load in the browser
        files: ['TestScripts/DefaultTest.js.js'],
        // list of files to exclude
        exclude: ['Scripts/*.min.js'],
        // preprocess matching files before serving them to the browser
        preprocessors:
        {},
        // test results reporter to use
        // possible values: 'dots', 'progress'
        reporters: ['progress', 'xml'],
        // web server port
        port: 9876,
        // enable / disable colors in the output (reporters and logs)
        colors: true,
        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,
        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: false,
        // start these browsers
        browsers: ['PhantomJS'],
        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: true
    });
};

Conclusion

AngularJS can be tested in a lot of ways, by lots of testing frameworks. Jasmine – karma is the best combination to make your tests run on platform independent and well suited for mobile development also. Install Karma and Jasmine on NodeJS using NPM (Node Package Manager) using the following commands:

 

• npm install karma --save-dev.
• npm install karma-jasmine --save-dev.