2013-03-08 185 views
5

我正在看TODO MVC AngularJS示例,並且我看到該應用程序被定義爲一個模塊。單元測試AngularJS模塊控制器

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

控制器裏面,我看到他們定義爲:

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

我的單元測試問題涉及......我怎麼寫該類的單元測試?

我已經試過了諸如:

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 
     }); 

    }); 
}); 

...但隨後 「控制器」 最終是null或undefined。

我是否需要修改TODO MVC應用程序,以便傳遞給todomvc.controller()的函數不是匿名的?

任何方向將不勝感激,因爲我是非常新的Angular。

回答

10

您需要使用$controller服務來對控制器進行單元測試。

基本上,你做這樣的事情:

var scope, ctrl; 

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

//use scope and ctrl as needed 

看到這裏的例子:https://github.com/angular/angular-phonecat/blob/master/test/unit/controllersSpec.js#L18

+0

我會檢查出來,謝謝! – arthurakay 2013-03-08 21:19:21

+0

這個例子的確有很大的幫助......但是我仍然得到一個「TodoCtrl is not defined」的錯誤,這讓我覺得我需要改變TODO MVC例子中控制器的寫法(使它更像你鏈接的例子)。但我在正確的軌道上,謝謝! – arthurakay 2013-03-08 21:30:37

+0

經過進一步檢查,在使用您的建議後,我必須使用「scope.addTodo()」而不是「ctrl.addTodo()」。謝謝! – arthurakay 2013-04-09 18:05:15