title: Backbone.js view tests using Sinon Spies in a browser
body: <p>I'm writing a test for a Backbone View to test that the render function is being called after fetching the model. The test is:</p>
  
  <pre><code>beforeEach(function () {
      $('body').append('&lt;div class="sidebar"&gt;&lt;/div&gt;');
      profileView = new ProfileView();
  });
  
  it('should call the render function after the model has been fetched', function (done) {
      profileView.model = new UserModel({md5: 'd7263f0d14d66c349016c5eabd4d2b8c'});
      var spy = sinon.spy(profileView, 'render');
      profileView.model.fetch({
          success: function () {
              sinon.assert.called(spy);
              done();
          }
      });   
  });
  </code></pre>
  
  <p>I'm using Sinon Spies to attach a spy object to the render function of the profileView view object.</p>
  
  <p>The view is:</p>
  
  <pre><code>var ProfileView = Backbone.View.extend({
      el: '.sidebar'
    , template: Hogan.compile(ProfileTemplate)
    , model: new UserModel()
    , initialize: function () {
          this.model.bind('change', this.render, this);
          this.model.fetch();
      }
    , render: function () {
          $(this.el).html(this.template.render());
          console.log("Profile Rendered");
          return this;
      }
  });
  </code></pre>
  
  <p>After the fetch is called in the test, the change event is firing and the view's render function is getting called, but the Sinon Spy isn't detecting that render is being called and fails.</p>
  
  <p>As an experiment, I tried calling the render function in the test to see if the Spy identified it:</p>
  
  <pre><code>it('should call the render function after the model has been fetched', function (done) {
      profileView.model = new UserModel({md5: 'd7263f0d14d66c349016c5eabd4d2b8c'});
      var spy = sinon.spy(profileView, 'render');
      profileView.render();
      profileView.model.fetch({
          success: function () {
              sinon.assert.called(spy);
              done();
          }
      });   
  });
  </code></pre>
  
  <p>The Spy detected the called was made in the case above. </p>
  
  <p>Does anyone know why the Spy isn't identifying the render call in my initial test?</p>