Question

我有一个简单的指令：

＆＃39;使用严格的＆＃39;;

angular
  .module('app')
  .directive('ngEmailMask', ngEmailMask);

function ngEmailMask() {

  var directive = {
    replace: true,
    restrict: 'EA',
    scope: {
      user: '@',
      host: '@'
    },
    template: '<a href="mailto:{{user}}@{{host}}">{{user}}@{{host}}</a>'
  };

  return directive;

}

我正在编写一个Karma单元测试来检查指令输出正确的HTML。到目前为止，我已经得到了这个：

describe('ngEmailMask', function() {

  // Bindable members
  var $compile,
      $rootScope;

  // Load module
  beforeEach(angular.mock.module('app'));

  // Bind injected references to local variables
  beforeEach(inject(function(_$compile_, _$rootScope_) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  // Verify service returns
  it('Replaces the tag with the correct HTML', function() {

    // Compile element
    var element = $compile('<ng-email-mask data-user="test" data-host="gmail.com"></ng-email-mask>')($rootScope);

    // Evaluate scope
    $rootScope.$digest();

    console.log(element.html());

  });

});

我已按照Angular网站here上的示例进行操作，但上面的示例返回错误：

Error: Unexpected request: GET /app/home/home.html

该路径与指令无关，可能会发生变化（它与我使用的UI路由器中的状态和路由有关）。那么如何在不看到有关不同文件的这些错误的情况下测试该指令呢？

Answer 1

您必须在茉莉花测试中期待所有XHR调用（甚至是模板）。最简单的方法是在运行测试之前将所有模板添加到templateCache。

请参阅：Unit Testing AngularJS directive with templateUrl

Angular指令的Karma测试返回意外请求

1 个答案: