测试提交的表单不会与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
回调运行后发生的事情。
在此先感谢。
答
夫妇的想法。你确定你正在监视该方法的正确实例/原型吗?
在您的测试中,您是否应该检查实例上的方法是否正在调用,因为它似乎是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隔离。