如何使用Mocha测试Angular.js中使用angular.module()。controller()创建的控制器

时间:2012-11-27 14:04:56

标签: unit-testing controller angularjs mocha

我有一个用angular.module()。controller()创建的控制器,就像在这种情况下一样

myModule = angular.module('myApp.controllers', [])
                   .controller('testCtrl', ['$scope', function($scope){
                           $scope.test = 'this is a test';
                    }]);

现在,我需要使用mocha来测试我的控制器是否正常工作。在Angular中,有一些示例将控制器声明为全局函数(例如http://docs.angularjs.org/tutorial/step_04),因此它们使用

function PhoneListCtrl() {...}
.....
beforeEach(function() {
   scope = {},
   ctrl = new PhoneListCtrl(scope);
});

it('shod test whatever PhoneListCtrl does ', function() {
   expect(scope.someProp).toBe('whateverValue');
});    

所以问题是:

1)如何对使用angular.module()声明的控制器进行类似的测试.controller()

2)如何使用Mocha

2 个答案:

答案 0 :(得分:28)

AngularJS提供了一些模拟,可以在测试时为依赖注入提供一些有用的功能。

实施例

(在茉莉花中)

让我们说我们想要从official tutorial执行第一个测试,我们已经定义了一个控制器模块。 (你可以命名模块名称,但我想保持简单)

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

Controllers.controller('PhoneListCtrl', ['$scope', function($scope){
    $scope.phones = [{name: "Nexus S", snippet: "Fast..."},
                     {name: "Motorola XOOM...", snippet: "The Next...."},
                     {name: "MOTOROLA XOOM...", snippet: "The Next, Next..."}];
}]);

然后我们为out app创建一个模块并将其注入我们的控制器模块

var PhonesApp = angular.module('phoneApp', ['controllers']);

最后我们可以像这样测试它

describe('phonesApp', function() {
    describe('phoneApp controllers', function() {
        beforeEach(module('controllers'));
        describe('PhoneListCtrl', function() {
            it('should create "phones" model with 3 phones',
                inject(function($rootScope, $controller) {

                var scope = $rootScope.$new();
                var ctrl = $controller("PhoneListCtrl", {$scope: scope });
                expect(scope.phones.length).toBe(3);
            }));
        });
    });
});

我还没有在摩卡中完成它,但我想这个过程很相似。

Pd:我使用CoffeeScript完成了教程,这里是相关的位https://gist.github.com/4163147

答案 1 :(得分:15)

如果您使用的是mocha,请注意除非您已升级到angular-1.1.1,否则不支持angular.mock.moduleangular.mock.inject。我在同一条船上,但由于另一个问题我无法升级。

我想使用mocha,因为我的服务器端测试是在mocha中,我更喜欢在两侧都有相同的测试框架,所以我有点腌渍。

所以,如果你不能使用inject / module,那么你可以这样试试:

var $injector = angular.injector(['your-app-name', 'ng']),
  $controller = $injector.get('$controller'),
  $scope = $injector.get('$rootScope');

describe('my app controllers', function () {
  describe('FooCtrl', function () {
     it('should do something', function () {
        // scope can be any object you want; could be $rootScope from above
        var params = { $scope: { } },
          ctrl = $controller('FooCtrl', params);
        // TODO: test ctrl
     });
  });
});