Databases
StackOverflow2013
Postsdbo
POSinon.js and Backbone - Testing for view method invocation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSinon.js and Backbone - Testing for view method invocation
    text
    copied!<p>Im working on a test suite for an existing Backbone application using Jasmine and Sinon and I am testing that my router performs the correct actions on a certain route. Here's the actual route function:</p> <pre><code>favourites: function() { //Dont re-initialize the favourites view as there is no need. //Instead, just render the favourite movies if ( ! this.favMoviesView) { this.favMoviesView = new cinephile.Views.FavouriteMoviesView({ collection: cinephile.favouriteMovies }); } else { this.favMoviesView.renderFavourites(); } $('#content').html(this.favMoviesView.el); }, </code></pre> <p>In my test suite I want to assert that when navigating to to the favourites route <code>this.favMoviesView</code> will be created once and then, if it exists will not re-initialize but instead just call <code>this.favMoviesView.renderFavourites()</code> which is a method that iterates over the view's collection.</p> <p>Here's my test spec:</p> <pre><code>describe('cinephile.Routers.CinephileRouter', function () { beforeEach(function () { this.router = new cinephile.Routers.CinephileRouter(); this.routeSpy = sinon.spy(); try { Backbone.history.start({ silent : true }); } catch(e) {} this.router.navigate('elsewhere'); this.favouritesViewStub = sinon.stub(cinephile.Views, 'FavouriteMoviesView') .returns(new Backbone.View()); }); afterEach(function () { this.favouritesViewStub.restore(); }); describe('Favourites Route', function() { it('should load the favourites on /favourites', function () { this.router.bind('route:favourites', this.routeSpy); this.router.navigate('favourites', true); expect(this.routeSpy.calledOnce).toBeTruthy(); expect(this.routeSpy.calledWith()).toBeTruthy(); }); it('creates a favourites view if one doesn\'t exist', function () { this.router.favourites(); expect(this.favouritesViewStub.calledOnce).toBeTruthy(); }); it('Reuses the favourites view if one does exist and reset it\'s collection', function () { this.router.favourites(); this.router.favourites(); expect(this.favouritesViewStub.calledOnce).toBeTruthy(); expect(this.favouritesViewStub.renderFavourites).toHaveBeenCalledTwice(); }); }); }); </code></pre> <p>My first two tests pass and I believe them to correctly describe the <code>favourites</code> method in my router. The third test is the the one giving me problems. As I understand it, because I am testing my router and NOT the <code>FavouriteMoviesView</code> I should be stubbing out the view to keep the test isolated. If that is the correct assumption, my issue becomes that the stub won't have a <code>renderFavourites</code> method as it is a stubbed out <code>Backbone.View()</code>.</p> <p>How can I fix this particular problem and if you are so inclined, I believe I'm missing something conceptual so feel free to explain what it is that I'm not understanding.</p> <p>Cheers.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload