使用 angular-material-design 和 requirejs 对 angularjs 指令进行单元测试会引发“GET”错误答案

【问题标题】：Unit Testing angularjs directive with angular-material-design with requirejs throws a "GET" error使用 angular-material-design 和 requirejs 对 angularjs 指令进行单元测试会引发“GET”错误
【发布时间】：2015-07-09 04:08:29
【问题描述】：

我的应用程序使用 requirejs 和 angularjs。我正在使用 text! 来加载我的模板（以免在我的指令中使用 templateURL）。一切正常 - 除非其中一个指令在其模板中包含图像。

我现在正在尝试为模板中带有图标的新指令设置测试，但没有成功。例如，我有以下指令模板：

<buttonDirective>
  <md-icon md-svg-src="/android.svg" alt="android "></md-icon>
</buttonDirective>

Karma 对我大喊“/android.svg”正在被调用（已知的“GET”错误：意外请求：GET IMAGEFILEPATH）。

我尝试将我的图像文件添加到 karma 配置中，但这并没有解决问题。

除了不使用 md 图标之外，还有什么方法可以解决这个问题？（当我将 md-icon 更改为简单图像时，它会起作用，所以我猜问题是 md-icon 指令正在对 svg 文件使用一些异步调用，而 Karma 讨厌这样......）。

【问题讨论】：

标签： javascript angularjs requirejs karma-jasmine angular-material

【解决方案1】：

我通过使用$httpBackend 模拟请求解决了这个问题：

beforeEach(inject(function(_$compile_, _$rootScope_, _$httpBackend_) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;
    $httpBackend = _$httpBackend_;

    $httpBackend
        .whenGET('images/ic_forward_24px.svg')
        .respond('');

    $httpBackend
        .whenGET('images/ic_backward_24px.svg')
        .respond('');

    $rootScope.$digest();

}));

【讨论】：

【解决方案2】：

你可以完全模拟指令：

module('app', function ($provide) {
    $provide.factory('mdIconDirective', function () {
      return angular.noop;
    });
});

【讨论】：