Changing values and triggering inputs

I am currently on avoriaz 1.13.1 and use simulate() pretty regularly in my Vue Component tests as so:

const component = mount(SearchForm)
const searchInput = component.find("input#search")[0]
searchInput.element.value = 'Jane Doe'
searchInput.simulate('input')

These specs work correctly and pass.

As I upgraded to avoriaz 2.4.3, and I change the deprecated simulate() to trigger(), the specs fail. I also noticed that if I console log searchInput.element, it will log HTMLInputElement { _prevClass: '', _value: '' }, and if I console log searchInput.element.value, it console logs nothing. Previously, console logging searchInput.element.value would return a value and would be set correctly. I have looked around and am wondering why when I upgrade, searchInput.element.value doesn’t seem to be returning anything like it use to.

I am still learning a lot about Vue and avoriaz, so it is quite possible I just missed something. But was wondering if you had any ideas @eddyerburgh. Thanks for any help 😄

[justincscott16]

@eddyerburgh works great, all my specs passed with simply replacing simulate with trigger. Also, switching to Vue.use(Vuex) was a simple find and replace from what I had which was avoriaz.use(Vuex).

Thanks for the help and the quick response and fix, you are the man, love your software!

[justincscott16]

@eddyerburgh finally got to getting back to this! Here we go, a super basic component with an input, and then the two tests, one with trigger() and one with simulate()! Also I am running this on avoriaz 2.4.3.

// SearchForm.vue

<template>
  <div>
    <form method='get' action='some.api.endpoint' accept-charset="utf-8">
      <input id='query' v-model="searchQuery" name='query' type='search'>
      <input type='submit' value='Search'>
    </form>
  </div>
</template>

<script>
export default {
  name: 'search-form',
  data: function () {
    return {
      searchQuery: ''
    }
  }
}
</script>

// SearchForm.test.js

import Vue from 'vue'
import { expect } from 'chai'
import avoriaz, { mount } from 'avoriaz'
import SearchForm from '../path/to/SearchForm.vue'

Vue.config.productionTip = false

describe('SearchForm.vue', () => {

  // This passes
  it('changes input with simulate()', () => {
    let component = mount(SearchForm)
    const searchInput = component.find('input#query')[0]
    searchInput.element.value = 'hello'
    searchInput.simulate('input')
    expect(searchInput.element.value).to.eq('hello')
  })

  // This does not
  it('changes input with trigger()', () => {
    let component = mount(SearchForm)
    const searchInput = component.find('input#query')[0]
    searchInput.element.value = 'hello'
    searchInput.trigger('input')
    expect(searchInput.element.value).to.eq('hello')
  })
})