如何在 Jasmine 中测试表单提交？答案

【问题标题】：How do I test a form submit in Jasmine?如何在 Jasmine 中测试表单提交？
【发布时间】：2011-09-14 14:41:47
【问题描述】：

我有一个表单，它在最终发布到它的 ACTION URL 之前执行了一些广泛的 Javascript 内容。我正在编写一些 Jasmine 单元测试，并希望确保在提交表单时发生 Javascript 内容。但是，我绝对不希望页面在我进行单元测试时转到 ACTION URL。

我在这里看到了一个不错的建议： http://groups.google.com/group/jasmine-js/browse_thread/thread/a010eced8db17c1a?pli=1

...但是，由于我对 Jasmine 还很陌生，我不确定如何实现它，并且在网络上找不到任何相关示例。有没有人有一些我可以查看的示例代码来完成我的需要？

谢谢！

【问题讨论】：

标签： javascript unit-testing jasmine form-submit

【解决方案1】：

也许这段代码 sn-p 可以帮助你...

it('calls ajax post on export button click', function() {
  view.render();
  var form = $('#export_images_xml_form');
  var submitCallback = jasmine.createSpy().andReturn(false);
  form.submit(submitCallback);

  $('#export_images_xml_button').click();

  expect(form.attr('action')).toEqual('/export');
  expect($('#export_images_xml_form input').attr('value')).toEqual('22,33,44');
  expect(submitCallback).toHaveBeenCalled();
});

我所做的基本上是停止在关联回调中返回 false 的给定表单的每次提交（请参阅 submitCallback 行为）。

那我也可以测试回调是否被调用...

希望对你有帮助！

【讨论】：

如果没有接受的答案，我可能会自动接受具有 20 或更多赞成票的答案..:)
不确定这是否是版本问题，但必须为我完成以下操作jasmine.createSpy().and.returnValue(false)
@peekabo，我收到“找不到变量视图”
@peekabo 我们需要为这些元素创建固定装置吗？我变得不确定或未知。
我也想知道如何在这个测试中使用fixtures，并且想知道你是否使用了jasmine-query？ view.render(); 在哪里从哪里来？

【解决方案2】：

如果您不想测试是否调用了 submit，则无需创建间谍。使用普通的jQuery，也可以达到不提交表单的效果。我将以下代码放在所有测试之外，这样它就适用于文件中的所有测试。

$('form').on('submit', function() {
    return false;
});

【讨论】：

我在表单标签中添加了onsubmit="return false"