I have an "EditableText" component that displays regular text that when clicked converts into a vuetify v-text-input component (kind of like trello's functionality when you edit the title of a card).
<template>
<div class="editableText">
<div v-if="!editMode" @click="editMode = true" class="editableText__text" :class="textClass">
{{ this.value }}
</div>
<v-text-field
v-else
class="editableText__input no-label"
:class="textClass"
:value="value"
:autofocus="true"
:height="20"
:single-line="true"
:hide-details="true"
@input="handleInput"
@blur="editMode = false"
/>
</div>
</template>
<script>
export default {
data() {
return {
editMode: false
}
},
props: {
value: {
type: String,
required: true
},
textClass: {
type: String,
default: ''
}
},
methods: {
handleInput(value) {
this.$emit('input', value)
}
}
}
</script>
All of my unit tests for this component are working fine except for when I try to confirm that the EditableText component emits an input event when the VTextField child component fires an input event.
(most tests are omitted for length)
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import vuetify from 'vuetify'
import EditableText from '@/components/EditableText'
Vue.use(vuetify) // temporary until vuetify/createLocalVue bug is resolved
const build = options => {
return shallowMount(EditableText, options)
}
// Default props
let options
beforeEach(() => {
options = {
propsData: {
value: 'Test value'
}
}
})
describe('EditableText', () => {
it('emits an input event when the text input is changed', () => {
const { VTextField } = Vue.options.components
const wrapper = build(options)
wrapper.find('.editableText__text').trigger('click') // need to click text to get VTextField to render
wrapper.find(VTextField).trigger('input')
expect(wrapper.emitted('input').length).toBe(1) // wrapper.emitted('input') is undefined
})
})
Unfortunately the wrapper never ends up emitting the input, even though the component works completely fine when testing in the browser.
Is this something I should be testing and if so how should I go about testing that the EditableText component is emitting an input event properly? I've tried calling the handleInput method directly but couldn't find a way to do so.
I'd also like to write a test that tests how it handles an input of an empty string. Is there a way to test an input event with a specific value?