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

【问题标题】：Unit Test a AngularJS Directive's Controller (Karma, Chai, Mocha)单元测试 AngularJS 指令的控制器（Karma、Chai、Mocha）
【发布时间】：2015-10-03 07:55:01
【问题描述】：

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

我的应用程序编译 (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)".

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

【问题讨论】：

你想做什么？测试company-modal指令和companyModalCtrl 控制器之间的交互？
@just-boris 我想测试指令中的值，比如填充数组、空数组等。我想我必须通过父 ctrl 调用它，但也许不是。跨度>

标签： javascript angularjs unit-testing chai karma-mocha

【解决方案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 并单独对其进行测试。它使更清洁/模块化的单元测试变得更加清晰。尽量将它们分解。

【讨论】：