How would you simulate typing via Jest and Vue-Test-Utils? - vue.js

Question

For my test, I am expecting it to start with a value of length 39 (maxlength: 40), and when I press a key (ie: 'a'), the length should then be 40. However, anything I try or look up doesn't seem to allow me to trigger a keypress/keydown/keyup event.
My Component:
<q-input
v-model="name"
class="my-class"
maxlength="40"
\>
My Test:
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

Why does not the value change after triggering keydown?
In short: you can't change the value of input/texarea with dispatching KeyboardEvent programmatically.
How actually do chars come into input? On MDN you can find the description of Keyboardevent sequence (assuming that preventDefault is not called):
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.
So, keydown leads to input event by default. But that is true only for 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.
Basically trusted events are those initiated by a user and untrusted events are initiated with a script. In most browsers, each event has an attribute isTrusted indicating if the event is trusted or not.
And how to test KeyboardEvents on inputs then?
Well, it depends on what is going on in your KeyboardEvent handler. E.g. if you call preventDefault in certain conditions then you can check if it was called or not in a test using a spy. Here is an example with sinon as a spy and chai as assertion library.
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)
But sometimes you even don't need a KeyboardEvent handler. E.g. in your question you write about an input with maximum value length 40 characters. Actually you can just use maxlength HTML attribute for the input to prevent input of more than 40 characters. But just for a study example, we can just cut the value in input handler (it will control the length not only when a user types but also when a user copy-and-pastes a string):
onInput (event) {
event.target.value = event.target.value.substr(0, 40)
...
}
The test for this may look like this:
await wrapper.find('input').setValue('M'.repeat(41))
expect(wrapper.find('input').element.value).to.equal('M'.repeat(40))
So here, we directly change the value of input, not by KeyboardEvent.

Answer 2

I don't know where dialog comes from, but should you not be searching for the element inside wrapper?
wrapper.find('.my-class')
Also most examples I see use mount instead of factory
const wrapper = mount(component)
Here is an example from the docs:
it('Magic character "a" sets quantity to 13', () => {
const wrapper = mount(QuantityComponent)
wrapper.trigger('keydown', {
key: 'a'
})
expect(wrapper.vm.quantity).toBe(13)
})
})