用 Jasmine 监视 Backbone.js 视图函数答案

【问题标题】：Spy on Backbone.js View Functions with Jasmine用 Jasmine 监视 Backbone.js 视图函数
【发布时间】：2012-12-27 15:04:00
【问题描述】：

我正在尝试编写 Jasmine 规范，以验证在将模型添加到视图集合时是否调用了视图函数。

在视图的初始化函数中我做

this.collection.on('add', this.fooAdded, this);

在我的 Jasmine 规范中，我正在做：

describe('Foo View', function() {
   it('should call fooAdded when a Foo is added', function() {
      var view = new FooView({collection: new FooCollection()});
      spyOn(view, 'fooAdded').andCallThrough();
      view.delegateEvents();
      view.collection.add({name: 'foo'});
      expect(view.fooAdded).toHaveBeenCalled();
   });
});

我的 fooAdded() 实现将一些内容记录到控制台，所以我知道它正在被调用。然而，间谍没有看到 fooAdded() 已被调用。

见我的jsFiddle

【问题讨论】：

标签： backbone.js jasmine

【解决方案1】：

您的问题是spyOn 用新的包装函数替换了被监视的函数，但您在使用该函数之后替换它。当您调用 spyOn(view, 'fooAdded') 来附加您的间谍时，对原始 fooAdded 的引用已经在集合的侦听器列表中，因此监视该回调为时已晚。

如果您在实例化您的视图之前在视图原型中窥探fooAdded：

spyOn(FooView.prototype, 'fooAdded');
var view = new FooView(...);
view.delegateEvents();
//...

那么事情应该会更好。演示：http://jsfiddle.net/m5Baw/1/（感谢 amiuhle 更新演示中的 Jasmine 链接）。

顺便说一句，我认为您的视图发生了一些奇怪的事情，您不需要在视图代码之外使用view.delegateEvents()，因此您可能想仔细看看。

【讨论】：

您的 jsFiddle 无法正常工作，因为 Jasmine 来源在 gh-pages 上的位置发生了变化。更新 jsFiddle：jsfiddle.net/m5Baw/1
@amiuhle：很酷，谢谢。我只是将其合并到后代的答案中。

【解决方案2】：

我正要回应，“mu 太短了”正是这一点。证明您的间谍没有注册的第一件事是使用以下代码而不是您的代码spyOn(view, 'fooAdded').andCallThrough();

spyOn(FooView.prototype, 'fooAdded').andCallFake(function(){
           console.log('fake "fooAdded" called');
        });

这永远不会被调用，因为fooAdded 已经注册到集合监听器。这是更新的jsFiddle

【讨论】：