Can't trigger input event #266
Description
I'm able to trigger a click event with vue-test-utils, but can't seem to trigger an input event.
Here's my component:
<template>
<div class="content">
<input @input="resizeThumbs($event)" id="resize_thumbs_input" type="range" min="40" max="400" value="200">
<div v-model="thumbnails" class="img_gallery">
<div v-bind:style="{'max-width': thumbPixelWidth + 'px' }" class="thumbnail"
v-for="thumbnail in thumbnails" :key="thumbnail.id">
<img :src="thumbnail.url" class="thumb">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'thumbnails',
data: function () {
return {
thumbPixelWidth: 200
}
},
computed: {
thumbnails: {
get () {
return this.$store.state.images
}
}
},
methods: {
resizeThumbs: function (event) {
this.thumbPixelWidth = event.target.value
}
}
}
</script>
Here's my test:
import Vue from 'vue'
import Vuex from 'vuex'
import { mount, createLocalVue } from 'vue-test-utils'
import Thumbnails from '@/components/Thumbnails'
import Fixtures from '@/test/fixtures/image-collection'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('Thumbnails.vue', () => {
let wrapper
let options
let actions
let state
let store
beforeEach(() => {
actions = {
resizeThumbs: jest.fn(),
}
state = {
images: Fixtures.imageCollection,
}
store = new Vuex.Store({
state,
actions
})
options = {
computed: {
thumbnails: {
get () {
return state.images
}
}
}
}
})
it('changes thumbnail size when range input changes', () => {
const wrapper = mount(Thumbnails, { options, store, localVue })
wrapper.findAll('#resize_thumbs_input').at(0).trigger('input')
expect(actions.resizeThumbs).toHaveBeenCalled()
})
})
The test fails with the following output:
● Test.vue › changes thumbnail size when range input changes
expect(jest.fn()).toHaveBeenCalled()
Expected mock function to have been called.