如何使用在 AngularJS 中返回承诺的 $resource 测试工厂？答案

【问题标题】：How to test a factory with $resource which returns a promise in AngularJS?如何使用在 AngularJS 中返回承诺的 $resource 测试工厂？
【发布时间】：2016-03-15 14:54:08
【问题描述】：

在我的 Angular 应用程序中，我有一个 controller 定义如下：

angular.module('myApp.controllers')
  .controller('AppController', function($rootScope, $scope, CheckResource) {
    $scope.check = function(data) {
      var promise = CheckResource.query(data).$promise;
      promise.then(function(result) {
         $scope.value = result;
      }, function() {
         $scope.value = "default";
      });
    };
  };

我的CheckResource 是Factory 如下：

angular.module('myApp.services', ['ngResource'])
  .factory('CheckResource', function($resource) {
    return $resource('/check', {}, {
      query: {
        method: 'POST'
      }
    });
  });

我想为我的控制器AppController 编写一个单元测试并以某种方式模拟我的工厂CheckResource，但我不确定我如何使用$q 和延迟承诺来实现这一点。谁能解释一下这种情况发生了什么？

我有哪些选择来测试这个场景？我应该嘲笑我的服务吗？我应该使用spyOn 吗？我应该使用$httpBackend 吗？或者，我应该进行 E2E 测试吗？

【问题讨论】：

你必须将 $httpBackend 服务注入到你的测试文件中

标签： javascript angularjs unit-testing jasmine karma-jasmine

【解决方案1】：

假设您在测试中模拟了一个控制器，您可以执行以下操作：

var deferred;

beforeEach(inject(function($q) {
    deferred = $q.defer();

    myController.CheckResource = {
        query: function() {
            return {$promise: deferred.promise};
        }
    };
}));

然后在您的测试中：

it('tests CheckResource', function() {
     deferred.resolve([]);
     expect(something).toHaveHappened();
});

【讨论】：

【解决方案2】：

ngResource 在单独的模块中定义。请检查文档http://docs.angularjs.org/api/ngResource 换句话说，您必须将 ngResource 依赖项包含并添加到 MyApp.Factory 模块 - angular.module("MyApp.Factory", ["ngResource"])

var factory;

beforeEach(function () {

  module("MyApp.Factory");

  inject(function (_factory_) {
    factory = _factory_;
  });

});

【讨论】：