fix: ensure all events are fired in the eventWrapper (testing-library#385)

Closes testing-library#384

Author: kentcdodds

package.json

@@ -55,6 +55,7 @@
     "rules": {
       "jsx-a11y/click-events-have-key-events": "off",
       "jsx-a11y/tabindex-no-positive": "off",
+      "no-func-assign": "off",
       "no-return-assign": "off",
       "react/prop-types": "off",
       "testing-library/no-dom-import": "off"

src/blur.js

@@ -1,5 +1,5 @@
 import {fireEvent} from '@testing-library/dom'
-import {getActiveElement, isFocusable} from './utils'
+import {getActiveElement, isFocusable, wrapInEventWrapper} from './utils'
 
 function blur(element, init) {
   if (!isFocusable(element)) return
@@ -11,4 +11,6 @@ function blur(element, init) {
   fireEvent.focusOut(element, init)
 }
 
+blur = wrapInEventWrapper(blur)
+
 export {blur}

src/clear.js

@@ -1,4 +1,5 @@
 import {type} from './type'
+import {wrapInEventWrapper} from './utils'
 
 function clear(element) {
   if (element.tagName !== 'INPUT' && element.tagName !== 'TEXTAREA') {
@@ -27,4 +28,6 @@ function clear(element) {
   }
 }
 
+clear = wrapInEventWrapper(clear)
+
 export {clear}

src/click.js

@@ -2,6 +2,7 @@ import {fireEvent} from '@testing-library/dom'
 import {
   getMouseEventOptions,
   isLabelWithInternallyDisabledControl,
+  wrapInEventWrapper,
 } from './utils'
 import {hover} from './hover'
 import {blur} from './blur'
@@ -103,4 +104,7 @@ function dblClick(element, init) {
   fireEvent.dblClick(element, getMouseEventOptions('dblclick', init, 2))
 }
 
+click = wrapInEventWrapper(click)
+dblClick = wrapInEventWrapper(dblClick)
+
 export {click, dblClick}

src/focus.js

@@ -1,5 +1,5 @@
 import {fireEvent} from '@testing-library/dom'
-import {getActiveElement, isFocusable} from './utils'
+import {getActiveElement, isFocusable, wrapInEventWrapper} from './utils'
 
 function focus(element, init) {
   if (!isFocusable(element)) return
@@ -10,5 +10,6 @@ function focus(element, init) {
   element.focus()
   fireEvent.focusIn(element, init)
 }
+focus = wrapInEventWrapper(focus)
 
 export {focus}

src/hover.js

@@ -2,6 +2,7 @@ import {fireEvent} from '@testing-library/dom'
 import {
   isLabelWithInternallyDisabledControl,
   getMouseEventOptions,
+  wrapInEventWrapper,
 } from './utils'
 
 function hover(element, init) {
@@ -34,4 +35,7 @@ function unhover(element, init) {
   }
 }
 
+hover = wrapInEventWrapper(hover)
+unhover = wrapInEventWrapper(unhover)
+
 export {hover, unhover}

src/paste.js

@@ -1,5 +1,9 @@
 import {fireEvent} from '@testing-library/dom'
-import {setSelectionRangeIfNecessary, calculateNewValue} from './utils'
+import {
+  setSelectionRangeIfNecessary,
+  calculateNewValue,
+  wrapInEventWrapper,
+} from './utils'
 
 function paste(
   element,
@@ -49,5 +53,6 @@ function paste(
     })
   }
 }
+paste = wrapInEventWrapper(paste)
 
 export {paste}

src/select-options.js

@@ -1,4 +1,5 @@
 import {createEvent, getConfig, fireEvent} from '@testing-library/dom'
+import {wrapInEventWrapper} from './utils'
 import {click} from './click'
 import {focus} from './focus'
 
@@ -73,7 +74,7 @@ function selectOptionsBase(newValue, select, values, init) {
   }
 }
 
-const selectOptions = selectOptionsBase.bind(null, true)
-const deselectOptions = selectOptionsBase.bind(null, false)
+const selectOptions = wrapInEventWrapper(selectOptionsBase.bind(null, true))
+const deselectOptions = wrapInEventWrapper(selectOptionsBase.bind(null, false))
 
 export {selectOptions, deselectOptions}

src/tab.js

@@ -1,5 +1,5 @@
 import {fireEvent} from '@testing-library/dom'
-import {getActiveElement, FOCUSABLE_SELECTOR} from './utils'
+import {getActiveElement, FOCUSABLE_SELECTOR, wrapInEventWrapper} from './utils'
 import {focus} from './focus'
 import {blur} from './blur'
 
@@ -112,6 +112,7 @@ function tab({shift = false, focusTrap} = {}) {
     fireEvent.keyUp(keyUpTarget, {...shiftKeyInit, shiftKey: false})
   }
 }
+tab = wrapInEventWrapper(tab)
 
 export {tab}
 

src/type.js

@@ -3,10 +3,12 @@ import {
   fireEvent,
   getConfig as getDOMTestingLibraryConfig,
 } from '@testing-library/dom'
+
 import {
   getActiveElement,
   calculateNewValue,
   setSelectionRangeIfNecessary,
+  wrapInEventWrapper,
 } from './utils'
 import {click} from './click'
 
@@ -528,6 +530,7 @@ function getEventCallbackMap({
     }
   }
 }
+type = wrapInEventWrapper(type)
 
 export {type}
 

src/upload.js

@@ -1,4 +1,5 @@
 import {fireEvent, createEvent} from '@testing-library/dom'
+import {wrapInEventWrapper} from './utils'
 import {click} from './click'
 import {blur} from './blur'
 import {focus} from './focus'
@@ -47,5 +48,6 @@ function upload(element, fileOrFiles, init) {
     ...init,
   })
 }
+upload = wrapInEventWrapper(upload)
 
 export {upload}

src/utils.js

@@ -1,3 +1,5 @@
+import {getConfig} from '@testing-library/dom'
+
 function isMousePressEvent(event) {
   return (
     event === 'mousedown' ||
@@ -169,6 +171,19 @@ function isFocusable(element) {
   )
 }
 
+function wrapInEventWrapper(fn) {
+  function wrapper(...args) {
+    let result
+    getConfig().eventWrapper(() => {
+      result = fn(...args)
+    })
+    return result
+  }
+  // give it a helpful name for debugging
+  Object.defineProperty(wrapper, 'name', {value: `${fn.name}Wrapper`})
+  return wrapper
+}
+
 export {
   FOCUSABLE_SELECTOR,
   isFocusable,
@@ -177,4 +192,5 @@ export {
   getActiveElement,
   calculateNewValue,
   setSelectionRangeIfNecessary,
+  wrapInEventWrapper,
 }