AngularJS - Unit testing file uploads

Question

As you know, inside unit tests it's built-in angularjs feature to mock XHR requests with $httpBackend - this is nice and helpful while writing unit tests.

Recently, I met with need of mocking XHR in case of file upload and discovered some problems.

Consider following code:

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", uploadProgress(event), false);
xhr.addEventListener("load", uploadComplete(event), false);
xhr.addEventListener("error", uploadError(event), false);
xhr.addEventListener("abort", uploadAbort(event), false);
xhr.open("POST", 'some url');
xhr.send(someData);

What I want to do is to do unit testing of such a code with mocking of XHR requests, but it's not possible do it because there is no $http service used here.

I tried this (and it's working and could be mocked with $httpBackend):

$http({
    method: 'POST', 
    url: 'some url', 
    data: someData, 
    headers: {'Content-Type': undefined},
    transformRequest: angular.identity})
.then(successCallback, errorCallback);

But in this case I don't know how to implement 'progress' callback and 'abort' callback (they are essential and required in case I am working on now).

I've seen information that latest Angular supports progress callback for promises (not sure though whether it's integrated with $http service), but what about abort callback?

Any ideas or maybe your met with something similar before?

dnc253 · Accepted Answer · 2013-09-27 21:55:14Z

11

+50

If the $http service doesn't give you everything you need, you can still unit test the first block of code. First of all, change your code to use Angular's $window service. This is just a wrapper service, but it allows you to mock the object in your tests. So, you'll want to do this:

var xhr = new $window.XMLHttpRequest();

Then in your tests, just mock it and use spies.

$window.XMLHttpRequest= angular.noop;
addEventListenerSpy = jasmine.createSpy("addEventListener");
openSpy = jasmine.createSpy("open");
sendSpy = jasmine.createSpy("send");
xhrObj = {
   upload: 
   {
       addEventListener: addEventListenerSpy
   },
   addEventListener: addEventListenerSpy,
   open: openSpy,
   send: sendSpy
};
spyOn($window, "XMLHttpRequest").andReturn(xhrObj);

From there, you can make the different spies return whatever you want for the different tests.

answered Sep 27, 2013 at 21:55

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gonzofish Over a year ago

This was so helpful...and so damn obvious!

Caio Cunha · Accepted Answer · 2013-09-30 14:22:54Z

2

You should mock $http and control any deferred, as you want more control over your test. Basically, mock $http provider and serve a custom implementation that exposes its deferred, then play with it.

You should not worry whether $http is working right or not, because it is supposed to, and is already tested. So you have to mock it and only worry testing your part of the code.

You should go something like this:

describe('Testing a Hello World controller', function() {
  beforeEach(module(function($provide) {
    $provide.provider('$http', function() {
      this.$get = function($q) {
        return function() {
          var deferred = $q.defer(),
              promise = deferred.promise;

          promise.$$deferred = deferred;
          return promise;
        }
      };
    });
  }));

  it('should answer to fail callback', inject(function(yourService, $rootScope) {
    var spyOk = jasmine.createSpy('okListener'),
        spyAbort = jasmine.createSpy('abortListener'),
        spyProgress = jasmine.createSpy('progressListener');

    var promise = yourService.upload('a-file');
    promise.then(spyOk, spyAbort, spyProgress);

    promise.$$deferred.reject('something went wrong');
    $rootScope.$apply();

    expect(spyAbort).toHaveBeenCalledWith('something went wrong');
  }));
});

And your service is simply:

app.service('yourService', function($http) {
  return {
    upload: function(file) {
      // do something and
      return $http({...});
    }
  };
});

Just note that promises notification is only available in the latest RC release. So, if you can't use it, just elaborate a little more the example and mock the XHR events and so.

Also note that you should preferably have one test case for each of the callbacks (fail, success and progress), in order to follow KISS principle.

answered Sep 30, 2013 at 14:22

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

4 Comments

Egor Smirnov Over a year ago

Thank you, this is another variant, but dnc253's solution looks more clear, from my point of view.

Egor Smirnov Over a year ago

By the way, what this - 'promise.$$deferred = deferred;' means?

Caio Cunha Over a year ago

I was just exposing the deferred so you could control whether to resolve, abort or notify the promise. dnc253's answer is definitely better if you do intend to use XHR directly instead of using Angular $http.

thynctank Over a year ago

To clarify for anyone who doesn't see a use case for using raw XHR vs $http, certain newer facilities such as xhr.upload.onprogress are not yet exposed. This is as of Angular 1.2, I haven't gotten to truly sink my teeth into anything newer yet

Collectives™ on Stack Overflow

AngularJS - Unit testing file uploads

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related