Unit Testing AngularJS module controller

Question

I'm looking at the TODO MVC AngularJS example, and I see the application is defined as a module.

var todomvc = angular.module('todomvc', []);

Inside the controllers, I see them defined as:

todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage, filterFilter) {
    //...
});

My question deals with unit testing... how do I write a unit test for that class?

I've tried things like:

describe('TodoCtrl', function () {
    var controller;

    beforeEach(function () {
        controller = todomvc.TodoCtrl;
    });

    afterEach(function() {
        controller = null;
    });

    describe('addTodo() method', function() {
        console.log(controller)
        it('should do something', function () {
            expect(typeof controller.addTodo).toBe(true); //should fail
        });

    });
});

...but then "controller" ends up being null or undefined.

Do I need to modify the TODO MVC app so that the function passed to todomvc.controller() isn't anonymous?

Any direction would be appreciated as I'm very new to Angular.

dnc253 · Accepted Answer · 2013-05-20 15:30:39Z

10

You need to used the $controller service to unit test the controller.

Basically, you do something like this:

var scope, ctrl;

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

//use scope and ctrl as needed

See the example here: https://github.com/angular/angular-phonecat/blob/master/test/unit/controllersSpec.js#L18

edited May 20, 2013 at 15:30

answered Mar 8, 2013 at 21:13

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

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

4 Comments

arthurakay Over a year ago

That example does help a great deal... but I still get a "TodoCtrl is not defined" error, which makes me think I need to change the way in which the controller in the TODO MVC example is written (making it more like the example you linked). But I'm on the right track, thanks!

arthurakay Over a year ago

Upon further inspection, I have to use "scope.addTodo()" instead of "ctrl.addTodo()" after using your suggestion. Thanks!

Tyson Nero Over a year ago

In my case I had to add quotes around the controller name: ctrl = $controller('TodoCtrl', {$scope: scope});

dnc253 Over a year ago

When using a global function as a controller, you don't need quotes, but using quotes should work for the global function and when registering the controller via the controller module function. I've updated the answer to use quotes. Thanks.

Collectives™ on Stack Overflow

Unit Testing AngularJS module controller

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related