javascript - QUnit、Sinon.js 和 Backbone 单元测试受挫 : sinon spy appears to fail to detect Backbone Model event callbacks

标签 javascript backbone.js qunit sinon

在下面的单元测试代码中:

TestModel = Backbone.Model.extend({
    defaults: {
        'selection': null
    },
    initialize: function() {
      this.on('change:selection', this.doSomething);
    },
    doSomething: function() {
        console.log("Something has been done.");
    }
});

module("Test", {
    setup: function() {
        this.testModel = new TestModel();
    }
});

test("intra-model event bindings", function() {
    this.spy(this.testModel, 'doSomething');
    ok(!this.testModel.doSomething.called);
    this.testModel.doSomething();
    ok(this.testModel.doSomething.calledOnce);
    this.testModel.set('selection','something new');
    ok(this.testModel.doSomething.calledTwice); //this test should past, but fails.  Console shows two "Something has been done" logs.
});

第三个 ok 失败,即使该函数是从主干事件绑定(bind)中有效调用的,如控制台所演示的那样。

3rd test fails enter image description here

这非常令人沮丧,动摇了我对 sinon.js 是否适合测试我的主干应用程序的信心。我是在做错什么,还是 sinon 如何检测是否已调用某物的问题?有解决方法吗?

编辑:这是我的具体示例的解决方案,基于已接受答案的猴子补丁方法。虽然它在测试本身中有几行额外的设置代码,(我不再需要模块功能)它完成了工作。谢谢,mu 太短了

test("intra-model event bindings", function() {
    var that = this;
    var init = TestModel.prototype.initialize;
    TestModel.prototype.initialize = function() {
        that.spy(this, 'doSomething');
        init.call(this);
    };

    this.testModel = new TestModel();
    . . . // tests pass!
}); 

最佳答案

调用 this.spy(this.testModel, 'doSomething')new wrapper method 替换 testModel.doSomething 方法:

var spy = sinon.spy(object, "method");

Creates a spy for object.method and replaces the original method with the spy.

所以 this.spy(this.testModel, 'doSomething') 正在有效地做这样的事情:

var m = this.testModel.doSomething;
this.testModel.doSomething = function() {
    // Spying stuff goes here...
    return m.apply(this, arguments);
};

这意味着当您在 initialize 中绑定(bind)事件处理程序时,testModel.doSomething 是一个不同的函数:

this.bind('change:selection', this.doSomething);

比在你附加了你的 spy 之后。 Backbone 事件调度程序将调用原始的 doSomething 方法,但该方法没有 Sinon 工具。当您手动调用 doSomething 时,您正在调用 spy 添加的新函数,并且该函数确实具有 Sinon 工具。

如果您想使用 Sinon 来测试您的 Backbone 事件,那么您必须安排在绑定(bind)任何事件处理程序之前将 Sinon spy 调用应用于模型,这可能意味着 Hook 进入初始化

也许你可以猴子修补你的模型的 initialize 以在它绑定(bind)任何事件处理程序之前添加必要的 spy 调用:

var init = Model.prototype.initialize;
Model.prototype.initialize = function() {
    // Set up the Spy stuff...
    init.apply(this, arguments);
};

演示:http://jsfiddle.net/ambiguous/C4fnX/1/

您还可以尝试使用类似以下内容的子类化您的模型:

var Model = Backbone.Model.extend({});
var TestModel = Model.extend({
    initialize: function() {
        // Set up the Spy stuff...
        Model.prototype.initialize.apply(this, arguments);
    }
});

然后使用 TestModel 而不是 Model,这将为您提供 TestModel 中的 Model 的检测版本,而无需包含一堆正常生产就绪的 Model 中的特定测试代码。缺点是任何其他使用 Model 的东西都需要进行子类化/修补/...以使用 TestModel 代替。

演示:http://jsfiddle.net/ambiguous/yH3FE/1/

您可以通过以下方式解决 TestModel 问题:

var OriginalModel = Model;
Model = Model.extend({
    initialize: function() {
        // Set up the Spy stuff...
        OriginalModel.prototype.initialize.apply(this, arguments);
    }
});

但是您必须获得正确的排序以确保每个人都使用新的模型而不是旧的。

演示:http://jsfiddle.net/ambiguous/u3vgF/1/

关于javascript - QUnit、Sinon.js 和 Backbone 单元测试受挫 : sinon spy appears to fail to detect Backbone Model event callbacks,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10865364/

相关文章:

Javascript - 获取任务图标

javascript - 渲染主干 View 时如何防止图像闪烁?

javascript - IndexedDB 是否需要在升级时关闭?

asp.net - 在 ASP.NET 中使用 QUnit 测试 Javascript 的推荐结构

javascript - 如何使用 Sinon/Qunit 模拟 'timeout' 或 'failure' 响应?

javascript - Mongodb mongoose - 如果字段不存在,如何将文档添加到数组

javascript - 如何在有关 td 旁边显示响应

javascript - 在 Chrome 扩展中插入 CSS

backbone.js - BackboneJS .fetch() 将响应中的一个对象放入集合中

javascript - 如何在 qunit 测试中比较两个事物?