AngularJS中的单元测试指令控制器

时间:2014-01-17 14:05:24

标签: unit-testing angularjs controller jasmine directive

我试图完全理解如何使用Jasmine在AngularJS中测试指令。目前,我有一个如下所示设置的指令:

.directive('myDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: {
          title:'=',
          state:'@'
        },
        templateUrl: 'myHtml.tpl.html',
        controller: function ($scope) {
          // Business Logic Specific to the Directive goes in here
        }
    };
})

如上面的代码片段所示,我的指令在指令定义中有一个控制器。我试图测试的具体指令相当复杂。该指令中的控制器有超过200行代码。我试图弄清楚如何围绕这个控制器的内容编写单元测试。目前我有以下内容:

describe('myApp', function () {
    var $scope;

    beforeEach(module('myApp'));
    beforeEach(inject(function ($controller, $rootScope) {
        $scope = $rootScope.$new();
    }));

    it('should create my directive', inject(function ($rootScope, $compile, $log) {
      var card = angular.element('<my-directive></my-directive>');
      $compile(card)($rootScope);
      $scope.$digest();

      expect($log.assertEmpty).not.toThrow();
    }));
});

上面的单元测试测试指令本身的创建。但是,我无法弄清楚如何在指令内部测试控制器。有没有办法做到这一点?如果是这样,怎么样?

谢谢!

2 个答案:

答案 0 :(得分:4)

据我记得,有一种分离指令控制器的语法,如:

.directive('myDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: {
          title:'=',
          state:'@'
        },
        templateUrl: 'myHtml.tpl.html',
        controller: 'MyDirectiveCtrl as ctrl'
    };
})

并将其注册为常规控制器

.controller("MyDirectiveCtrl", function($scope) {})

因此,如果您这样做,那么您可以使用$ controller创建此控制器并愉快地测试。

答案 1 :(得分:1)

您可以使用以下代码测试控制器:

describe('myApp', function () {
var $scope;

beforeEach(module('myApp'));
beforeEach(inject(function ($controller, $rootScope) {
    $scope = $rootScope.$new();
    var card = angular.element('<my-directive></my-directive>');
    $compile(card)($rootScope);
    $scope.$digest();
    controller = element.controller
}));

it('should create my directive', inject(function ($rootScope, $compile, $log) {
    //TRY YOUR BUSINESS LOGIC TESTS HERE
    //$scope.yourFunction(yourArgs...);
    //expect($scope.yourVars).toSomething
}));

});