Question

假设我们有一个简单的Backbone View，就像这样：

class MyView extends Backbone.View

    events: 
        'click .save': 'onSave'

    onSave: (event) ->
        event.preventDefault()

        # do something interesting

我想测试event.preventDefault()在我click类的元素.save时被调用。

我可以测试我的回调函数的实现，非常像这样（Mocha + Sinon.js）：

it 'prevents default submission', ->
    myView.onSave()

    myView.args[0][0].preventDefault.called.should.be.true

我认为它不起作用，但这只是为了得到这个想法;编写正确的代码，这是有效的。我的问题是这样我正在测试实现而不是功能。

所以，我的问题是：我如何验证，假设在我的click元素上触发.save事件？

it 'prevents default submission', ->
    myView.$('.save').click()

    # assertion here ??

一如既往地感谢:)

Answer 1

尝试在视图的$el上添加一个侦听器，然后在click上触发.save，然后验证该事件是否未冒泡到视图的元素。

var view = new MyView();
var called = false;
function callback() { called = true; }

view.render();

// Attach a listener on the view's element
view.$el.on('click', callback);

// Test
view.$('.save').trigger('click');

// Verify
expect(called).toBeFalsy();

Answer 2

所以你想测试在生成preventDefault事件时调用click，对吗？

你能做些什么吗（在JavaScript中。我会将CoffeeScript留作练习;））：

var preventDefaultSpy;

before(function() {
  preventDefaultSpy = sinon.spy(Event.prototype, 'preventDefault');
});

after(function() {
  preventDefaultSpy.restore();
});

it('should call "preventDefault"', function() {
  myView.$('.save').click();
  expect(preventDefaultSpy.callCount).to.equal(1);
});

您可能希望在创建点击事件之前立即致电preventDefaultSpy.reset()，以便通话计数不受其他事情的影响。

我没有测试过，但我相信它会起作用。

编辑：换句话说，因为我的答案与你问题的一部分没有什么不同：我认为你的第一种方法是可以的。通过监视Event.prototype你不会打电话给myView所以它更像是一个黑盒子，这可能会减轻你的一些顾虑。

Backbone：如何在不直接测试回调的情况下测试preventDefault

2 个答案: