我正在使用 Jasmin、Simon 和 jasmin-simon 测试主干 View 。

代码如下:

var MessageContainerView = Backbone.View.extend({
    id: 'messages',
    initialize: function() {
        this.collection.bind('add', this.addMessage, this);
    },
    render: function( event ) {
        this.collection.each(this.addMessage);
        return this;
    },
    addMessage: function( message ) {
        console.log('addMessage called', message);
        var view = new MessageView({model: message});
        $('#' + this.id).append(view.render().el);
    }
});

实际上，我的所有测试都通过了，只有一个。我想检查当我将项目添加到 this.collection 时是否调用了 addMessage。

describe('Message Container tests', function(){
    beforeEach(function(){
        this.messageView = new Backbone.View;
        this.messageViewStub = sinon.stub(window, 'MessageView').returns(this.messageView);

        this.message1 = new Backbone.Model({message: 'message1', type:'error'});
        this.message2 = new Backbone.Model({message: 'message2', type:'success'});
        this.messages = new Backbone.Collection([
            this.message1, this.message2            
        ]); 

        this.view = new MessageContainerView({ collection: this.messages });
        this.view.render();

        this.eventSpy = sinon.spy(this.view, 'addMessage');
        this.renderSpy = sinon.spy(this.messageView, 'render');
        setFixtures('<div id="messages"></div>');
    });
    afterEach(function(){
        this.messageViewStub.restore();
        this.eventSpy.restore();
    });

    it('check addMessage call', function(){
        var message = new Backbone.Model({message: 'newmessage', type:'success'});
        this.messages.add(message);

        // TODO: this fails not being called at all
        expect(this.view.addMessage).toHaveBeenCalledOnce();
        // TODO: this fails similarly
        expect(this.view.addMessage).toHaveBeenCalledWith(message, 'Expected to have been called with `message`');
        // these pass
        expect(this.messageView.render).toHaveBeenCalledOnce();
        expect($('#messages').children().length).toEqual(1);
    });
});

如您所见，确实调用了 addMessage。 (它记录到控制台，并按应有的方式调用 this.messageView。我在监视 addMessage 调用时错过了什么？

谢谢，维克托

最佳答案

我不确定，但据我了解，会发生以下情况:

1. 您创建一个调用initialize 函数的新 View 并将您的view.addMessage 绑定(bind)到您的集合。
2. 这样做，Backbone 获取函数并将其存储在您集合的事件存储中。
3. 然后你监视 view.addMessage，这意味着你用监视函数覆盖它。这样做不会影响存储在集合事件存储中的函数。

所以它们是您的测试存在的一些问题。您的 View 有很多您没有模拟的依赖项。您创建了一堆额外的主干模型和集合，这意味着您不仅要测试 View ，还要测试主干集合和模型功能。

您不应该测试 collection.bind 是否有效，而是您已经使用参数 'add', this.addMessage 在集合上调用了 bind , 这个

initialize: function() {
    //you dont 
    this.collection.bind('add', this.addMessage, this);
},

因此，模拟集合很容易:

var messages = {bind:function(){}, each:function(){}}
spyOn(messages, 'bind');
spyOn(messages, 'each');
this.view = new MessageContainerView({ collection: messages });

expect(message.bind).toHaveBeenCalledWith('bind', this.view.addMessage, this.view);

this.view.render()

expect(message.each).toHaveBeenCalledWith(this.view.addMessage);

... and so on

这样做你只测试你的代码，而不依赖于 Backbone。

关于javascript - Sinon 似乎没有监视事件处理程序回调，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8931334/