fix: Make fireEvent.update work with lazy modifier (#183)

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

Co-authored-by: Jesse Knowles <[email protected]>

Author: kinoli

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

@@ -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

@@ -160,12 +160,18 @@ fireEvent.update = (elem, value) => {
         return fireEvent.change(elem)
       } else {
         elem.value = value
+        if (elem._vModifiers && elem._vModifiers.lazy) {
+          return fireEvent.change(elem)
+        }
         return fireEvent.input(elem)
       }
     }
 
     case 'TEXTAREA': {
       elem.value = value
+      if (elem._vModifiers && elem._vModifiers.lazy) {
+        return fireEvent.change(elem)
+      }
       return fireEvent.input(elem)
     }