Question

我试图在我的茉莉花测试中通过$ scope检索控制器，但是失败了。谁知道为什么？

使用controllerAs语法时，控制器对象使用在controllerAs中指定的名称放在$ scope对象上。因此，使用ng-app =＆＃39; MyApp＆＃39;在浏览器中运行以下代码要引导到角度，我可以使用chrome-dev工具来定位和选择指令元素，并在控制台中键入$0.scope().myDirCtrl。这确实产生了控制器对象，那么为什么我不能在单元测试中检索控制器对象呢？

运行下面的代码片段将启动一个独立的jasmine浏览器测试环境。测试的规范列在代码段的底部。我遇到问题的代码是：

expect($scope.myDirCtrl).toBeDefined();

＆＃13;

/* --------------------------------------
    Source code
   --------------------------------------*/
(function(angular) {
  'use strict';

  // Setup the template -----------------
  angular.module('MyApp.tpls', [])
  .run(['$templateCache', function($templateCache) {
    $templateCache.put('partials/myDirective.html',
                       '<div>{{myDirCtrl.testValue}}</div>');
  }]);

  // Setup the app ----------------------
  angular.module('MyApp', ['MyApp.tpls'])
    .directive('myDirective', myDirective)
    .controller('MyDirectiveController', MyDirectiveController);

  function myDirective() {
    return {
      restrict        : 'E',
      templateUrl     : 'partials/myDirective.html',
      transclude      : true,
      controllerAs    : 'myDirCtrl',
      bindToController: true,
      scope           : {},
      controller      : 'MyDirectiveController'
    };
  }

  MyDirectiveController.$inject = ['$scope'];
  function MyDirectiveController($scope) {
    var ctrl = this;
    ctrl.testValue = 'Only a test';
  }
})(angular);



/* --------------------------------------
    Test specifications
   --------------------------------------*/
(function (module) {
  'use strict';
  
  // Define the tests -------------------
  describe('My directive test', function () {
    var $compile, $rootScope, $scope;

    beforeEach(module('MyApp'));
    beforeEach(inject(function(_$compile_, _$rootScope_) {
      $compile   = _$compile_;
      $rootScope = _$rootScope_;
      $scope     = $rootScope.$new();
    }));

    it('scope should contain a controller reference', function () {
      var element = $compile(angular.element('<my-directive></my-directive>'))($scope);
      $scope.$digest();
      expect($scope.myDirCtrl).toBeDefined();
    });
  });
})(module);

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/boot.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-mocks.js"></script>

＆＃13;

Answer 1

问题是您的规范中的$scope与MyDirectiveController中使用的范围不同。 Directive为控制器创建了另一个范围，该控制器成为规范范围的子级。您应该可以在测试中使用Angular内部属性进行检查：

it('scope should contain a controller reference', function () {
    var element = $compile(angular.element('<my-directive></my-directive>'))($scope);
    $scope.$digest();

    // controller is actually in a child scope
    console.log($scope.$$childHead.myDirCtrl);

    expect($scope.myDirCtrl).toBeDefined();
});

但我不建议依赖像$$childHead这样的私有Angular属性，因为它们被认为是私有的，不属于公共API。我认为此问答AngularJS - Access to child scope可以帮助您解决此问题。

在单元测试中通过$ scope检索角度控制器

1 个答案: