Как бы вы имитировали набор текста с помощью Jest и Vue -Test-Utils? - PullRequest
Новая
       9

Как бы вы имитировали набор текста с помощью Jest и Vue -Test-Utils?

1 голос
/ 16 января 2020

Для моего теста я ожидаю, что он начнется со значения длины 39 (maxlength: 40), и когда я нажимаю клавишу (ie: 'a'), длина должна быть 40. Однако что-либо, что я пытаюсь или ищу, кажется, не позволяет мне вызвать событие нажатия / нажатия клавиш / keyup.

Мой компонент: 

<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)
})

1 Ответ

0 голосов
/ 16 января 2020

Я не знаю, откуда взялась dialog, но не следует ли искать элемент внутри wrapper? 

wrapper.find('.my-class')

Также в большинстве примеров, которые я вижу, используется mount вместо factory

const wrapper = mount(component)

Вот пример из документов: 

it('Magic character "a" sets quantity to 13', () => {
    const wrapper = mount(QuantityComponent)
    wrapper.trigger('keydown', {
      key: 'a'
    })
    expect(wrapper.vm.quantity).toBe(13)
  })
})
...