Mocking an asynchronous web service in Angular unit tests

Aidan Miles

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

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});
    }));
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

Mocking HttpClient in unit tests

From Java

Mocking AngularJS module dependencies in Jasmine unit tests

From Java

Mocking $modal in AngularJS unit tests

From Dev

Angular unit-test controllers - mocking service inside controller

From Dev

Angular Unit Testing - Mocking methods/closures in same service

From Dev

Asynchronous unit tests with .NET 4.0

From Dev

Mocking default=timezone.now for unit tests

From Dev

mocking a dialog box inside unit tests

From Dev

Mocking a filter on unit tests of a flow in Mule

From Dev

Unit tests Angular + Protractor

From Dev

TyphoonPatcher for mocking in unit tests

From Dev

Mocking asynchronous service function using angular/karma/jasmine

From Dev

Mocking ngModel in unit tests

From Dev

Asynchronous web service in PHP

From Dev

Mocking Googleads for Unit Tests

From Dev

Mocking $location service in angular unit test

From Dev

Mocking Cocoa objects with unavailable initializers in unit tests

From Dev

Mocking a service in unit tests

From Dev

Mocking pyodbc module calls for django unit tests

From Dev

Mocking Stripe in angular karma tests

From Dev

Mocking an injected field in unit tests

From Dev

WCF Service Method - Refactoring for Unit Test and Mocking

From Dev

Mocking azure blob storage in unit tests

From Dev

Unit tests Angular + Protractor

From Dev

TyphoonPatcher for mocking in unit tests

From Dev

Mocking Service dependency in angularjs tests

From Dev

Angular unit tests, mocking a service that is injected using $injector

From Dev

Mocking a service in unit test in Symfony 3.4

From Dev

NOT mocking HttpClient in Angular 6 tests