Menu
I am Jasmine/AngularJS unit testing newbie. I created a simple angular app to add two numbers so that I can learn how to write unit tests for Angular App. The Angular Doc on unit test is incomplete.Based on the blogs and stack overflow answers, I build my first test and I am running into 'injector' undefined error. I am using Jasmine framework for the unit testing.
HTML
<body>
<div ng-controller="additionCtrl">
First Number: <input ng-model="NumberOne"/><br/>
Second Number: <input ng-model="NumberTwo"/>
<button ng-click="add(NumberOne, NumberTwo)">Add</button><br/>
Result: {{Result}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="Scripts/additionCtrl.js"></script>
</body>
Controller:
function additionCtrl($scope) {
$scope.NumberOne = 0;
$scope.NumberTwo = 0;
$scope.Result = 0;
$scope.add = function (a, b) {
};
}
Jasmine spec file.
describe("Addition", function () {
var $scope, ctrl;
beforeEach(inject(function ($rootScope, $controller) {
this.scope = $rootScope.$new();
ctrl = $controller('additionCtrl', {
$scope: this.scope
});
}));
it("should add two integer numbers.", inject(function ($controller) {
expect(ctrl.add(2, 3)).toEqual(5);
}));
});
Specrunner.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-mocks.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="../App/Scripts/additionCtrl.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="spec/addition.spec.js"></script>
This is a failing test and once the test fails with the expected result then I can modify the code to make it pass, but I am facing the problem with somehow angular mock is not getting injector.
I saw an example where I can newup a controller instead of using injector, but I would like to try to learn on using injector so that I am set up more complex tests.
I might be missing something simple here. Please direct me to any write up I might have missed.
Thanks
242
For future reference here's a Plunker with a full unit test setup (for the answer to your question I was about to post)
http://plnkr.co/edit/KZGKM6
Useful to have this setup available for sharing test scenarios.
154
Found the problem, the url I was using to access angular-mock was wrong. I changed it to "http://code.angularjs.org/1.0.6/angular-mocks.js" and also changed the order of the script tags to
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular-mocks.js"></script>
now it is failing on the method as it is supposed to be.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With