Spying on Backbone.js route calls with Jasmine

Question

Having problems spying method calls on a Backbone Router to ensure it calles the right method on a given route.

excerpt from the test

describe 'Router', ->
    beforeEach ->
        @router = new App.Router()
        Backbone.history.start()

    afterEach ->
        Backbone.history.stop()

    describe 'routes', ->
         it 'should be defined', ->
              expect(@router.routes).toBeDefined()

         describe 'default route', ->
             it 'should be defined', ->
                  expect(@router.routes['']).toBeDefined()

             it 'should call index', ->
                 spy = spyOn(@router, "index")
                 @router.navigate('', true)
                 expect(spy).toHaveBeenCalled()

The router

class App.Router extends Backbone.Router
    routes:
        '' : 'index'

    index: ->
        console.log "router.index has been called"

Everything passes except the last test "should call index". It fails with the message "Expected spy index to have been called". Ive tried other variants

it "should call index", ->
    spyOn(@router, "index")
    @router.navigate('', true)
    expect(@router.index).toHaveBeenCalled()

I can also see the "router.index has been called" log output in the test output from the original Router.index function

Thanks!

EDIT: One solution

describe '#1 Solution', ->
    it 'should call index', ->
        spyOn(App.Router.prototype, "index")
        @router = new App.Router()
        Backbone.history.start()
        @router.navigate('', true)
        expect(App.Router.prototype.index).toHaveBeenCalled()

score 15 · Accepted Answer · answered Aug 07 '12 at 15:38

It has took too much time to me to come with a working jsFiddle and the question has been already answered by @MarkRushakoff.

Still I have some comments.

The way Backbone is binding the routes make very difficult to test it.

The point is that the router methods are not called directly in the router instance, the methods are taked as callbacks and stored in an internal Backbone.history.route waiting for execution, check the Backbone.Router.route code.

This operation is done in the moment the Router is instantiate, so you have to spy your Router.method before you instantiate the reference, so for you have to delay Backbone.history.start also after the spy has been activated.

As you have to declare the spy before the router instance is created you have to do it in a Class level.

Said so this is the simplest solution I came with:

describe("Router", function() {
  afterEach( function(){
    Backbone.history.stop();
  });

  it("should call index", function(){
    spyOn(App.Router.prototype, "index")
    var router = new App.Router(); // instance created after spy activation
    Backbone.history.start();      // it has to start after the Router instance is created

    router.navigate('', true);

    expect(App.Router.prototype.index).toHaveBeenCalled();  
  });
});

Conclusion, I think the Backbone.Router implementation has not an intuitive design.

This is not a viable way to test the triggering of a route. All this is testing is that the index function was bound to the router as a callback, not that the function is actually called when the route was triggered. See [this S.O. post](http://stackoverflow.com/questions/9215737/testing-routers-in-backbone-js-properly) for how to verify that the corresponding route function was called when a router matches a url. — louism2, Jul 18 '14 at 20:51

score 4 · Answer 2 · answered Aug 07 '12 at 14:09

4

I'm pretty sure this has to do with the way that Backbone binds to its routing methods when you use a routes hash (especially if you're seeing a console log correctly output). That is, the router has bound to the original index method, but your spy has replaced the "current" index method.

You have two options:

spyOn(@router, "index") before you the router binds to the routes (may be difficult)
Spy on the prototype's index method: spyOn(App.router.prototype, "index"); @router.navigate('', true); expect(App.router.prototype.index).toHaveBeenCalled();

answered Aug 07 '12 at 14:09

Mark Rushakoff

249,864
45
407
398

Thanks, that works :) Option number two is viable. The spy needs to be added before a new instance of the router is made. I guess thats OK! – eldewall Aug 07 '12 at 14:22
Option one I think is not possible due the _routes binding_ is done in the _initialize_ so in the moment you have a reference to the instance the binding has been already done. – fguillen Aug 07 '12 at 15:14

Spying on Backbone.js route calls with Jasmine

2 Answers2

Linked