javascript - 如何模拟带有参数的 Angular 服务方法

Question

我正在尝试测试我的 Angular Controller ，并且需要模拟多个服务才能执行此操作。我将重点关注这个问题中的一项服务，因为其余服务的功能类似。我使用依赖注入(inject)来获取 playersService 并在我的 Controller 中像这样使用它:

angular.module('gameApp')
  .controller('PlayerInfoController', PlayerInfoController);

PlayerInfoController.$inject = ['$scope', '$routeParams', 'playersService'];

function PlayerInfoController($scope, $routeParams, playersService) {
  var vm = this;
  var playerId = $routeParams.playerId;

  playersService.getDetails({
    playerId: playerId
  }).$promise.then(function(details) {
    vm.details = details;
  });
}

相关服务如下所示:

angular.module('gameApp')
  .factory('playersService', ['$resource',
    function($resource) {
      var base = '/api/players/:playererId/';
      return $resource(base, {}, {
        getDetails: {method: 'GET', url: base + 'details'}
      });
    }]);

下面是我当前的单元测试设置，该设置失败并出现以下错误:TypeError: 'undefined' is not an object (evaluating 'playersService.getDetails({playerId: playerId}).$promise.then')

describe('PlayerInfoController', function() {
  var scope;
  var routeParams;
  var playersService;

  beforeEach(function() {
    var mockPlayersService = {};
    module('gameApp', function($provide) {
      $provide.value('playersService', mockPlayersService);
    });
    inject(function($q) {
      mockPlayersService.details = {
        'firstName': 'John',
        'lastName': 'Doe',
        'country': 'US'
      };

      mockPlayersService.getDetails = function(playerId) {
        var defer = $q.defer();
        defer.resolve(this.details);
        return defer.promise;
      };
    });
  });

  beforeEach(inject(function($controller, $rootScope, _$routeParams_, _playersService_) {
    scope = $rootScope.$new();
    routeParams = _$routeParams_;
    playersService = _playersService_;

    $controller('PlayerInfoController', {$scope: scope, $routeParams: routeParams, playersService: playersService});

    scope.$digest();
  }));

  it('should say 2 === 2', function() {
    expect(2).toEqual(2);
  });
});

Answer 1

playersService.getDetails 通常会返回一个具有 $promise 属性的相对空的对象，一旦调用完成，该对象就会填充结果。

您的mockPlayersService.getDetails需要返回一个类似的对象，因此应该这样做:

mockPlayersService.getDetails = function(playerId) {
    var defer = $q.defer();
    defer.resolve(this.details);
    return angular.extend({$promise: defer.promise}, this.details);
  };

作为注释，根据 Angular 文档，您通常会像这样使用服务(第二个参数可以是调用成功的函数，而不是使用 $promise)。

playersService.getDetails({
  playerId: playerId
}, function(details) {
  vm.details = details;
});

这还需要您修改您的模拟服务。