使用 jasmine 进行 SpyOn 骨干视图方法

Question

我有一个主干视图，我想创建一个测试来确认某个元素上的单击事件将调用绑定到该元素的函数。 我的观点是：

PromptView = Backbone.View.extend({
        id:"promptPage",
        attributes:{
            "data-role":"page",
            "data-theme":"a"
        },
        events:{
            "click #btnYes":    "answerYes",
            "tap #btnYes":      "answerYes"
        },
        render: function(){
            $(this.el).html(_.template($('#promptPage-template').html(), this.model.toJSON()));

            return this;
        },
        answerYes: function(){
            alert('yes');
        }
    });

我的规范是：

beforeEach(function() {
            model = new PromptModel;
            view = new PromptView({model:model});
            loadFixtures('promptPage.tmpl');
        });

 it("should be able to answer a question with yes", function() {
                var button = $("#btnYes", view.render().el);
                expect(button.length).toBe(1);

                spyOn(view, 'answerYes');

                button.click();
                expect(view.answerYes).toHaveBeenCalled();

            });

但是上面的视图定义在原型 proto 上创建了 answerYes 方法，但是间谍在视图中的实际实例上创建了一个函数，所以我最终得到了一个视图.answerYes() 是间谍，而 view.__proto__.answerYes 是我真正想要监视的。

如何创建一个间谍以便它覆盖视图定义的answerYes 方法？

Answer 1

嗨，我今天遇到了同样的问题。我刚刚找到了解决方案，在创建间谍方法（回答是）后，您必须刷新视图的事件才能调用新的间谍方法；）：

[...]

    spyOn(view, 'answerYes');
    view.delegateEvents();

    button.click();
    expect(view.answerYes).toHaveBeenCalled();

[...]

有关委托事件的更多信息

玩得开心！

Answer 2

我通常喜欢假设框架代码已经做了它应该做的事情，并且只测试我对它的使用，所以我发现进行验证事件哈希的测试是可以接受的。如果我发现自己为了测试我的东西（例如委托事件）而重复主干功能，那么也许我比我真正需要的更接近集成测试。我还大量使用原型，以便在单元测试中成为超级隔离女士。当然，拥有一个完成所有这些练习的集成层仍然很重要，但我发现反馈循环对于测试驱动阶段来说太长了。

Answer 3

这会在 PromptView 的 answerYes 方法上创建一个间谍：

spyOn(PromtView.prototype, 'answerYes');

Answer 4

TL;DR：监视实例方法，而不是原型。

我认为你需要以不同的方式设置你的测试。 it 块中有太多的担忧和太多的期望，而且还污染了全局命名空间，这可能会导致测试出现问题。

beforeEach(function() {
  loadFixtures('promptPage.tmpl');

  var model = new PromptModel();
  this.view = new PromptView({model:model});
  this.view.render();

  this.button = this.view.$("#btnYes");
});

it("should render the button", function(){
  expect(this.button.length).toBe(1);
});

it("should be able to answer a question with yes", function() {
  spyOn(this.view, 'answerYes');

  this.button.click();
  expect(this.view.answerYes).toHaveBeenCalled();
});

您并不严格需要对按钮长度的期望。如果按钮没有长度（未找到），您将遇到其他失败。但您可能希望它存在，以便更容易地找出视图未正确渲染的情况。

您还应该监视 view 实例，就像您一直在做的那样。 PromptView 的定义确实向原型添加了一个 answerYes 方法，是的，但是您要监视的是视图实例，而不是原型。

如果您监视原型的方法，那么每次您尝试在测试中使用此视图时，answerYes 方法都将是监视方法，而不是实际方法。这听起来不错，但会导致问题，因为多次调用此方法时您将无法访问有效的间谍数据。它只会累积对该一名间谍的所有呼叫。如果您尝试两次监视原型方法，您最终可能会得到一个间谍的间谍，这将是一件奇怪的事情，并且可能会导致问题。

Answer 5

如果您在使用间谍On时遇到问题，您可以考虑创建一个间谍。所以像这样：

var eventSpy;
eventSpy = jasmine.createSpy('eventSpy');
view.$el.on('myCustom:event', eventSpy);