Jasmine测试promise.then函数

Question

我尝试用Jasmine测试我的应用程序并遇到以下问题：
我会在某种计算then我的承诺的功能。 这就是我需要测试代码的地方。

这是我的控制器的代码：

  TestCtrl.$inject = ["$scope", "TestService"];
  /* ngInject */
  function TestCtrl($scope, TestService) {
    $scope.loadData = function () {
      TestService.getData().then(function (response) {
        $scope.data = response.data;
        $scope.filtered = $scope.data.filter(function(item){
          if(item.id > 1000){
            return true;
          }
          return false;
        })
      });
    }
  }

我的Jasmine测试代码：

describe('TestService tests', function () {
  var $q;
  beforeEach(function () {
    module('pilot.fw.user');
  });
  beforeEach(inject(function (_$q_) {
    $q = _$q_;
  }));
  describe('UserController Tests', function () {

    beforeEach(inject(function (_$httpBackend_, $rootScope, $controller) {
      this.scope = $rootScope.$new();
      this.$rootscope = $rootScope;
      this.$httpBackend = _$httpBackend_;
      this.scope = $rootScope.$new();
      var TestServiceMock = {
        getData: function () {
          var deferred = $q.defer();
          var result = [{
            "id": 1720,
            "user": 1132
          },
            {
              "id": 720,
              "user": 132
            }, {
              "id": 1721,
              "user": 1132
            }];
          deferred.promise.data = result;
          deferred.resolve(result);
          return deferred.promise;
        }
      };
      this.controller = $controller('TestCtrl', {
        '$scope': this.scope,
        'TestService': TestServiceMock
      });
    }));

    it('test', function(){
      this.scope.loadData();
      expect(true).toBeTruthy();
    })
  });
});

我不明白的奇怪之处是（使用控制台日志测试）：

• 我的承诺被创造并归还
• 调用我的loadData函数，它将从TestService调用getData（）函数
• 虽然我将promise作为已解决的函数返回，但then函数内的所有内容都不会被执行

那我怎么能测试then函数里面的代码呢？
感谢帮助

Answer 1

茉莉花'it'方法采用一个可以调用异步测试的完成参数

it('Should be async', function(done) {
  someAsyncFunction().then(function(result) {
    expect(result).toBe(true);
    done();
  });
});

随意尽可能深入，只要确保在一切完成后调用完成。 Jasmine的默认超时是每次测试5秒，所以如果没有完成async的话，那么jasmine就会崩溃。 您可以在配置中更改此设置或将其设置在终端中。

这直接来自jasmine文档，向您展示如何处理默认超时间隔

describe("long asynchronous specs", function() {
  var originalTimeout;
  beforeEach(function() {
    originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
  });

  it("takes a long time", function(done) {
    setTimeout(function() {
      done();
    }, 9000);
  });

  afterEach(function() {
    jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
  });
});

我认为如果它在10秒内不起作用，你可能会有错误的方法。 特别是如果你正在与本地服务器/ db通信。 如果您正在执行重大计算，或者正在使用不那么好的互联网连接打外部api，那么这个东西应该只花这么长时间。 如果一切都是本地的（或顽固/嘲笑！）那么超过5-10秒的任何东西都是明确的红旗。

Answer 2

希望此解决方案有所帮 我发现在测试时有用的一种方法是模拟依赖项。 我试图尽可能地评论我所做的事情。

var returnMock, $scope, TestServiceMock, controller;

beforeEach(module('app'));

beforeEach(inject(function($controller) {
    returnMock = {
        then: jasmine.createSpy(),
    };
    $scope = {};
    // first assumption is You are testing TestService extensively,
    // I don't care about what getData has to do to get results
    // All I care about is it gets called when I call loadData
    TestServiceMock = {
        getData: jasmine.createSpy().and.returnValue(returnMock);
    };

    controller = $controller;
}));

it('should load data when loadData function is called and result set is 
under 1000', function() {
    controller('TestCtrl', {
        $scope,
        TestServiceMock
    });
    // another assumption is your data comes back in such a format
    // perhaps in the actual code check whether data exists and proceed
    // or do some other action
    var returnedData = {
        data: [
            {
                id: 1,
                name: 'item 1',
            },
        ]
    }
    // when I execute the function/method
    $scope.loadData();
    // I expect getData to be called
    expect(TestServiceMock.getData).toHaveBeenCalled();
    // I expect then to be called and the reason is I mocked it
    expect(returnMock.then).toHaveBeenCalledWith(jasmine.any(Function));
    returnMock.then.calls.mostRecent().args[0](returnedData);
    // expect data on scope to be equal to my mocked data
    expect($scope.data).toEqual(returnedData.data);
    // don't expect any result because 1 < 1000
    expect($scope.filtered).toEqual([]);
    expect($scope.filtered.length).toEqual(0);
});

