测试提交的表单不会与sinon，mocha和chai一起提交

我有一个简单的表单，它不会在任何地方提交（使用preventDefault），而是更新UI。我想要测试在提交表单时是否有错误提交了UI，但是submit未在我的测试套件中运行。测试提交的表单不会与sinon，mocha和chai一起提交

该套件使用jsdom,mocha和sinon进行设置。一个例子如下。我的问题是，是否有可能在jsdom /用sinon测试手动表单提交（通过jQuery处理），其中的动作是""，并且有onsubmit回调？

在我的类文件中有一个简单的表单提交处理程序。

# MyClass.coffee 
$('#my-form').on 'submit', (e) -> 
    e.preventDefault() 
    @doSomeStuff()

我的测试用例将内容注入到表单域并调用提交。想象一下，在套件中有一个MyClass的实例

# MyClass_spec.coffee 
it 'can submit a form', -> 
    myClass = new MyClass() 
    doSomeStuffSpy = sinon.spy MyClass, 'doSomeStuff' 
    $('#my-form').find('textarea').val('content') 
    $('#my-form').submit() 
    expect(doSomeStuffSpy).to.have.been.calledOnce

看来，提交从未发生，并且我的断言总是错误的。有没有一种方法可以像这样测试表单提交？我不需要测试任何东西。我只是想测试在onsubmit回调运行后发生的事情。

在此先感谢。

来源

2014-12-03 grammar

夫妇的想法。你确定你正在监视该方法的正确实例/原型吗？

在您的测试中，您是否应该检查实例上的方法是否正在调用，因为它似乎是MyClass类的实例上的方法。

doSomeStuffSpy = sinon.spy myClass, 'doSomeStuff'

在您提交处理程序，你可能在事件，而不是调用类@doSomeStuff()，因为事件处理函数不是绑定到类=>的情况下。

在上下文中，您可能需要确保您没有将这些事件绑定到全局上下文$('#my-form').on 'submit', (e) ->，而是将其绑定到类本身的实例（这使得更容易将事件窥探并封装到dom片段中）。类似于骨干视图。

class MyClass 
    constructor: (el)-> 
    @$el = $(el) 
    @$el.on 'submit', @doStuff 

    doStuff: (e)=> # bound to the context of the class, not the event.

这应该是可检验的，是这样的：

myClass = MyClass.new("<form></form") 
spy = Sinon.createSpy myClass, 'doStuff' 
myClass.trigger 'submit' 
expect(spy).toHaveBeenCalled()

您还可以检查DOM更新，从回调发生这样做的期望像

value = myClass.$el.find('input').val() 
expect(value).toEqual('foo')

这是不太容易出故障而不是从全局的角度出发，并且允许你测试你的组件与你应用中的实际dom隔离。

来源

2014-12-06 12:24:05

测试提交的表单不会与sinon，mocha和chai一起提交

回答

相关问题