測試在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/