单元测试AngularJS指令的控制器（Karma，Chai，Mocha）

Question

无法达到我的指令进行单元测试的范围。 尝试运行单元测试时出现通用编译错误。

我的应用程序可以编译（ gulp ）并正常运行，而且我也可以对非指令的单元进行测试。 我只是不确定如何使测试与指令配合使用，我只是通过一些有根据的猜测来尝试其他人的解决方案。

主页的HTML和JS

<div company-modal="companyOptions" show-close="false"></div>

。

(function() {
    'use strict';

    angular
        .module('app')
        .controller('companyModalCtrl', ['$scope', selectionPage]);

        function selectionPage($scope) {
            $scope.companyOptions = {};
        }
})();

这是指令的第一部分（非常大，因此只包含重要的顶部部分。

(function() {
  'use strict';

  angular
    .module('app')
    .directive('companyModal',
      companyModal
    );

  function companyModal() {
    return {
      restrict: 'A',
      replace: false,
      transclude: true,
      templateUrl: '/src/login/company.html',
      scope: {
        options: '=companyModal',
        showClose: '='
      },
      bindToController: true,
      controller: companySelection,
      controllerAs: 'csmvm'
    };
  }

  companySelection.$inject = ['$state'];

  function companySelection($state) {
    var csmvm = this;
    var url;
    csmvm.emailList = [];

这是我对单元测试的尝试

'use strict';

describe('Company', function () {

  var scope;
  var controller;
  var elem;

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

    elem = angular.element('<div company-modal="companyOptions" show-close="false"></div>');
    $compile(elem)($rootScope);
    /* 
      controller = elem.controller('companyModal as csmvm');
      controller = $controller(controller, 
      {
        $scope : scope
      });
    */
    controller = $controller(elem.controller('companyModal as csmvm'), {
      $scope: scope
    });

    scope.csmvm.emailList.email = "Bob@gmail.com";

  }));

  describe('Invite', function () {
    it('should be an array for emailList', function () {
      expect(scope.csmvm.emailList).to.be.an('array');
    });

  });

});

我的问题（很抱歉，描述性很差）是我一直在从测试中获取运行时错误。 如：

Failed Tests: Company "before each" hook: workFn 18) the object { "message": "'undefined' is not an object (evaluating '(isArray(Type) : Type).prototype)".

再说一次，我的应用程序可以编译（运行）并运行良好，而且我也可以对非指令的单元进行测试。

Answer 1

您需要对指令的隔离范围抱有期望。

现在， scope指的是指令编译的范围。

但是您的指令创建了一个新的隔离范围，并且您对此并没有期望。

有两种方法：

function isolateScope (el) {
  return el.isolateScope();
}

/** or **/

var el, scope, isolateScope; 

beforeEach(inject(function ($compile, $rootScope) {
  scope = $rootScope.$new();
  el = $compile('<directive></directive>')(scope);
  scope.$digest();
  isolateScope = el.isolateScope();
});

---

综上所述，我将controller从您的指令规范套件中删除 ，并对其进行单独测试。 它可以进行更清洁/模块化的单元测试。 尽力将它们分解。