javascript - Backbone.js view tests using Sinon Spies in a browser - Stack Overflow

admin管理员组

文章数量:1200772

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:

beforeEach(function () {
    $('body').append('<div class="sidebar"></div>');
    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();
        }
    });   
});

I'm using Sinon Spies to attach a spy object to the render function of the profileView view object.

The view is:

var ProfileView = Backbone.View.extend({
    el: '.sidebar'
  , template: Hoganpile(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;
    }
});

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.

As an experiment, I tried calling the render function in the test to see if the Spy identified it:

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();
        }
    });   
});

The Spy detected the called was made in the case above.

Does anyone know why the Spy isn't identifying the render call in my initial test?

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:

beforeEach(function () {
    $('body').append('<div class="sidebar"></div>');
    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();
        }
    });   
});

I'm using Sinon Spies to attach a spy object to the render function of the profileView view object.

The view is:

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;
    }
});

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.

As an experiment, I tried calling the render function in the test to see if the Spy identified it:

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();
        }
    });   
});

The Spy detected the called was made in the case above.

Does anyone know why the Spy isn't identifying the render call in my initial test?

• javascript
• backbone.js
• mocha.js
• sinon

Share Improve this question Follow asked Mar 8, 2012 at 19:56 AlexizamericanAlexizamerican 3,3542020 silver badges1515 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 25

The problem is that during construction of the view, the initialize function binds an event directly to the render function. You cannot intercept this event with a spy because the binding has already happened before you setup your spy (which you do after construction).

The solution is to spy on the prototype before you construct the view. So you will have to move the spy into the beforeEach, or move construction of the view into the test.

To setup the spy:

this.renderSpy = sinon.spy(ProfileView.prototype, 'render');
this.view = new ProfileView();

Then later, to remove the spy:

ProfileView.prototype.render.restore()

This will then spy on 'ordinary' calls to render, as well as the change event from the model.

Just 3 guesses:

1. You are supposing that the fetch({ success }) callback is being called after the Model has been updated and the Model event triggered.. and maybe is not like this. Solution: try to play debugging around here.
2. Maybe the fetch call is not success so the success callback is not called. Solution: try to add an error callback to the fetch to see if is there where we are sended.
3. The Model.validate responses false, what is not very probable if you have not implemented it.

(I bet for the 2.)

This worked for me, though the spy is used in the collection:

var thatzzz = this;
    this.hcns.fetch({
        success: function(){
            expect( thatzzz.hcnsFetchSpy ).toHaveBeenCalled();
        }
});

• spy was defined on beforeEach

本文标签： javascriptBackbonejs view tests using Sinon Spies in a browserStack Overflow