javascript - 如何使用 Angular 对带有 Promise 和回调函数的函数进行单元测试

Question

对如何将 $httpBackend 和 Promise 与单元测试结合起来有点困惑。我试图测试的功能(在 Controller 中)是:

  vm.getData = (callback) => {
    $http.get('http://localhost:3000/cars?_start=0&_end=100').then(result => {
      return callback(result.data);
    });
  };

失败的测试看起来像这样......

  describe('controllerToTest', () => {
    beforeEach(() => {
      angular.module('test', [])
      .controller('controllerToTest', require('./controllerToTest'));
    });

    beforeEach(angular.mock.module('test'));

    beforeEach(angular.mock.inject($injector => {
      $rootScope = $injector.get('$rootScope').$new(true);
      $q = $injector.get('$q').defer();
      $httpBackend = $injector.get('$httpBackend');
      $httpBackend.when("GET", "http://localhost:3000/cars?_start=0&_end=100").respond({});
      vm = $injector.get('$controller')('controllerToTest', {});
    }));


    it('should return the callback function', () => {
      let whatAmI = null;
      let callbackFn = () => {
        whatAmI = 'boom'
      };

      $q.resolve(
        (x) => {
          return x();
        }
      );

      vm.getData(callbackFn);

      $rootScope.$digest();

      expect(whatAmI).toEqual('boom');
    });
  }

Answer 1

$httpBackend 不同步返回结果。要从待处理的 $httpBackend 请求获取响应，应使用 $httpBackend.flush() 方法:

...
vm.getData(callbackFn);

$httpBackend.flush();

$rootScope.$digest();

expect(whatAmI).toEqual('boom');
...

只需确保 $httpBackend 在 it 函数的作用域中可用