13

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

Improve this question

2 Answers 2

Reset to default
11

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is what I have been looking for some time :)
11

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.

Improve this answer

1 Comment

For AngularJS 1.2.5, angular-mocks.js is available as hosted library here ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-mocks.js, so, no need to use the code.angularjs.org website.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.