angularjs - 如何用 sinon 模拟 Angular 的 $http ？

Question

我正在尝试在 Mocha 测试中使用 sinon 对 Angular 的 $http 进行简单的模拟。

但无论我做什么，我的 spy 都没有任何结果。

searchResource.typeAhead 是我正在测试的函数。它根据其参数调用 $http，我想确保请求是正确的。

searchResource.typeAhead 返回一个 promise ，但我尝试将检查代码放入 .then() 中，但它从未执行。

suite('Search Resource', function() {

  var injector = angular.injector(['cannonball-client-search', 'cannonball-client-core']);
  var searchResource = injector.get('SearchResource');

  suite('#typeAhead()', function () {
    setup(function () {
      this.server = sinon.fakeServer.create();
      this.server.respondWith('GET',
        config.endpoints.search.typeAhead,
        [200, {'Content-Type': 'application/json'}, '[{ "id": 12, "comment": "Hey there" }]']);
      this.spyhttp = sinon.spy(injector.get('$http'));
    });
    teardown(function () {
      this.server.restore();
    });
    test('positive', function (done) {
      searchResource.typeAhead(
        'expl',
        [{entityType: 'itementity'}],
        [{createdBy: 'Eric'}, {createdBy: 'Tal'}],
        10
      );
      this.server.respond();
      expect(this.spyhttp.calledWith({
        method: 'get',
        url: config.endpoints.search.typeAhead +
        '?query=expl&filter=entityType:itementity&orfilter=createdBy:Eric&orfilter=createdBy:Tal&limit=10'
      })).to.be.true();
      done();
    });
  });
});

Answer 1

问题出在诗农 mock 之外。

如果angular.injector直接使用而不是建议的 angular.mock.module and angular.mock.inject helpers ，这个人依靠自己的力量和 Angular 注入(inject)器的知识。

明显的缺点是，注入(inject)器不会在每个规范之后自动拆除(而使用 angular.mock.module 时会自动拆除)，因此所有嵌套规范都在 Angular 注入(inject)器的同一个实例上运行。

此时

  var searchResource = injector.get('SearchResource');

SearchResource服务实例已注入(inject)未模拟的 $http ，故事就这样结束了。即使不会，Angular 也不可能知道 this.spyhttp应该使用 spy 代替原来的 $http服务。实例化后可以监视其方法

sinon.spy($http, 'get');

但不是$http函数本身。

使用 angular.injector 进行测试的策略可能是

var $httpSpy;
var injector = angular.injector([
  'cannonball-client-search',
  'cannonball-client-core',
  function ($provide) {
    $provide.decorator('$http', function ($delegate) {
      return ($httpSpy = sinon.spy($delegate));
    });
  }
]);

// injector.get('$http') === $httpSpy;

请注意，这将使诗农监视 $http功能，不在 its methods 上.

如果问题是如何使用 Sinon 处理 Angular 模拟，那么就这么简单。否则，这可能表明存在 XY 问题，而另一个答案直接解决了它( $httpBackend 和 $http 拥抱它的方式正是为了使模拟 XMLHttpRequest 请求的负担不存在)。