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. 

To Unit Test Javascript with QUnit in Visual Studio

While Visual Studio (2013) is an excellent IDE, it lacks good native support for modern web development. Today, we will see how to unit test Javascript using Chutzpah and QUnit:

1) Install the Chutzpah Visual Studio Extension

In Visual Studio, go to Tools -&gt; Extensions and Updates.&nbsp;

In Visual Studio, go to Tools -> Extensions and Updates. 

Search Online for "Chutzpah" and install both the Test Adapter and Context Menu Extensions.

Search Online for "Chutzpah" and install both the Test Adapter and Context Menu Extensions.

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

On the next screen, choose "Empty"

On the next screen, choose "Empty"

3) Add a new Javascript file called calc.js with some simple logic in it:

//The functionality to test
function add( a, b ) {
    return a + b;
};

4) Add a second Javascript file called calcTests.js. At the top of the file, add a reference to the calc.js file so Visual Studio can locate the code-under-test like so:

/// <reference path="{path}" />
/// replace {path} with the path to your calc.js

5) Add test cases by using the "test" function defined by QUnit

/// <reference path="d:\vsprojects\JsUnitTests\JsUnitTests\calc.js" />

test( "Adding 0 and 0", function () {
    var result = add( 0, 0 );
    equal( result, 0, "should equal 0" );
} );

test( "Adding 4 and 5", function () {
    var result = add( 4, 5 );
    equal( result, 9, "should equal 9" );
} );

6) Run the Unit Tests from the Test Explorer by clicking "Run All"

If the Test Explorer is not visible, you can show it again from the Main Menu by going to Test -&gt; Windows -&gt; Test Explorer

If the Test Explorer is not visible, you can show it again from the Main Menu by going to Test -> Windows -> Test Explorer

In future posts, we will repeat this exercise with Jasmine and Mocha, two other popular Javascript unit testing frameworks. Luckily, the excellent Chutzpah extension works with all three.