To Unit Test AngularJS with Jasmine in Visual Studio

In this post, we will create an AngularJS controller, then write and run unit tests for it in Visual Studio 2013 using Jasmine and Chutzpah.

1) Install the Chutzpah Visual Studio Extension. 

2) Create a new ASP.NET Web Application (Empty) Project

Click OK. On the next screen, choose "Empty" project and click OK again.

Click OK. On the next screen, choose "Empty" project and click OK again.

3) Install the AngularJS.Core nuget package. From the package manager console (ALT+T,N,O) run:

install-package AngularJS.Core

4) Install the Jasmine test framework nuget package. From the package manager console, run:

install-package JasmineTest

The JasmineTest package includes a controller for ASP.NET MVC and some examples. Since we created an Empty web project, JasmineController.cs will not compile. Remove the Controllers and jasmine-samples folders. We won't need them.

Delete the highlighted content.

Delete the highlighted content.

5) (Optional) Create a sanity test to make sure Jasmine and Chutzpah are working.

Since Jasmine is just one of many unit testing frameworks we could use, we should make sure it is working before we take unit test failures seriously. To do this, let's create a simple sanity test. Create a directory at the root of the project called "Tests". Add a new Javascript file to the "Tests" directory called "jasmineWorks.js". In "jasmineWorks.js", add the following code:

describe( 'jasmine works', function () {
    it( 'sanity check', function () {
        expect( 0 ).toBe( 0 );
    } );
} );

As soon as we add this test, Chutzpah should detect it in the Test Explorer (if Text Explorer is not visible, show by going to Test -> Windows -> Test Explorer). 

6) Add a simple AngularJS controller

Let's create a simple AngularJS controller and see how to test it. Add a new file to the "scripts" directory called "appController.js" and add the following code:

angular.module( 'app', [] ).controller( 'appController', function( $scope ) {
    $scope.value = 5;
} );

7) Add a unit test for AppController

Inside the "Tests" directory, add a new Javascript file called "appControllerSpec.js". In it, add the following code:

/// <reference path="D:\VSScratch\NgUTJasmine\NgUTJasmine\scripts/angular.js" />
/// <reference path="D:\VSScratch\NgUTJasmine\NgUTJasmine\scripts/angular-mocks.js" />
/// <reference path="D:\VSScratch\NgUTJasmine\NgUTJasmine\scripts/appController.js" />

describe( 'When using appController ', function () {
    //initialize Angular
    beforeEach( module( 'app' ) );
    //parse out the scope for use in our unit tests.
    var scope;
    beforeEach( inject( function ( $controller, $rootScope ) {
        scope = $rootScope.$new();
        var ctrl = $controller( 'appController', { $scope: scope } );
    } ) );

    it( 'initial value is 5', function () {
        expect( scope.value ).toBe( 5 );
    } );
} );

The three reference directives at the top are needed by Chutzpah (alternatively, you can define a Chutzpah config file). The test assertion needs access to the scope, so we have to intercept it and store it in the scope variable using Jasmine's beforeEach function. 

8) Run your tests

If everything went according to plan, you should see the new test show up in the Test Explorer, where you can run it as you would any other test. 

Huge thanks to Matthew Manela, the author of Chutzpah. You have created a really useful extension that I use every day.