vue.js - 你将如何通过 Jest 和 Vue-Test-Utils 模拟打字？

Question

对于我的测试，我期望它以长度 39(最大长度:40)的值开始，当我按下一个键(即:'a')时，长度应该是 40。但是，我尝试或查找似乎不允许我触发按键/按键/按键事件。

我的组件:

<q-input
  v-model="name"
  class="my-class"
  maxlength="40"
\>

我的测试:

it('Input should change', async() => {
  let wrapper = mount(Component, { name: 'M'.repeat(39) })
  let name = wrapper.find('.my-class')
  console.log(name.vm.$options.propsData.value) // prints 39 M's as expected
  name.trigger('click') // I try clicking the input. I've also tried triggering 'focus'
  await wrapper.vm.$nextTick() // I've also tried with and without this
  // I've also tried await name.vm.$nextTick()
  name.trigger('keydown', { key: 'a' }) // According to their testing docs, this should press 'a'
  // I've also tried name.trigger('keyup', { key: 'a' })
  // and name.trigger('keypress', { key: 'a' })
  await wrapper.vm.$nextTick()
  console.log(name.vm.$options.propsData.value) // prints 39 M's without the additional 'a'
  expect(name.vm.$options.propsData.value.length).toBe(40)
})

Answer 1

为什么触发后值没有变化 keydown ？

简而言之:您无法更改 input 的值/texarea与调度KeyboardEvent以编程方式。

字符实际上是如何进入 input 的？ ？在 MDN 上你可以找到 Keyboardevent sequence 的描述(假设未调用 preventDefault):

• A keydown event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the KeyboardEvent.repeat read only property is set to true.
• If the key produces a character key that would result in a character being inserted into possibly an <input>, <textarea> or an element with HTMLElement.contentEditable set to true, the beforeinput and input event types are fired in that order. Note that some other implementations may fire keypress event if supported. The events will be fired repeatedly while the key is held down.
• A keyup event is fired once the key is released. This completes the process.

所以，keydown导致 input默认事件。但这仅适用于 trusted events。 :

Most untrusted events will not trigger default actions, with the exception of the click event... All other untrusted events behave as if the preventDefault() method had been called on that event.

基本上受信任的事件是由用户发起的事件，而不受信任的事件是由脚本发起的。在大多数浏览器中，每个事件都有一个属性 isTrusted指示事件是否可信。

以及如何测试KeyboardEvent关于 input那么呢？

嗯，这取决于你的 KeyboardEvent 中发生了什么处理程序。例如。如果你调用preventDefault在某些情况下，您可以使用 spy 检查它是否在测试中被调用。这是 sinon 的示例作为 spy 和chai作为断言库。

const myEvent = new KeyboardEvent('keydown', { key: 'a' })
sinon.spy(myEvent, 'preventDefault')
await wrapper.find('input').element.dispatchEvent(myEvent)
expect(myEvent.preventDefault.calledOnce).to.equal(true)

但有时您甚至不需要 KeyboardEvent处理程序。例如。在你的问题中，你写了一个 input最大值长度为 40 个字符。实际上你可以使用 maxlength input 的 HTML 属性以防止输入超过 40 个字符。但仅作为一个研究示例，我们可以只剪切输入处理程序中的值(它不仅会在用户键入时控制长度，还会在用户复制和粘贴字符串时控制长度):

onInput (event) {
  event.target.value = event.target.value.substr(0, 40)
  ...
}

对此的测试可能如下所示:

 await wrapper.find('input').setValue('M'.repeat(41))
 expect(wrapper.find('input').element.value).to.equal('M'.repeat(40))

所以这里，我们直接改变input的值, 不是 KeyboardEvent .