How does AngularJS dependency injection work with controller testing?

Question

I'm trying to write tests for some AngularJS code, but can't even get a hello world to run. Suppose my code looks like this:

var myApp = angular.module("myApp", [])

myApp.controller("MyCtrl", function ($scope) {
    $scope.hello = "world"
})

Then the angular docs here suggest that something like this (using jasmine) should work:

describe("my controller", function () {
    it("should say hello", function () {
        var $scope
        inject(function ($rootScope, $controller) {
            $scope = $rootScope.$new()
            $controller('MyCtrl', {$scope: $scope})
        })
        expect($scope.hello).toBe("world")
    }
}

Unfortunately, inject does not exist, and there are no hints in the docs as to where to get it. Thus the approach in the docs doesn't work.

Looking slightly farther afield, we find $injector, which can be created by angular.injector. From those docs, it's fairly clear that inject(f) should be $injector.invoke(f). So we stick this at the top of our code and make the change:

$injector = angular.injector(["myApp"])

Unfortunately, this gives the error "Uncaught Error: Unknown provider: $controllerProvider from myApp", which my google-fu seems unable to elucidate.

I had been using this ($injector) previously when I was only testing services, and it works perfectly. It is only when mixed with a controller definition that I get the error. It can handle the controller definition, or the $injector, but not both. To me this suggests some kind of priority conflict or double-initialization, but I can't figure it out.

So what does the "Unknown provider..." error mean, and how do I get my hello world controller test working? If someone can help sort me out, that would be great.

Don't you forget to include an angular-mocks.js file which provide global module and inject functions? — just-boris
– just-boris, Commented Feb 1, 2014 at 19:40
@just-boris Thanks. They sure made that hard to find, but it solved the problem. Unfortunately it still doesn't work; I get "Uncaught TypeError: Object [object Object] has no method 'off'" from a line in angular-mocks.js — WolfTivy
– WolfTivy, Commented Feb 1, 2014 at 20:13

Jesus Rodriguez · Accepted Answer · 2014-02-01 20:40:22Z

2

I created for you an skeleton you could use for that concrete controller.

describe('my controller', function() {
  var $scope;

  beforeEach(module('app'));

  beforeEach(inject(function($rootScope, $controller) {
    $scope = $rootScope.$new();
    $controller('MyCtrl', { $scope: $scope });
  }));

  it('should contain world', function() {
    expect($scope.hello).toBe('world');
  });

});

Before each test, you inject your app module and before each test, you creates a new scope and instantiates your controller. Then you just need to write as much tests as you need.

We create a new scope in every tests to have a fresh state. We don't want to modify some $scope in one test and then have another one failing because you modified your $scope earlier.

Plunker: http://plnkr.co/edit/4hHqdsvnVwyUhiezpdhW?p=preview

Write a comment if you have any question.

answered Feb 1, 2014 at 20:40

Jesus Rodriguez

12k9 gold badges66 silver badges89 bronze badges

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

3 Comments

WolfTivy Over a year ago

You missed the part where we need angular-mocks.js. Otherwise, I did this, but now it gives me Uncaught TypeError: Object [object Object] has no method 'off', originating from line 1973 in angular-mocks: injector.get('$rootElement').off();. Do you know what that means?

Jesus Rodriguez Over a year ago

Actually I am not missing it. It is in the plunker, just below angular. I need to see all your test, from your snippet I can't help you. I need more info.

WolfTivy Over a year ago

Whoops, you are right. Sorry. Your code works for me, thank you. The issue I was getting looks like it was due to versioning: I had angular and angular-mocks from different versions. Works now.

Collectives™ on Stack Overflow

How does AngularJS dependency injection work with controller testing?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related