Question

One of my backbone view’s initialize function contains the following code:

$.when(this.broadcasters.fetch(), 
       this.model.fetch(), this.call_types.fetch()).done(
          function(){
              do_important_stuff
          });

The results of the fetches are not relevant to the test, but the code within the block is important for the test.

My initial thought was to use jasmine-ajax, but that only supports responding to the most recent request and we actually have 3 different AJAX requests to respond to.

I can’t really mock them out because I don’t have an object to mock on (since this is an initialize function).

In the end I ended up just running the “do_important_stuff” manually, which doesn’t seem ideal since it duplicates code into the test.

Edit:

By request, how the view instance is created:

var responder = new EmailResponder({model: email, el: some_element, reply: true});

Answer 1

You should probably try to use sinon.js. It’s great library for stubbing and mocking, including mocking XHR.
Take a look at example:

var Model = Backbone.Model.extend({});
var Collection = Backbone.Collection.extend({
    model: Model,
    url: "/api/models"
});

var server = sinon.fakeServer.create();
server.respondWith("/api/broadcasters", [
    200,
    {"Content-Type": "application/json"},
    JSON.stringify({"data": "foo"})
]);

server.respondWith("/api/models", [
    200,
    {"Content-Type": "application/json"},
    JSON.stringify({"data": "bar"})
]);

server.respondWith("/api/call_types", [
    200,
   {"Content-Type": "application/json"},
    JSON.stringify({"data": "baz"})
]);

$.when($.get('/api/broadcasters'), $.get('/api/call_types'), collection.fetch()).then(function() {
    console.log('here it is!');
});

server.respond();

http://jsfiddle.net/theotheo/DxVkr/