Simulating user input

[matt-sanders]

Hey guys

Firstly thanks heaps for the great library :)

Just wondering if there's currently a better way to update an input bound with v-model instead of using updateState? In this example it's mentioned that it's waiting on an issue with @vue/test-utils to be able to update v-model properly, but as far as I'm aware, vue test utils allows you to do something like element.trigger('change', 'newValue') and it will update.

for example, given the below:

  it('tests vmodel', async () => {
    const cmp = Vue.extend({
      data() {
        return {
          foo: 'bar',
        }
      },
      render() {
        return (
           <div>
             <div>{this.foo}</div>
             <input placeholder='test' vModel={this.foo} />
           </div>
        )
      },
    })
    const {getByText, getByPlaceholderText} = render(cmp)
    getByText('bar')
    const input = getByPlaceholderText('test')
    await fireEvent.change(input, {target: {value: 'test'}})
    getByText('test')
  })

what would be the best way to ensure that when users enter data into the input that it's updated. The above test would currently fail at the getByText('test') assertion. However if we used vue test utils and did something like:

const textInput = wrapper.find('input')
textInput.setValue('test')

it would apparently pass ( see here )

updateState does work, but it seems to kind of defeat the purpose if we're not really checking that the input is bound correctly to the model.

Thanks again!

[dfcook]

The solution is to do what vue-test-utils does inside setValue:

const textInput = wrapper.find('input')
textInput.value = 'test'
await fireEvent.input(textInput)

This would work currently but it takes 2 lines to do what react-testing-library does in 1.

A possible improvement would be to add a method to fireEvent (update?) that does both steps in 1 call?

const textInput = wrapper.find('input')
await fireEvent.update(textInput, 'test')

Any thoughts?

[matt-sanders]

Aaah I see, thanks Daniel, that works just fine!

Yea, adding an update method or something like that would be great. Two lines isn't the end of the world, as long as there's a reliable way to ensure that updates happen I think that's mostly what matters, but any improvements are always appreciated.

The only thing I think would need to be considered is that vue-test-utils has three methods, setValue, setChecked, and setSelected. If an update method were to be created it would probably need to support those three, which may add a bit of complexity.

Otherwise, thanks again for your work!