Question

我已经看到了类似的问题，但其中没有一个问题解决了问题的根源，它假设如下：

我无法使用whenGET('').passThrough()，因为我没有使用ngMockE2E。
我不需要使用ngMockE2E，因为我正在编写一个指令的单元测试，除了吐出“bar”之外什么都不做。
有一个建议是use a proxy server提供这些HTTP响应，但是这不能破坏单元测试的目的吗？

现在，让我告诉你我的指示：

angular.module('app')
  .directive('foo', function () {
    return {
      restrict: 'A',
      templateUrl: 'templates/bar.html'
    };
  });

这是单元测试：

describe('Directive: foo', function () {

  // load the directive's module
  beforeEach(module('app'));

  var $compile;
  var $rootScope;
  var $httpBackend;

  beforeEach(inject(function(_$compile_, _$rootScope_, $injector) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;
    $httpBackend = $injector.get('$httpBackend');
  }));

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('should be bar', inject(function($templateCache) {
    $templateCache.put('templates/bar.html', 'bar');
    var element = $compile('<div data-foo></div>')($rootScope);

    //$httpBackend.whenGET(/^\/translations\//).passThrough(); // doesn't work
    $httpBackend.expectGET(/\/translations\//).respond('201', ''); // works
    $rootScope.$digest();
    $httpBackend.flush();

    expect(element.text()).toBe('bar'); // works
  }));
});

现在，测试工作正常，所有这些虚假的$httpBackend业务，但这完全不属于我的单元测试！如何将这个$httpBackend废话拉出来并阻止AngularJS app配置块在我的指令单元测试中使用templateUrl运行？

注意：只有当指令中有templateUrl时才会发生这种情况。

顺便说一下，在app config块中触发此HTTP请求的代码是：

$translatePartialLoaderProvider.addPart('index');
$translateProvider.useLoader('$translatePartialLoader', {
  urlTemplate: '/translations/{part}/{lang}.json'
});

但我认为这不一定相关。

Answer 1

将您的指令放入自己的模块中，并将该模块包含在主应用模块中。然后，您可以在不加载应用程序模块的情况下测试指令模块。

e.g。

angular.module('app-directives', [])
  .directive('foo', function () {
    return {
      restrict: 'A',
      templateUrl: 'templates/bar.html'
    };
  });

angular.module('app', ['app-directives'])
  //Run your config stuff here

如何使用templateUrl阻止AngularJS应用程序配置块在我的指令单元测试中运行？

1 个答案: