使用 sinon、mocha 和 chai 测试不提交任何地方的表单提交答案

【问题标题】：Testing form submissions that do not submit anywhere with sinon, mocha, and chai使用 sinon、mocha 和 chai 测试不提交任何地方的表单提交
【发布时间】：2015-02-01 13:04:56
【问题描述】：

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

套件是使用jsdom、mocha 和sinon 设置的。下面是一个例子。我的问题是，是否可以在 jsdom/with 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 回调后发生的事情。

提前致谢。

【问题讨论】：

标签： forms coffeescript mocha.js sinon chai

【解决方案1】：

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

在您的测试中，您不应该检查实例上的方法是否被调用，因为它似乎是 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 的情况下测试组件。

【讨论】：