Sinon 似乎没有监视事件处理程序回调

2022-01-11 00:00:00 testing jasmine javascript sinon

我正在使用 Jasmin、Simon 和 jasmin-simon 测试主干视图.

I'm testing a backbone view with Jasmin, Simon and jasmin-simon.

代码如下:

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.

Actually, all my tests pass but one. I would like to check that addMessage is called whenever I add an item to this.collection.

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 调用时我错过了什么?

As you can see addMessage is called indeed. (It logs to the console and it calls this.messageView as it should. What do I miss in spying for addMessage calls?

谢谢，维克托

推荐答案

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

I'm not quit sure but, as I understand it, the following happens:

  1. 您创建一个调用 initialize 函数的新视图，并将您的 view.addMessage 绑定到您的集合.
  2. 执行此操作后，Backbone 获取该函数并将其存储在您集合的事件存储中.
  3. 然后你监视 view.addMessage 这意味着你用一个监视函数覆盖它.这样做不会影响收集事件存储中存储的函数.
  1. You create a new view which calls the initialize function and bind your view.addMessage to your collection.
  2. Doing this, Backbone take the function and store it in the event store of your collection.
  3. Then you spy on view.addMessage which means you overwrite it with a spy function. Doing this will have no effect on the function that is stored in the collection event store.

所以他们的测试存在一些问题.您的视图有很多您没有模拟出来的依赖项.您创建了一堆额外的 Backbone 模型和集合，这意味着您不仅要测试您的视图，还要测试 Backbones 集合和模型的功能.

So their are some problems with your test. You view has a lot of dependencies that you not mock out. You create a bunch of additional Backbone Models and Collections, which means you not test only your view but also Backbones Collection and Model functionality.

您不应该测试 collection.bind 是否可以工作，而是您已经使用参数 'add', this.addMessage 对集合调用了 bind, 这个

You should not test that collection.bind will work, but that you have called bind on the collection with the parameters 'add', this.addMessage, this

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

所以，模拟集合很容易:

So, its easy to mock the collection:

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.

Doing it this way you test only your code and have not dependencies to Backbone.

相关文章