From b00cc75f5e5f5f245ffee1b5d5ea564ebe84ca84 Mon Sep 17 00:00:00 2001
From: Jack Huang <jack7100@gmail.com>
Date: Tue, 27 Oct 2020 18:47:22 -0400
Subject: [PATCH] Add warning message to fireEvent input and change when called
 directly #83

---
 src/__tests__/fire-event.js | 34 ++++++++++++++++++++++++++++++++++
 src/__tests__/form.js       |  2 ++
 src/vue-testing-library.js  |  7 +++++++
 3 files changed, 43 insertions(+)

diff --git a/src/__tests__/fire-event.js b/src/__tests__/fire-event.js
index bced573f..8a7caaf2 100644
--- a/src/__tests__/fire-event.js
+++ b/src/__tests__/fire-event.js
@@ -119,6 +119,13 @@ const eventTypes = [
     elementType: 'div',
   },
 ]
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.warn.mockRestore()
+})
 
 // For each event type, we assert that the right events are being triggered
 // when the associated fireEvent method is called.
@@ -181,6 +188,32 @@ test('calling `fireEvent` directly works too', async () => {
 
   expect(emitted()).toHaveProperty('click')
 })
+const typingEvents = ['input', 'change']
+typingEvents.forEach(event => {
+  test(`fireEvent.${event} prints a warning message to use fireEvent.update instead`, async () => {
+    const {getByTestId} = render({
+      template: `<input type="text" data-testid=test-${event}></input>`,
+    })
+
+    await fireEvent.change(getByTestId(`test-${event}`), 'hello')
+
+    expect(console.warn).toHaveBeenCalledTimes(1)
+    expect(console.warn).toHaveBeenCalledWith(
+      expect.stringContaining(
+        'By using "change" or "input", there may be unexpected issues. Please use "update" for a better experience.',
+      ),
+    )
+  })
+})
+test('fireEvent.update does not trigger warning messages', async () => {
+  const {getByTestId} = render({
+    template: `<input type="text" data-testid=test-update></input>`,
+  })
+
+  await fireEvent.update(getByTestId('test-update'), 'hello')
+
+  expect(console.warn).not.toHaveBeenCalled()
+})
 
 test('fireEvent.update does not crash if non-input element is passed in', async () => {
   const {getByText} = render({
@@ -194,4 +227,5 @@ test('fireEvent.update does not crash if non-input element is passed in', async
       Hi
     </div>
   `)
+  expect(console.warn).not.toHaveBeenCalled()
 })
diff --git a/src/__tests__/form.js b/src/__tests__/form.js
index 130c2a16..8b48ec01 100644
--- a/src/__tests__/form.js
+++ b/src/__tests__/form.js
@@ -8,6 +8,7 @@ import Form from './components/Form'
 // Read 'What queries should I use?' for additional context:
 // https://testing-library.com/docs/guide-which-query
 test('Review form submits', async () => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
   const fakeReview = {
     title: 'An Awesome Movie',
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
@@ -61,4 +62,5 @@ test('Review form submits', async () => {
   // Assert the right event has been emitted.
   expect(emitted()).toHaveProperty('submit')
   expect(emitted().submit[0][0]).toMatchObject(fakeReview)
+  expect(console.warn).not.toHaveBeenCalled()
 })
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index a7cd4472..74fe6039 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -113,9 +113,16 @@ async function fireEvent(...args) {
   dtlFireEvent(...args)
   await waitFor(() => {})
 }
+const changeOrInputEventCalledDirectly = (eventValue, eventKey) =>
+  eventValue && (eventKey === 'change' || eventKey === 'input')
 
 Object.keys(dtlFireEvent).forEach(key => {
   fireEvent[key] = async (...args) => {
+    if (changeOrInputEventCalledDirectly(args[1], key)) {
+      console.warn(
+        'By using "change" or "input", there may be unexpected issues. Please use "update" for a better experience.',
+      )
+    }
     dtlFireEvent[key](...args)
     await waitFor(() => {})
   }