ember.js - 在集成测试中，在 ` 内的输入上使用测试帮助程序 `triggerKeyEvent``不提交`

Question

这个问题基于演示回购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}}

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

• 尝试使用代码将Enterkeydown 事件发送到<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');

第一次测试失败，第二次通过。

我想了解为什么 usingtriggerKeyEvent不提交表单。

标签： ember.js

Answer 1

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

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

我在填写输入内容后调用它

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