AngularJS 使用 templateUrl 测试指令

Question

我正在尝试使用 karma 来测试 AngularJS 指令。但是我遇到了 templateUrls 的问题。使用here 描述的技术，它变得更加陌生。它似乎像宣传的那样工作并将我的模板加载到 $templateCache 中，但该指令没有使用该缓存。这是一些代码：

这样就可以了

.directive('messageComposer', function($templateCache) {
  return {
    restrict: 'E',
    template: $templateCache.get('partials/message_composer.html'),
    replace: true,
    link: function() {
      console.log('hello world');
    }
  };
});

但是一旦我使用了 templateUrl，它就无法在测试中绑定：

.directive('messageComposer', function() {
  return {
    restrict: 'E',
    templateUrl: 'partials/message_composer.html',
    replace: true,
    link: function() {
      console.log('hello world');
    }
  };
});

有人知道这里发生了什么吗？

这是我的单元测试设置：

var $scope;
var $compile;

beforeEach(function() {
    module('partials/message_composer.html');
    module('messageComposer');

    inject(function(_$compile_, $rootScope) {
        $scope = $rootScope.$new();
        $compile = _$compile_;
    });  
});


it("works", function() {
    $scope.message = {};
    elem = angular.element("<message-composer message='message'></message-composer>")
    $compile(elem)($scope);

    console.log(elem);

    expect(true).toBeDefined();
});

Answer 1

根据url（http://tylerhenkel.com/how-to-test-directives-that-use-templateurl/），相信你已经运行了以下命令：

npm install karma-ng-html2js-preprocessor --save-dev

现在，当您使用上述预处理器时，该预处理器会将 HTML 文件转换为 JS 字符串并生成 Angular 模块。这些模块在加载时会将这些 HTML 文件放入 $templateCache 中，因此 Angular 不会尝试从服务器获取它们。

希望以下文件能更好地为您澄清：

https://github.com/karma-runner/karma-ng-html2js-preprocessor https://github.com/vojtajina/ng-directive-testing