it('should load data when loadData function is called and result set is over 1000', 
     function() {
    controller('TestCtrl', {
        $scope,
        TestServiceMock
    });
    var returnedData = {
        data: [
            {
                id: 1,
                name: 'item 1',
            },
            {
                id: 1000,
                name: 'item 1000',
            },
            {
                id: 1001,
                name: 'item 1000',
            },
            {
                id: 1002,
                name: 'item 1002',
            }
        ]
    }
    $scope.loadData();
    expect(TestServiceMock.getData).toHaveBeenCalled();
    expect(returnMock.then).toHaveBeenCalledWith(jasmine.any(Function));
    returnMock.then.calls.mostRecent().args[0](returnedData);
    expect($scope.data).toEqual(returnedData.data);
    // expect a result because some entries in the mocked data have id > 1000
    expect($scope.filtered).toEqual([
        {
            id: 1001,
            name: 'item 1000',
        },
        {
            id: 1002,
            name: 'item 1002',
        }]);
    expect($scope.filtered.length).toEqual(2);
});

官方的Jasmine Docs广泛地解释了大部分概念。 希望解决方案有所帮助!!!!

Answer 3

对于Angular 1.x和2.x +项目，让我告诉你我做了什么。 使用角度测试工具摆脱异步测试中的回调/嵌套。 在角度1.x中，这意味着使用$ q和$ rootScope的组合。$ apply（）。 在角度2.x +中，这意味着使用fakeAsync之类的东西。

来自Angular 1.x文档

it('should simulate promise', inject(function($q, $rootScope) {
  var deferred = $q.defer();
  var promise = deferred.promise;
  var resolvedValue;

  promise.then(function(value) { resolvedValue = value; });
  expect(resolvedValue).toBeUndefined();

  // Simulate resolving of promise
  deferred.resolve(123);
  // Note that the 'then' function does not get called synchronously.
  // This is because we want the promise API to always be async, whether or not
  // it got called synchronously or asynchronously.
  expect(resolvedValue).toBeUndefined();

  // Propagate promise resolution to 'then' functions using $apply().
  $rootScope.$apply();
  expect(resolvedValue).toEqual(123);
}));

缺点是您的代码与角度相关联，优点是您的代码是扁平的，并且可以移植到2.x +！

我是mocha测试运行器的粉丝，它允许我在我的测试中返回promises，你可以试着去做，但是有一些缺点，比如需要专门为测试修改你的代码。

Answer 4

关于你的控制器，你应该'返回'这样的值。

TestCtrl.$inject = ["$scope", "TestService"];
/* ngInject */
function TestCtrl($scope, TestService) {
  $scope.loadData = function () {
    // Return this call, since it will return a new promise
    // This is what let's you do $scope.loadData.then()
    return TestService.getData().then(function (response) {
      // What you return in here will be the first argument
      // of your then method, in the tests / any env
      // Ex. return 'foo'
      // will result in .then(result => result === 'foo') //=> true
      // return one of these, i suggest the data, go SRP!
      return $scope.data = response.data;

      // I would do this stuff in a separate function, but you
      // can return 'filtered' instead if you like.
      //
      // $scope.filtered = $scope.data.filter(function(item){
      //   if(item.id > 1000){
      //     return true;
      //   }
      //   return false;
      // });
    });
  }
}

请记住，在“然后”之后调用某些内容并不意味着什么，必须将值设置为INSIDE'然后'。 不是在它之后，或之前。 但在里面。 就像汤姆格林和弗雷迪得到的那只可怜的驼鹿一样。

Answer 5

你最好看这个https://codecraft.tv/courses/angular/unit-testing/asynchronous/

你实际上有3种方式：

1）经常使用它：

it('test', (done) => {
   const spy = spyOn(func, 'bar').and.returnValue(Promise.resolve(true));
   spy.calls.mostRecent().returnValue.then(res => {
      ...your expect here...
      done();
   })
} );

2）在beforeEach中使用async并且它：

it('test', async(() => {
    spyOn(func, 'bar').and.returnValue(Promise.resolve(true));
    fixture.whenStable().then(res => {
       ...your expect here...
    })
 } ));

3）如果您没有Http或XHR调用，请使用fakeAsync：

it('test', fakeAsync(() => {
    spyOn(func, 'bar').and.returnValue(Promise.resolve(true));
    tick();
    ...your expect here...
 } ));