Mocking an asynchronous web service in Angular unit tests

Question

I'm building an Angular app, and I'm writing unit tests for it. Yay unit tests. I want to mock a particular web service that I'm using (Filepicker.io), which has both a REST API as well as a Javascript API. In my code I use the Javascript API in calls like

filepicker.store(file,
        {    
            options: 'go',
            right: 'here'
        },   
        // filepicker's success callback
        function(resultObject){ 
            // do stuff with the returned object
        }

I know that I could use the $httpBackend provider if I were interacting with Filepicker's REST API, but since my application's code isn't doing that, I'm wondering if/how I could mock an asynchronous API call like this in an Angular unit test.

Do I just override the store method (or the whole filepicker object) in context of my test suite and make it return dummy data of my choosing? That's what they're doing with AngularFire development, with a library that overrides the 'real' Firebase backend service.

Alternately, could I wrap the method in something that uses $httpBackend, so I can use all those handy $httpBackend methods like respond? What's the right strategy here? The first one seems like a simpler and cleaner idea.

Here are some other questions that were similar but ultimately not clear enough for me to fully understand.

AngularJS: unit testing application based on Google Maps API

Unit testing Web Service responses

Mocking Web Services for client layer unit testing

laurent · Accepted Answer · 2014-09-26 05:57:00Z

2

I would first set your SDK as an injectable Service so it can be used more easily by your angular app

myApp.factory('FilePicker',function(){
   //likely coming from global namespace 
   return filepicker;
})
.controller('ctrl',['FilePicker',function(FilePicker){
    //use File picker
}];

Now you should be able to inject a mock instead of the real implementation for your tests. An example with a our controller

describe('ctrl test', function(){
    var ctrl;

    beforeEach(inject(function($controller){
        var mockService={} // here set up a mock

        ctrl=$controller('ctrl',{FilePicker:mockService});
    }));
});

answered Sep 26, 2014 at 5:57

laurent

2,62020 silver badges26 bronze badges

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

1 Comment

Kato Over a year ago

It would behoove you to use $window.filepicker, which allows the filepicker service to easily be mocked even if it's directly included somewhere instead of via a service, and also prevents jshint from complaining about global variables.

Collectives™ on Stack Overflow

Mocking an asynchronous web service in Angular unit tests

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related