Angular服务的Jasmine测试不能解决延迟呼叫

Question

我是Angular的新手,我正在测试一个运行API级别服务的Angular服务,该服务将大量调用包装到REST服务中.因为它正在处理HTTP请求,所以服务的两个部分都在使用promises,它似乎工作正常,但我无法对承诺的行为进行任何测试.

我的服务代码的相关部分(非常简化)如下所示:

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);
  });
});