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

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

javascript angularjs unit-testing testing jasmine

Javascript AngularJS Jasmine，控制器中的测试功能,javascript,angularjs,unit-testing,testing,jasmine,Javascript,Angularjs,Unit Testing,Testing,Jasmine,我试图用Jasmine测试我的AngularJS控制器函数。然而，我得到了TypeError：undefined不是一个函数这是测试的样子： describe('BoardController', function() { beforeEach(module('examtesting')); var BoardController; beforeEach(inject(function($rootScope, $controller) { var

我试图用Jasmine测试我的AngularJS控制器函数。然而，我得到了TypeError：undefined不是一个函数

这是测试的样子：

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

我做错了什么？

就像上一个清单中所说的，toggleCreateActive是$scope上的一个函数。不能将其引用为BoardController.toggleCreateActive。相反，让scope变量可用于测试，将声明移出beforeach并调用scope.toggleCreateActive。

如上一个清单中所述，toggleCreateActive是$scope上的一个函数。不能将其引用为BoardController.toggleCreateActive。相反，使作用域变量可用于测试将声明移出beforeach并调用scope.toggleCreateActive。

这应该可以：

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

});

这应该起作用：

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

});

当您使用$scope时，所有模型都在scope上，控制器就是控制器

用controllerAs测试控制器

在我们了解了如何测试服务之后，让我们来谈谈测试控制器

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

我们希望angular的DI将控制器的一个实例注入到我们的测试中，但控制器不是作为服务的Singlton

因此，我们将：

注入$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');
});

使用$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');
});