Make fireEvent.update work with lazy modifier

- switched to use change event if lazy modifier is found on element
- updated form unit test to test lazy input and textarea

Author: Jesse Knowles

src/__tests__/components/Form.vue

@@ -5,6 +5,9 @@
       <label for="movie-input">Title of the movie</label>
       <input id="movie-input" v-model="title" name="title" />
 
+      <label for="director-input">Director of the movie</label>
+      <input id="director-input" v-model.lazy="director" name="director" />
+
       <label id="review-textarea">Your review</label>
       <textarea
         v-model="review"
@@ -13,6 +16,14 @@
         aria-labelledby="review-textarea"
       />
 
+      <label id="notes-textarea">Add some notes</label>
+      <textarea
+        v-model.lazy="notes"
+        name="notes-textarea"
+        placeholder="Add some notes"
+        aria-labelledby="notes-textarea"
+      />
+
       <label>
         <input v-model="rating" type="radio" value="3" />
         Wonderful
@@ -46,7 +57,9 @@ export default {
   data() {
     return {
       title: '',
+      director: '',
       review: '',
+      notes: '',
       rating: '1',
       recommend: false,
     }
@@ -63,7 +76,9 @@ export default {
 
       this.$emit('submit', {
         title: this.title,
+        director: this.director,
         review: this.review,
+        notes: this.notes,
         rating: this.rating,
         recommend: this.recommend,
       })

src/__tests__/form.js

@@ -1,4 +1,4 @@
-import {render, fireEvent} from '@testing-library/vue'
+import {render, fireEvent, waitFor} from '@testing-library/vue'
 import '@testing-library/jest-dom'
 import Form from './components/Form'
 
@@ -11,7 +11,9 @@ test('Review form submits', async () => {
   jest.spyOn(console, 'warn').mockImplementation(() => {})
   const fakeReview = {
     title: 'An Awesome Movie',
+    director: 'Stephen Spielberg',
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    notes: 'Add something',
     rating: '3',
   }
 
@@ -31,9 +33,15 @@ test('Review form submits', async () => {
   const titleInput = getByLabelText(/title of the movie/i)
   await fireEvent.update(titleInput, fakeReview.title)
 
+  const directorInput = getByLabelText(/director of the movie/i)
+  await fireEvent.update(directorInput, fakeReview.director)
+
   const reviewTextarea = getByPlaceholderText('Write an awesome review')
   await fireEvent.update(reviewTextarea, fakeReview.review)
 
+  const notesTextarea = getByPlaceholderText('Add some notes')
+  await fireEvent.update(notesTextarea, fakeReview.notes)
+
   // Rating Radio buttons.
   const initiallySelectedInput = getByLabelText('Awful')
   const ratingSelect = getByLabelText('Wonderful')

src/vue-testing-library.js

@@ -1,5 +1,6 @@
 /* eslint-disable testing-library/no-wait-for-empty-callback */
 import {createLocalVue, mount} from '@vue/test-utils'
+import Vue from 'vue'
 
 import {
   getQueriesForElement,
@@ -138,7 +139,7 @@ fireEvent.touch = async elem => {
 // Small utility to provide a better experience when working with v-model.
 // Related upstream issue: https://github.com/vuejs/vue-test-utils/issues/345#issuecomment-380588199
 // Examples: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/form.js
-fireEvent.update = (elem, value) => {
+fireEvent.update = async (elem, value, isLazy = false) => {
   const tagName = elem.tagName
   const type = elem.type
 
@@ -160,13 +161,13 @@ fireEvent.update = (elem, value) => {
         return fireEvent.change(elem)
       } else {
         elem.value = value
-        return fireEvent.input(elem)
+        return elem._vModifiers.lazy ? fireEvent.change(elem) : fireEvent.input(elem)
       }
     }
 
     case 'TEXTAREA': {
       elem.value = value
-      return fireEvent.input(elem)
+      return elem._vModifiers.lazy ? fireEvent.change(elem) : fireEvent.input(elem)
     }
 
     case 'SELECT': {