使用 ControllerAs 测试指令 Angular

Question

我正在尝试测试指令。使用 controllerAs 创建一个顶级范围，我们可以在其中访问其属性。然而，在调试时我尝试访问 element.scope().属性 - 我变得不确定。任何关于为什么的帮助将不胜感激。

--错误指令

 (function() {
  'use strict';

  angular
    .module('debug-blog-app')
    .directive('avBug', avBug);

  function avBug() {
    return {
        restrict: 'E',
        templateUrl: 'views/directives/bug.html',
        scope: {
          bug: '='
        },
        controller: BugFormController,
        controllerAs: 'bugCtrl',
        bindToController: true
    };
  };

  BugFormController.$inject = ['$window', '$scope', 'BugService'];
  function BugFormController($window, $scope, BugService) {
    var vm = this;

    vm.updateBug = function(){
      BugService.updateBug(vm.bug);
    };

    vm.deleteBug = function(){
      if($window.confirm("Delete the Bug?!")){
        return BugService.deleteBug(vm.bug.id)
          .then(function(){
            $scope.$emit('bug.deleted', vm.bug);
          });
      }
    };
  };
})();

--规格

'use strict'

describe('avBug Directive', function () {
    var bugCtrl,
        element,
        BugService,
        $scope,
        $rootScope;

    beforeEach(module('app'));

    beforeEach(inject(function($q, $compile, _$rootScope_, _BugService_) {
        $rootScope = _$rootScope_;


        var directiveMarkup = angular.element("<av-bug></av-Bug>");
        element = $compile(directiveMarkup)($rootScope);
        bugCtrl = element.scope().bugCtrl;


        BugService = _BugService_;


        spyOn(BugService, 'deleteBug').and.callFake(function() {
            var deferred = $q.defer();
            deferred.resolve('data');
            return deferred.promise;
        });

        spyOn($rootScope,'$emit').and.callThrough();
    }));

    it('should delete a bug', function() {
        bugCtrl.deleteBug(0);
        expect(BugService.deleteBug).toHaveBeenCalledWith(0);
        $rootScope.$digest();
        expect($rootScope.$emit).toHaveBeenCalledWith('bug.deleted');
    });
});

--index.html

<div class="container">
  <div ui-view></div>
</div>

--home.html

<av-bug bug="bug" ng-repeat="bug in homeCtrl.bugs"></av-bug>

Answer 1

您的控制器位于：

element.scope().$$childTail.bugCtrl

Answer 2

我还要补充一点，出于单元测试的目的，您可以使用与@Ramy Deeb post 相同的功能获取父控制器。

vm = element.scope().$$childTail.nameOfParentControllerAs

为了测试元素隔离范围，只需获取

isolateScope = element.isolateScope()

我希望这可以帮助像我这样结束于此的任何人搜索如何对指令和调用它们的控制器进行单元测试，所有这些指令和控制器都使用 ControllerAs 语法。

谢谢。

我会发表评论，但我不能。

使用 ControllerAs 测试指令 Angular

Testing Directive Angular using ControllerAs

unit-testing

angularjs

karma-jasmine