Angular 服务的 Jasmine 测试无法解决延迟调用

Question

我对 Angular 很陌生，我正在测试一个 Angular 服务，该服务运行一个 API 级别的服务，该服务包装了对 REST 服务的一堆调用。因为它正在处理 HTTP 请求，所以服务的两个部分都在处理 Promise，而且它似乎工作正常，但我无法让任何对 Promise 行为的测试正常工作。

我的服务代码的相关部分（非常简化）如下所示：

angular.module('my.info')
 .service('myInfoService', function (infoApi, $q) {
    infoLoaded: false,
    allInfo: [],
    getInfo: function () {
        var defer = $q.defer();
        if (infoLoaded) {
            defer.resolve(allInfo);
        } else {
            infoApi.getAllInfo().then(function (newInfo) {
                allInfo = newInfo;
                infoLoaded = true;
                defer.resolve(allInfo);
            });
        }
        return defer.promise;
    }
});

当我设置我的模拟时，我有这样的事情：

   describe("Info Service ",
     function() {
        var infoService, infoRequestApi, $q;
        beforeEach(module("my.info"));
        beforeEach(function() {
            module(function($provide) {
                infoRequestApi = {
                   requestCount: 0,
                   getAllInfo: function() {
                       var defer = $q.defer(); 
                       this.requestCount++;
                       defer.resolve( [ "info 1", "info 2" ] );
                       return defer.promise;
                   }
                };
                $provide.value("infoApi", infoRequestApi);
            });
            inject(function( _myInfoService_, _$q_ ) {
                 infoService = _myInfoService_,
                 $q = _$q_;
            });
        });

        it("should not fail in the middle of a test", function(done) {
            infoService.getInfo().then( function(infoResult) {
                  // expectation checks.
                  expect( true ).toBeTrue();
              }).finally(done);
        });
   });

任何同步测试都可以通过，但是当我尝试运行任何这样的测试时，我会收到一条消息：Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

似乎 Angular.Mocks 处理延迟结果的方式导致它失败。当我逐步完成测试时，模拟对象的defer 变量设置正确，但服务中的then 语句从未被调用。我哪里错了？

Answer 1

简答

您必须开始一个摘要循环。你可以通过$rootScope.$apply() 做到这一点。

it("should not fail in the middle of a test", inject(function($rootScope) {
  var actualResult = null;
  infoService.getInfo()
    .then(function(infoResult) { actualResult = infoResult; });
  $rootScope.$apply();
  expect(actualResult).toEqual(["info 1", "info 2"]);
}));

注意

我不会像您那样尝试创建虚假的infoRequestApi 服务。您也应该注入该服务，并监视其功能。例如，这样的事情：

it("should not fail in the middle of a test", inject(function($rootScope, infoApi, $q) {
  var deferred = $q.defer();
  spyOn(infoApi, 'getAllInfo').and.returnValue(deferred.promise);
  var actualResult = null;
  var expectedResult = ["info 1", "info 2"];

  infoService.getInfo()
    .then(function(infoResult) { actualResult = infoResult; });

  deferred.resolve(expectedResult);
  $rootScope.$apply();
  expect(actualResult).toBe(expectedResult);
}));

重构

此外，您的代码可以稍微简化一些（未经测试，但接近我的预期）。

angular.module('my.info')
  .service('myInfoService', function (infoApi, $q) {
     return {
       infoLoaded: false,
       allInfo: [],
       getInfo: function () {
         var self = this;
         return this.infoLoaded ? $q.resolve(this.allInfo) :
           infoApi.getAllInfo().then(function (newInfo) {
             self.allInfo = newInfo;
             self.infoLoaded = true;
           });
     }
  };
});

describe("Info Service ", function() {
  var infoService, infoApi, $q, $rootScope;

  beforeEach(module("my.info"));
  beforeEach(inject(function( _myInfoService_, _$q_ _$rootScope_, _infoApi_) {
    infoService = _myInfoService_,
    $q = _$q_;
    $rootScope = _$rootScope_;
    infoApi = _infoApi_;
  });

  it("should do something", function() { // update message
    var deferred = $q.defer();
    spyOn(infoApi, 'getAllInfo').and.returnValue(deferred.promise);
    var actualResult = null;
    var expectedResult = ["info 1", "info 2"];

    infoService.getInfo()
      .then(function(infoResult) { actualResult = infoResult; });

    deferred.resolve(expectedResult);
    $rootScope.$apply();
    expect(actualResult).toBe(expectedResult);
  });
});