Question

我试图在我的Jasmine测试中模拟来自Angular的http调用的一些响应。

我有一项名为＆＃39; ImageService＆＃39;这有一个名为＆＃39; create＆＃39;的函数。我正在监视创建并返回被拒绝的承诺，因为我正在尝试测试错误。

这是我的服务：

this.create = function(image) {
    return imageApi.post(image);
};

imageApi变量是一个Restangular实例。

我的测试看起来像这样：

spyOn(ImageService, 'create').and.callFake(function () {
    var deferred = $q.defer();
    deferred.reject({
        data: {
            status: 400,
            errors: {
                "image.fileNotImage": "File uploaded is not an image."
            }
        }
    });
    return deferred.promise;
});

虽然我拒绝承诺，但它并没有进入我的控制器的错误回调。来自我的控制器的调用看起来像这样。

ImageService.create(formData)
    .then(function(response) {
         console.log(response);
              vm.imagePreview = response;
              createAdMedia(adMedia, response.fileURL);
         }, function(error) {
              console.log(error);
              /**
              * If we get no data then we can assume its a 500 or
              * 405 error so we give a generic error message
              */
              if (error.data.errors) {
                   var errors = error.data.errors;
                   for (var key in errors) {
                        showMessage("errorMessage", DWIN.i18n.t(errors[key]));
                    }
              } else {
                    showMessage("errorMessage", DWIN.i18n.t("merchant.admedia.failure"));
              }
        });

有人能看到这个问题吗？

谢谢！

Answer 1

您没有提供测试的完整代码，但我怀疑您在调用服务函数后省略了执行$ digest（）或$ apply（）。没有这个角度将不会执行它通常做的任何自动化功能，因为您在测试环境而不是正在运行的应用程序。

以下示例说明如何将$ q更简单地与$ digest（）结合使用，假设您正在测试使用此create方法的控制器：

beforeEach(inject(function ($rootScope, $controller, _$q_, _YourService_) {
    $scope = $rootScope.$new();
    $q = _$q_;
    YourService = _YourService_;

    YourController = $controller('YourController', { $scope: $scope });
}));

it('Should do something', function () {
    spyOn(YourService, 'create').and.returnValue($q.reject({data: yourdata}));

    YourController.theMethodThasUsesCreate();
    $scope.$digest();

    expect(something).toHaveBeenCalled();
});

Answer 2

一些概念证明，没有抄袭所有的东西/方法。

angular.module('image', [])
  .service('ImageService', function($q) {
    this.create = function() {
      return $q.when();
    }
  })
  .controller('ImageCtrl', function(ImageService) {
    ImageService.create()
      .then(function(response) {}, function(error) {
        console.error('error', error);
      });
  });


describe('ImageCtrl', function() {

  var $scope;

  beforeEach(module('image'))

  beforeEach(inject(function($rootScope) {
    $scope = $rootScope.$new()
  }))

  it('ImageService.create() - supports rejection', inject(function($controller, $q, ImageService) {
    var errorMessage = {data: {error: 'some error message'}}
    spyOn(ImageService, 'create').and.returnValue($q.reject(errorMessage))
    spyOn(console, 'error')
    
    $controller('ImageCtrl', {
      $scope: $scope
    });
    
    $scope.$digest();
    
    expect(console.error).toHaveBeenCalledWith('error', errorMessage)
  }))
})

<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>

使用Jasmine模拟Angular http响应不会进入回调函数

2 个答案: