Add promise support to respond method of $httpBackend.when(...) calls

[ChrisPearce]

It would be useful for the "respond" method of the httpBackend.when(...) calls to support promises.

Currently the respond method accepts either:

• a set of static data to be returned; or
• a function that can return an array containing response status (number), response data (string), response headers (Object), and the text for the status (string).

The limitation occurs when wanting to use $httpBackend for backend-less development of applications that use the $http service, with scenarios where the "fake" data can only be returned by asynchronous operations (e.g. calls to indexeddb).

[wesleycho]

Couldn't you do

$httpBackend.whenGET(/.../)
  .respond(function () {
   $q(function (resolve, reject) {
     return getDataFromIndexedDB(resolve, reject);
   }).then(function (data) {
     return [200, data];
   });
 });

or something like that?

Edit: Ah, I see the problem there. Perhaps an alternate response callback as an argument inside the respond callback would be useful in this case then.

[carlos-algms]

+1

This is important when we want to use a timeout to mimic a delay of an overloaded server.

[pkozlowski-opensource]

But the whole point of this mock is to be fast & synchronous... Opening up ability to specify async / long running operations would promote the exact opposite practice that we want to promote.... Such tests would be fragile and no longer unit-tests really...

@carlos-algms I'm not sure you want to simulate "overloaded" server in a unit test, really... Could you share a test you are trying to write? You can already simulate different order of responses and IMO this is the only thing that should matter for your test...

Anyway, we need to understand the practical, real-life problem better here, as we don't want to promote async / slow unit tests...

[carlos-algms]

I think that could be the problem. I'm not using it only on unity tests,
I'm using it as a complete replacement of a backend.
An async support, will help on show loading modals and test timeouts.

2015-04-02 17:49 GMT-03:00 Pawel Kozlowski notifications@github.com:

But the whole point of this mock is to be fast & synchronous... Opening up
ability to specify async / long running operations would promote the exact
opposite practice that we want to promote.... Such tests would be fragile
and no longer unit-tests really...

@carlos-algms https://github.com/carlos-algms I'm not sure you want to
simulate "overloaded" server in a unit test, really... Could you share a
test you are trying to write? You can already simulate different order of
responses and IMO this is the only thing that should matter for your test...

Anyway, we need to understand the practical, real-life problem better
here, as we don't want to promote async / slow unit tests...

—
Reply to this email directly or view it on GitHub
#11245 (comment)
.

[petebacondarwin]

We won't be changing the ngMock version of $httpBackend for the reasons given by @pkozlowski-opensource above but we could consider doing so for the ngMockE2E version. See https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend

Perhaps you might like to put together a PR for that?

[ChrisPearce]

Thanks. I'll look to put together a PR for the ngMockE2E version.

[carlos-algms]

I`m currently using the ngMockE2E.
this will be wonderful.

[misutkame]

This is just an basic example of extendended $httpBackend that can "respond" with "async data"
This is just for learning purpose, don't use this without further enhancements and testing

angular
.module('my-module')
.config(function($provide) {
    $provide.decorator('$httpBackend', function($delegate) {
        var oldHttpBackend = $delegate;
        var asincDefinitions = [];

        var httpBackend = function(method, url, data, callback, headers, timeout, withCredentials){
          var match = matchRequest()
          if(match){
            match.response.promise
              //promise resolution: success
              .then(function(promiseResolvedObject){
                callback(200, promiseResolvedObject, match.response.headers, match.response.status )
              })
              //promise.resolution: fail
              .then(null, function(error){
                callback( 404, error, match.response.headers, match.response.status )
              })
          }else{
            oldHttpBackend(method, url, data, callback, headers, timeout, withCredentials);
          }


          function matchRequest() {
            var matches = asincDefinitions
              .filter(function(definition){ return (definition.url === url)?true:false})
              .filter(function(definition){ return (definition.method === method)?true:false})

            return matches.length ? matches[0] : false;
          }
        }

        httpBackend.whenAsync = function(method, url, data, headers) {
          var definition = { method: method, url: url, data: data, headers: headers },
              chain = {
                respond: function(promise, headers, status) {
                  definition.response = { promise: promise, headers: headers, status: status};
                  return chain;
                }
              };
          asincDefinitions.push(definition);
          return chain;
        }

        for(var key in oldHttpBackend) {httpBackend[key] = oldHttpBackend[key];}
        return httpBackend;
    });
  })
}

[felippenardi]

Is there a PR for adding it to ngMockE2E?

[misutkame]

This SHOULD NOT be included in the official release.
You can monkey patch ngMockE2E service and leave the original codebase as it is. ( this is the reason I never made a PR )

[felippenardi]

@mishoo78 Sounds fair! I was thinking about doing that to partially mock an API request.
Can you let me know what do you think about that and if there is a better solution?

Here is what it would look like:
A GET call to /posts/1.json return me this:

{ "title": "My post", "body": "..." }

Now I want to implement a feature that shows the author's name.
I want to intercept that call with $httpBackend, make the actual call to the API using $http, and then transforming the requests so it returns this:

{ "title": "My post", "body": "...", "author": "Bob" }

Is there a better way other than monkey patch ngMockE2E $httpBackend?

[misutkame]

well...
I got interested in this issue, because I was quite interested in making the pouchdb a db provider for a fake-backend (instead of using random generated data with chance.js)... I managed to force asink data through the ngMockE2E using the technique described above.

The other issue, of sending user data along with the posting data... I don't believe is quite REST-full -ish... (user data is user data, posting data is posting data... my advice is to keep them separated)

On the topic of how to handle the posting response.... I would make an angular service that will generate that posting data... (services are functions after all.... and this way, you can fit anything in there...) , then call your service functions with different parameters... et voila...

[amoldavskyzoom]

using of the code from here and some home backed, I have written a plugin for this - angular-mocks-async so that you can do this:

    var app = ng.module( 'mockApp', [
        '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, "mock response", data ] );

            }, 1000 );

            return response.promise;

        });

    }]);

[keemyb]

Why can't you use $timeout.flush(ms) followed by $httpBackend.flush()?