fix: do not wrap the whole function in the event wrapper (testing-library#389)

Closes testing-library#387

Author: kentcdodds

src/blur.js

@@ -1,16 +1,14 @@
 import {fireEvent} from '@testing-library/dom'
-import {getActiveElement, isFocusable, wrapInEventWrapper} from './utils'
+import {getActiveElement, isFocusable, eventWrapper} from './utils'
 
 function blur(element, init) {
   if (!isFocusable(element)) return
 
   const wasActive = getActiveElement(element.ownerDocument) === element
   if (!wasActive) return
 
-  element.blur()
+  eventWrapper(() => element.blur())
   fireEvent.focusOut(element, init)
 }
 
-blur = wrapInEventWrapper(blur)
-
 export {blur}

src/clear.js

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

src/click.js

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

src/focus.js

@@ -1,15 +1,14 @@
 import {fireEvent} from '@testing-library/dom'
-import {getActiveElement, isFocusable, wrapInEventWrapper} from './utils'
+import {getActiveElement, isFocusable, eventWrapper} from './utils'
 
 function focus(element, init) {
   if (!isFocusable(element)) return
 
   const isAlreadyActive = getActiveElement(element.ownerDocument) === element
   if (isAlreadyActive) return
 
-  element.focus()
+  eventWrapper(() => element.focus())
   fireEvent.focusIn(element, init)
 }
-focus = wrapInEventWrapper(focus)
 
 export {focus}

src/hover.js

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

src/paste.js

@@ -2,7 +2,7 @@ import {fireEvent} from '@testing-library/dom'
 import {
   setSelectionRangeIfNecessary,
   calculateNewValue,
-  wrapInEventWrapper,
+  eventWrapper,
 } from './utils'
 
 function paste(
@@ -17,7 +17,7 @@ function paste(
       `the current element is of type ${element.tagName} and doesn't have a valid value`,
     )
   }
-  element.focus()
+  eventWrapper(() => element.focus())
 
   // by default, a new element has it's selection start and end at 0
   // but most of the time when people call "paste", they expect it to paste
@@ -53,6 +53,5 @@ function paste(
     })
   }
 }
-paste = wrapInEventWrapper(paste)
 
 export {paste}

src/select-options.js

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

src/tab.js

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

src/type.js

@@ -27,9 +27,7 @@ async function type(element, text, {delay = 0, ...options} = {}) {
       result = await typeImpl(element, text, {delay, ...options})
     })
   } else {
-    getDOMTestingLibraryConfig().eventWrapper(() => {
-      result = typeImpl(element, text, {delay, ...options})
-    })
+    result = typeImpl(element, text, {delay, ...options})
   }
   return result
 }

src/upload.js

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

src/utils.js

@@ -171,17 +171,12 @@ 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
+function eventWrapper(cb) {
+  let result
+  getConfig().eventWrapper(() => {
+    result = cb()
+  })
+  return result
 }
 
 export {
@@ -192,5 +187,5 @@ export {
   getActiveElement,
   calculateNewValue,
   setSelectionRangeIfNecessary,
-  wrapInEventWrapper,
+  eventWrapper,
 }