AngularJS ngMockE2E Async

Tested for:

An abstraction on top of ngMockE2E to support async calls using promises.

If you need to make an async operation ( such as working with WebSQL / IndexedDB ) the orignial ngMockE2E will fall through and you will never have the chance to respond with your own response.

ngMockE2EAsync decorates the $httpBackend by utilizing promises. Responses can now be in a form of a promise where the $httpBackend will original function will not be called until your promise has been resolved. Once resolved the original $httpBackend APIs will be called and things will flow their natural ways back to the caller.

jsFiddle Plunker

npm install angular-mocks-async 

<script src="angular.js"></script> <script src="angular-mocks.js"></script> <script src="//cdn.rawgit.com/amoldavsky/angular-mocks-async/master/src/angular-mocks-async.js"></script>

The decorator exposes a new API

$httpBackend.whenAsync()

Which is equivalent to the $httpBackend.when() API but expects a promise in the .respond() function.

Here is an example for an HTTP GET

(function( ng ) { var app = ng.module('myApp', ['ngMockE2E', 'ngMockE2EAsync']) app.run( [ '$httpBackend', '$q', function( $httpBackend, $q ) { $httpBackend.whenAsync( 'GET', new RegExp( 'http://api.example.com/user/.+$' ) ).respond( function( method, url, data, config ) { var re = /.*\/user\/(\w+)/; var userId = parseInt(url.replace(re, '$1'), 10); var response = $q.defer(); setTimeout( function() { var data = { userId: userId }; response.resolve( [ 200, "this is a mocked async GET response", "123" ] ); }, 1000 ); return response.promise; }); $httpBackend.whenGET(/.*/).passThrough(); $httpBackend.whenPOST(/.*/).passThrough(); $httpBackend.whenPUT(/.*/).passThrough(); $httpBackend.whenJSONP(/.*/).passThrough(); $httpBackend.whenDELETE(/.*/).passThrough(); $http({ url: "http://api.example.com/user/103", method: 'GET' }).then( function( response ) { alert( response.data ); }); }]); }(angular);

You may use this API the same way for POST, PUT, UPDATE, and DELETE.

The code adds a custom decorator function to the existing angular mock namespace which already hold similar decorator functions - angular.mock.$HttpBackendAsyncDecorator.

gulpfile.js has the following tasks:

dist test-unminified test-minified 

Please be sure to run these tests when making changes

MIT