测试在Angularjs 1.6中的$ q.all（）的then中设置的公共值

Question

我正在尝试使用$componentController测试一个角度组件我只是试图测试公共代码的输入和输出，所以在我的控制器中“ this.data ”属性是最高优先级。 从输入this.data很容易，因为它只是测试类构造函数prop，默认情况下设置为undefined 。

输出是问题，它在获取预期值之前有很多代码要调用。

题：

如何附加到$ q.all.resolve（）并测试this.data的映射输出？ 期望是expect(ctrl.data).toEqual(expectedData) 。

Controller.js：

class Controller {
  /**
   * @ngInject
   */
  constructor(
      someService, $q, $scope) {
    this.ngScope_ = $scope;
    this.someService_ = someService;
    this.ngQ_ = $q;
    this.data = undefined;
  }

  $onInit() {
    this.getData_();
  }

  getData_() {

    let requests = [1,2];
    const REQUEST_TYPE = 'SOME_REQUEST';
    const outEachApproval = (d) => d[0].approvals;
    const requestsAsArr = requests.split(',');
    const promiseArr = requestsAsArr.map(
        (i) => this.someService.getAllDataByType(
            REQUEST_TYPE, i));

    this.ngQ_.all(promiseArr).then((data) => {
      this.data = data.map(outEachApproval); // How the hell do I test this.data at this point in time in the unit test?
    });
  }

Controller_test.js

describe('someModule', ()=> {


 let $componentController,
      ctrl,
      $rootScope,
      $q;

  const mockData = [[{approvals: [{name: 'hey'}]},{approvals: [{name: 'hey'}]}]];
  const expectedData = [[{name:'hey'}],[{name:'hey'}]];
  beforeEach(() => {
    module(someModule.name);

    inject((_$componentController_, _$rootScope_, _$q_) => {

      $componentController = _$componentController_;
      $q = _$q_;
      $rootScope = _$rootScope_;
    });


    ctrl = $componentController(COMPONENT_NAME,
    {
      $scope: $rootScope.$new(),
      someService: {
        getAllDataByType: () => {
          return Promise.resolve(mockData);
        }
      }
    }, {});
  });

  describe('this.data input', ()=> {
    it('should be undefined', () => {
      expect(ctrl.data).toBeUndefined();
    });
  });

  describe('this.data output', ()=> {
    it('should be equal to expectedData after init', (done) => {
      ctrl.$onInit();
      expect(ctrl.data).toEqual(expectedData);
      ctrl.ngScope_.$apply();
      done();    
    });
  });
});

Answer 1

我看到了几种处理它的方法：

第一

首先让你的someService mock在你的测试中可用：

let someServiceMock = {
  getAllDataByType: () => {
    //we can leave this empty
  }
};

...

beforeEach(() => {

...

  ctrl = $componentController(COMPONENT_NAME,
  {
    $scope: $rootScope.$new(),
    someService: someServiceMock
  }, {});

});

然后在你的测试中只是窥探它：

describe('this.data output', ()=> {
  it('should be equal to expectedData after init', (done) => {
    //as we use $q.all(), we need to create array of promises
    let deferred1 = $q.defer();
    ...
    let deferredN = $q.defer();
    let arrayOfPromises = [deferred1.promise, ... ,deferredN.promise];
    //then we spy on needed method and mock its return value
    spyOn(someServiceMock, 'getAllDataByType').and.returnValue(arrayOfPromises);
    ctrl.$onInit();
    expect(someServiceMock.getAllDataByType).toHaveBeenCalled();
    //now we resolve our promises with any data we want
    let resolveData1 = /*Promise#1 mocked data*/;
    deferred1.resolve(resolveData1)
    let resolveData2 = /*Promise#2 mocked data*/;
    deferred2.resolve(resolveData2)
    ...
    let resolveDataN = /*Promise#N mocked data*/;
    deferredN.resolve(resolveDataN)
    //$q.all() returns array, so expectedData would be array
    let expectedData = [
      resolveData1,
      resolveData2,
      ...
      resolveDataN
    ];
    //then we need to apply changes
    $rootScope.$apply();
    expect(ctrl.data).toEqual(expectedData);
    ctrl.ngScope_.$apply();
    done();    
  });
});

这是一个简单的plunker，可以使用多个$q.defer()实例。

顺便说一句，如果someServiceMock.getAllDataByType()中的请求是通过angular $http ，那么你可以使用$httpBackend服务来模拟它们。

---

第二

在组件控制器中为$q服务创建一个模拟：

let $qMock = {
  all: () => {
    //we can leave this empty
  }
}

...

beforeEach(() => {

...

  ctrl = $componentController(COMPONENT_NAME,
  {
    $scope: $rootScope.$new(),
    someService: {
      getAllDataByType: () => {
        return Promise.resolve(mockData);
      }
    },
    $q: $qMock
  }, {});

});

然后在你的测试中只是窥探它：

describe('this.data output', ()=> {
  it('should be equal to expectedData after init', (done) => {
    let deferred = $q.defer();
    spyOn($qMock, 'all').and.returnValue(deferred.promise);
    ctrl.$onInit();
    expect($qMock.all).toHaveBeenCalled();
    deferred.resolve(expectedData);
    //now we need to apply changes
    $rootScope.$apply();
    expect(ctrl.data).toEqual(expectedData);
    ctrl.ngScope_.$apply();
    done();    
  });
});

此测试更简单，但请注意，它不依赖于someService.getAllDataByType()将返回的内容。

---

一些关于主题的有用文章：

• https://docs.angularjs.org/api/ng/service/ $ q
• http://www.bradoncode.com/blog/2015/07/13/unit-test-promises-angualrjs-q/