Question

我正在尝试使用AngularJS测试我的Jasmine控制器功能。但是，我得到TypeError: undefined is not a function。

这就是测试的样子：

describe('BoardController', function() {

    beforeEach(module('examtesting'));

    var BoardController;

    beforeEach(inject(function($rootScope, $controller) {

        var scope = $rootScope.$new();

        BoardController = $controller('BoardController', { 
            $scope: scope,
            board: null,
            BoardService: null
        });

    }));


    it ("should toggle create_active", function() {
        var category = { create_active: false }

        BoardController.toggleCreateActive(category);

        expect(category.create_active).toBe(true);
    });

});

这是我试图测试的功能：

    $scope.toggleCreateActive = function(category) {
        category.create_active = !category.create_active;
    }

我做错了什么？

Answer 1

就像上面列出的那样，toggleCreateActive是$ scope上的一个函数。您不能将其引用为BoardController.toggleCreateActive。而是使范围变量可用于测试（将声明移出beforeEach）并调用scope.toggleCreateActive（）。

Answer 2

这应该有效：

describe('BoardController', function() {

    beforeEach(module('examtesting'));

    var createController, scope;

    beforeEach(inject(function($rootScope, $controller) {
        scope = $rootScope.$new();

        createController = function() {
            return $controller('BoardController', { 
                $scope: scope,
                board: null,
                BoardService: null
            });
        };
    }));


    it ("should toggle create_active", function() {
        var category = { create_active: false },
            controller = createController();

        scope.toggleCreateActive(category);

        expect(category.create_active).toBe(true);
    });

});

Answer 3

使用$ scope时，所有模型都在范围内，控制器只是控制器......

使用controllerAs测试控制器

在我们看到如何测试服务之后，让我们谈谈测试控制器。

function MyController(MyService) {
 this.greetUpperCase = function(name) {
  return MyService.greet(name).toUpperCase();
 }
}

我们希望angular的DI能够将我们的控制器实例注入我们的测试中，但控制器并不是单一的服务。

因此，我们将：

注入$ controller服务用它来为我们实例控制器

var $controller;
beforeEach(module('MyModule'));
beforeEach(inject(function(_$controller_) {
    $controller = _$controller_; })
);
it('test greetUpperCase()', function() {
    var ctrl = $controller('MyController');
    expect(ctrl.greetUpperCase('bob')).toBe('HELLO BOB');
});

https://jsfiddle.net/ronapelbaum/tcmsw688/

使用$ scope测试控制器

现在，如果你还在使用$ scope：

function MyController($scope, MyService) {
 $scope.greetUpperCase = function(name) {
  return MyService.greet(name).toUpperCase();
 }
}

基本上，当你使用$ scope时，你并不真正关心控制器本身，因为它正在做它的范围内的所有事情。

所以，我们需要：

注入$ rootScope 创建一个新的范围将它注入新的控制器测试$ scope

it('test greetUpperCase()', function() {
 var myScope = $rootScope.$new();
 $controller('MyController', {
  $scope: myScope
 });
 expect(myScope .greetUpperCase('bob')).toBe('HELLO BOB');
});

https://jsfiddle.net/ronapelbaum/pkhaxmdg/

AngularJS Jasmine，控制器中的测试功能

3 个答案: