AngularJS unit testing: $httpBackend.when dynamic responses

Question

I'm playing with AngularJS unit testing when developing Feed (RSS) application. The Feed can fetch remote rss data parse it and save parsed items. For testing rss fetching I use $httpBackend mock:

beforeEach(inject(function (_$httpBackend_, _feedMock_, _mockConfig_) {
    _$httpBackend_.when('GET', _mockConfig_.FEED_URL).respond(_feedMock_);
}));

and then below

$httpBackend.expectGET(mockConfig.FEED_URL);
feed.fetch();
$httpBackend.flush();

it works fine.

But I need to make the Feed can actualize it's state by fetching updated rss data and appending new items. So, the Feed make the same request, but got new updated data. I'm trying to recreate server definition by something like this:

$httpBackend.when('GET', _mockConfig_.FEED_URL).respond(feedMockUpdated);

and then make the same operation with expect and flush, but $httpBackend response with old data (feedMock), not new (feedMockUpdated). How can I make $httpBackend to response with the different data on the same request?

Alex Osborn · Accepted Answer · 2013-04-29 23:29:39Z

17

You can set up respond with a function, not just a static data set.

From the docs:

http://docs.angularjs.org/api/ngMock.$httpBackend

respond – {function([status,] data[, headers])|function(function(method, url, data, headers)} – The respond method takes a set of static data to be returned or a function that can return an array containing response status (number), response data (string) and response headers (Object).

So as I understand in your case, you want to have the same endpoint return different data on later calls, you can try something like the following. This is just implementing a simple counter that will switch the data on a subsequent call.

var rssCalled = 0;

$httpBackend.when('GET', _mockConfig_.FEED_URL).respond(function(method, url, data, headers){
    if(rssCalled === 0) {
        rssCalled++;
        return [200, feedMock, {}];
    } else {
       return [200, feedMockUpdated, {}];
    }
});

answered Apr 29, 2013 at 23:29

Alex Osborn

9,8313 gold badges35 silver badges44 bronze badges

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

1 Comment

rob Over a year ago

If your using Typescript you would have to return something like [<any>200, <any>feedMock, <any>{}]. I don't understand why the return value is designed to be an array and not an object

Collectives™ on Stack Overflow

AngularJS unit testing: $httpBackend.when dynamic responses

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related