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
Answer
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"}
]
}