Backbone.js 试驾主干视图事件_Backbone.js_Jasmine

Backbone.js 试驾主干视图事件

backbone.js jasmine

Backbone.js 试驾主干视图事件,backbone.js,jasmine,Backbone.js,Jasmine,我正在尝试使用Jasmine测试一个视图事件，通过代码可能可以最好地解释这个问题视图看起来像： App.testView = Backbone.View.extend({ events: { 'click .overlay': 'myEvent' }, myEvent: function(e) { console.log('hello world') } 该测试类似于： describe('myEvent', function() { it('should do so

我正在尝试使用Jasmine测试一个视图事件，通过代码可能可以最好地解释这个问题

视图看起来像：

App.testView = Backbone.View.extend({
  events: { 'click .overlay': 'myEvent' },
  myEvent: function(e) {
    console.log('hello world')
  }

该测试类似于：

describe('myEvent', function() {
  it('should do something', function() {
    var view = new App.testView();
    view.myEvent();
    // assertion will follow
  });
});

问题是从未调用view.myEvent方法（控制台中没有任何日志）。我试图避免从DOM触发。有没有人有过类似的问题

（正如我在问题中所评论的，您的代码看起来不错，应该可以工作。您的问题不在您发布的代码中。如果您可以扩展代码示例并提供更多信息，我们可以再看一看。下面是关于测试主干视图的更一般的建议。）

像您这样调用事件处理函数是一种合法的测试策略，但它有两个缺点

它无法测试事件是否正确连接。您正在测试的是回调是否执行了它应该执行的操作，但它没有测试用户与页面交互时是否实际触发了该操作

如果事件处理程序需要引用

事件

参数，则测试将不起作用

我更喜欢从活动中一路测试我的观点：

var view = new View().render();
view.$('.overlay').click();

expect(...).toEqual(...);

正如您所说，通常不建议在测试中操纵DOM，因此这种测试视图的方法要求

view.render

不向DOM附加任何内容

实现这一点的最佳方法是将DOM操作留给负责初始化视图的代码。如果未将

el

属性设置到视图中（在

视图.extend

定义或视图构造函数中），主干将创建一个新的分离DOM节点作为

视图.el

。此元素的工作方式与连接的节点类似-您可以操作其内容并在其上触发事件

所以不是

View.extend({el: '#container'});

……或者

new View({el:'#container'});

…您应该按如下方式初始化视图：

var view = new View();
$("#container").html(view.render().el);

这样定义视图有多种好处：

启用完全测试视图，而无需将其附加到DOM

视图变得可重用，您可以创建多个实例并将它们渲染到不同的元素

如果您的

render

方法执行一些复杂的DOM操作，则在分离的节点上执行该操作会更快

从责任的角度来看，您可以认为视图不应该知道它放在哪里，就像模型不应该知道它应该添加到哪个集合一样。这加强了视图组合的更好设计

IMHO，这种视图渲染模式是一种通用的最佳实践，而不仅仅是一种与测试相关的特殊情况