Using Jasmine and Chutzpah to unit test a AngularJs controller

StackOverflow https://stackoverflow.com/questions/23624843

Pergunta

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

Foi útil?

Solução 2

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...

Outras dicas

Where is inject defined? You need to let Chutzpah know where to find all of your dependencies. The recommended way to do this is using a chutzpah.json file and its references setting. You can read about setting up references in Chutzpah here

An example of a chutzpah.json looks like:

{
   "Framework": "jasmine",
   "References" : [
       {"Path" : "someReference.js" }, 
       {"Path" : "someCode.js" }
   ],
   "Tests" : [
     {"Include": "tests/*.js"}
   ]
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top