Question

我有一个不提交任何地方的简单表单（使用preventDefault），但更新了UI。我想测试在表单提交错误后没有正确更新UI，但是submit没有在我的测试套件中运行。

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

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

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

我的测试用例将内容注入表单字段并调用submit。想象一下，在套件中有一个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

似乎提交从未发生过，我的断言总是错误的。有没有办法可以测试这样的表单提交？我不需要测试POSTing任何东西。我只想测试运行onsubmit回调后发生的事情。

提前致谢。

Answer 1

几个想法。你确定你正在监视方法的正确实例/原型吗？

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

doSomeStuffSpy = sinon.spy myClass, 'doSomeStuff'

在提交处理程序中，您可能在事件而不是类上调用@doSomeStuff()，因为事件处理程序未绑定到类=>的上下文。

在上下文中，您可能希望确保不将这些事件绑定到全局上下文$('#my-form').on 'submit', (e) ->，而是将其绑定到类本身的实例（这使得更容易间谍并将事件封装到dom片段）。类似于Backbone Views。

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来测试组件。

测试表单提交，不提交sinon，mocha和chai

1 个答案: