Testing backbone router with jasmine and sinon. Cannot call the pushState.

Question

I was following this question to test the router. My router is really simple:

App.Router = Backbone.Router.extend({
    routes:{
        "": "index",
        "help": "help"
    },

    help: function() {/* not really needed */ },

    index: function(){
        // does something
    }   
});

And this is an apptempted translation of what should be the test using jasmine with sinon:

it('triggers the "index" route', function() {
    var router = new App.Router();
    Backbone.history.start();
        //Not calling navigate it's a problem
    router.navigate('help', {
        trigger : true, replace: true
    });
    var index = sinon.spy(router, 'index');

    var spyHasPS = sinon.spy(function(
            data, title, url) {
        expect(url).toEqual('/');
        router.index();
    }); 

    var spyNoPS = sinon.spy(function(loc, frag) {
        expect(frag).toEqual('');
        router.index(); 
    });

    if (Backbone.history._hasPushState) {
        pushStateSpy = sinon.stub(window.history, 'pushState', spyHasPS );
    //  window.history.pushState();
    } else if (Backbone.history._wantsHashChange) {
        pushStateSpy = sinon.stub(Backbone.history, '_updateHash', spyNoPS);
        //Backbone.history._updateHash(window.location, '');
    }

    router.navigate('', {
        trigger : true, replace: true
    });
    expect(pushStateSpy.called).toBe(true);
    expect(index.called).toBe(true);

});

This test works but I could achieve it because I navigated first on "help". "help" was just something I created to pass the test but the original question didn't do it and was passing. Did I do something wrong? I also run his test but the error I'm getting is:

    Expected spy _updateHash to have been called.   Error: Expected spy
 _updateHash to have been called.
    at null.<anonymous> (/src/test/js/spec/wfcRouter.spec.js:65:32)     Expected spy index to have been called.

I believe the "problem" is in the navigate function. At a certain point in the navigate: function(fragment, options) we have this control:

 fragment = this.getFragment(fragment || '');
  if (this.fragment === fragment) return;

So...does it make sense to test the pushState when you just have one route (remember I added "help" just to make this test pass so I don't need it)? If it does make sense, how can I achieve this test?

score 0 · Answer 1 · answered Jan 06 '15 at 21:40

It seems like what you are testing is Backbone code, but there's no need for you to test that: presumably the Backbone code has been tested plenty by Jeremy Ashkenas (and if you look at the Backbone project on GitHub you will see that he does in fact have a comprehensive test suite). So, rather than re-testing code you didn't write that's already been tested, what you really should be testing is the code you wrote.

If you agree with that principle, then you can simplify your test a great deal, down to just:

it('triggers the "index" route', function() {
    var router = new App.Router();

    router.index(); 
    expect(thingThatShouldHaveHappenedInIndexRouteDidHappen).toBe(true);
});

Testing backbone router with jasmine and sinon. Cannot call the pushState.

1 Answers1