javascript - Jasmine Angular Directive(指令)被编译为一个对象

Question

我正在对一个 Angular 指令进行单元测试，这个测试在过去的 Angular 1.4.9 中有效。我最近升级到 1.5.0，所以我认为这个问题/(意外结果)可能是由于 angular-mocks 造成的。

describe('The buttonToggle directive', function() {
  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'button-toggle.html',
    $scope;

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope) {
    $compile = _$compile_;
    $scope = $rootScope.$new();
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    var element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    console.log(compiledElement);
    $scope.$digest();
    console.log(compiledElement);
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});

compiledElement 只是被放入一个对象中。这是 console.log 的返回值:

{0: <button-toggle class="ng-scope"></button-toggle>, length: 1}

我不明白为什么会这样。它应该被编译成button-toggle.html内容。

编辑: 忘记在 beforeEach 中注入(inject) buttonToggle 模块。我还需要注入(inject)主应用程序模块吗？如果我插入它然后我得到一个 undefined is not an object (evaluation compiledElement.html)。

模块注入(inject):

beforeEach(module('ocapp.buttonToggle'));
beforeEach(module('ocapp'));

编辑 2: 我不再认为这是 angular-mocks 版本问题。我的指令取决于在单独文件中定义的 Controller ，并且未被解析。

button-toggle.directive.js

(function() {
  'use strict';

  angular
    .module('ocapp.buttonToggle')
    .directive('buttonToggle', buttonToggle);

  function buttonToggle(ButtonToggleController) {
    return {
      restrict: 'E',
      templateUrl: 'app/button-toggle/button-toggle.html',
      replace: true,
      scope: {
        on: '='
      },
      controller: ButtonToggleController
    };
  }
})();

button-toggle.html 与此处使用的所有其他文件位于同一目录中，也许我不需要 templateUrl 属性中的扩展路径？

编辑 3: 我已经解决了所有其他问题，现在回到原点。

按钮切换.directive.spec.js

describe('The buttonToggle directive', function() {
  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'app/button-toggle/button-toggle.html',
    $scope,
    $httpBackend;

  beforeEach(module('ocapp.buttonToggle'));
  //beforeEach(module('ocapp'));

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope, $injector) {
    $compile = _$compile_;
    $scope = $rootScope.$new();
    $httpBackend = $injector.get('$httpBackend');
    $httpBackend.whenGET(btElementPath).respond(200, '');
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    var element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    console.log(compiledElement);
    $scope.$digest();
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});

参见 this question and accepted answer了解如何从指令中的同一模块定义外部 Controller 。

button-toggle.directive.js

(function() {
  'use strict';

  angular
    .module('ocapp.buttonToggle')
    .directive('buttonToggle', buttonToggle);

  function buttonToggle() {
    return {
      restrict: 'E',
      templateUrl: 'app/button-toggle/button-toggle.html',
      replace: true,
      scope: {
        on: '='
      },
      controller: 'ButtonToggleController'
    };
  }
})();

Answer 1

事实证明这不是 Angular 版本问题，而是缺少依赖项。

1. 使用 npm 安装 karma-ng-html2js-preprocessor。
2. 编辑 karma.conf.js。
3. 将指令的 templateUrl 更改为 'button-toggle.html'。
4. 测试应如下所示。

karma.conf.js 添加

preprocessors: {
   '**/*.html': ['ng-html2js']
},

ngHtml2JsPreprocessor: {
   stripPrefix: 'app/button-toggle/'
   moduleName: 'templates'
},

按钮切换.directive.spec.js

describe('The buttonToggle directive', function() {

  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'app/button-toggle/button-toggle.html',
    $scope,
    element;

  beforeEach(module('ocapp.buttonToggle'));
  beforeEach(module('templates'));

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope) {
    $compile = _$compile_;
    $scope = $rootScope;
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    $scope.$digest();
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});