Search code examples
javascriptangularjsvisual-studiojasminechutzpah

Using Jasmine and Chutzpah to unit test a AngularJs controller

I am programming with VS2013 and would like to make unit tests on my AngularJs controllers. For example I have a taController.js that looks like:

var module = angular.module("MyApp", []);

var TAController = ["$scope", 
function ($scope) {
    $scope.myNumber = 2;
    $scope.add = function (number) {
        $scope.myNumber = $scope.myNumber + number;
    };
}];

And an HTML page that consumes this that looks like:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="MyApp">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/taController.js"></script>
</head>
<body>
    <div id="myDiv" data-ng-controller="TAController">
        {{myNumber}}<br />
        <a href="" ng-click="add(2)">Add 2</a><br />
    </div>
</body>
</html>

I want to create a unit test using Jasmine and Chutzpah. I created an AngularTest.js in the specs directory of my test project that looks like this 

/// <reference path="../scripts/jasmine.js" />
/// <reference path="../../unittestingwithjasmine/scripts/tacontroller.js" />

describe("My Tacontroller", function () {
    var element;
    var myScope;

    beforeEach(inject(function($scope) {
        myScope = $scope;
    }));

    it("should be able to add 2 plus 2", function () {
        myScope.add(2)
        expect(myScope.myNumber).toBe(4);
    });
});

I think there are a number of mistakes in the above code. The first of which being Test Failed – My Tacontrooler encountered a declaration exception. Message: RefferenceError: Can’t find cariable: inject in file:///C....../specs/angulaertest.js (line 10)

My question is how can I write my AngularTest.js to correctly test by add function on my Tacontroller

Solution

  • The mistake was that I needed to include angular and angular-mocks. Also I needed to get the scope from the root scope. The following code worked

    /// <reference path="../scripts/jasmine.js" />
/// <reference path="../scripts/angular.js" />
/// <reference path="../scripts/angular-mocks.js" />

/// <reference path="../../unittestingwithjasmine/scripts/tacontroller.js" />

describe("My Tacontroller", function () {

    var myScope;

    beforeEach(inject(function($rootScope, $httpBackend, $controller) {

        myScope = $rootScope.$new();

        $controller('TAController', { $scope: myScope});

    }));

    it("should be able to add 2 plus 2", function () {
        myScope.add(2);
        expect(myScope.myNumber).toBe(4);
    });
});

    I have since found 2 very good blog entries that demonstrate this and how to take it to the next step http://odetocode.com/blogs/scott/archive/2013/06/10/simple-unit-tests-with-angularjs.aspx http://odetocode.com/blogs/scott/archive/2013/06/11/angularjs-tests-with-an-http-mock.aspx

    I hope this helps others...