ember.js 在集成测试中,对'`内的输入使用测试帮助器' triggerKeyEvent '< form>不会提交'< form>`

ryevplcw  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(149)

此问题基于演示存储库https://github.com/bartocc/so-enter-key-integration-test
这个演示Ember.js 3.12应用程序包含<XFoo>组件。当渲染时,它显示一个简单的<form>,其中有一个文本输入和一个提交按钮。
<form>在其submit事件上绑定了一个操作,该操作将组件的submitted属性设置为true。默认情况下,该属性为false
所需的行为是在提交后显示感谢消息,而不是<form>
以下是组件的模板:

{{#if this.submitted}}
  <span>
    Thank you for your submission
  </span>
{{else}}
  <form {{action (mut this.submitted) true on="submit"}}>
    {{! template-lint-disable self-closing-void-elements }}
    <input type="text" />
    <button type="submit">
      Save
    </button>
  </form>
{{/if}}

我为<XFoo>添加了2个集成测试:

  • 尝试将Enter keydown事件发送到<input>标签
await render(hbs`<XFoo />`);
await triggerKeyEvent('input', 'keydown', 'Enter');
  • 另一个单击提交按钮
await render(hbs`<XFoo />`);
await click('button');

这两个测试都会检查感谢消息是否存在:

assert.dom('span').hasText('Thank you for your submission', 'displays the thank you span');

第一个测试失败,第二个通过。
我想了解为什么使用triggerKeyEvent不能提交表单。

yquaqz18

yquaqz181#

我能够通过使用本机事件调度程序来触发它:

const submitForm = async (element) => {
  const submitEvent = new Event('submit');
  element.querySelector('form').dispatchEvent(submitEvent);
  await settled();
};

我在填充输入的内容后调用这个

await fillIn(selector, '<content>');
await submitForm(this.element);

相关问题