單元測試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從您的指令規范套件中刪除 ，並對其進行單獨測試。 它可以進行更清潔/模塊化的單元測試。 盡力將它們分解。