fix: make everything async

Author: kentcdodds

package.json

@@ -58,7 +58,8 @@
       "import/prefer-default-export": "off",
       "import/no-unassigned-import": "off",
       "import/no-useless-path-segments": "off",
-      "no-console": "off"
+      "no-console": "off",
+      "no-func-assign": "off"
     }
   },
   "eslintIgnore": [

src/user-event/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    // the wait in the loop is intentional and we don't want to parallelize
+    "no-await-in-loop": "off"
+  }
+}

src/user-event/__tests__/clear.js

@@ -1,9 +1,9 @@
 import * as userEvent from '..'
 import {setup} from './helpers/utils'
 
-test('clears text', () => {
+test('clears text', async () => {
   const {element, getEventCalls} = setup('<input value="hello" />')
-  userEvent.clear(element)
+  await userEvent.clear(element)
   expect(element).toHaveValue('')
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
@@ -25,18 +25,18 @@ test('clears text', () => {
   `)
 })
 
-test('does not clear text on disabled inputs', () => {
+test('does not clear text on disabled inputs', async () => {
   const {element, getEventCalls} = setup('<input value="hello" disabled />')
-  userEvent.clear(element)
+  await userEvent.clear(element)
   expect(element).toHaveValue('hello')
   expect(getEventCalls()).toMatchInlineSnapshot(
     `No events were fired on: input[value="hello"]`,
   )
 })
 
-test('does not clear text on readonly inputs', () => {
+test('does not clear text on readonly inputs', async () => {
   const {element, getEventCalls} = setup('<input value="hello" readonly />')
-  userEvent.clear(element)
+  await userEvent.clear(element)
   expect(element).toHaveValue('hello')
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="hello"]
@@ -56,17 +56,17 @@ test('does not clear text on readonly inputs', () => {
   `)
 })
 
-test('clears even on inputs that cannot (programmatically) have a selection', () => {
+test('clears even on inputs that cannot (programmatically) have a selection', async () => {
   const {element: email} = setup('<input value="a@b.c" type="email" />')
-  userEvent.clear(email)
+  await userEvent.clear(email)
   expect(email).toHaveValue('')
 
   const {element: password} = setup('<input value="pswrd" type="password" />')
-  userEvent.clear(password)
+  await userEvent.clear(password)
   expect(password).toHaveValue('')
 
   const {element: number} = setup('<input value="12" type="number" />')
-  userEvent.clear(number)
+  await userEvent.clear(number)
   // jest-dom does funny stuff with toHaveValue on number inputs
   expect(number.value).toBe('')
 })

src/user-event/__tests__/click.js

@@ -1,9 +1,9 @@
 import * as userEvent from '..'
 import {setup, addEventListener, addListeners} from './helpers/utils'
 
-test('click in input', () => {
+test('click in input', async () => {
   const {element, getEventCalls} = setup('<input />')
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
@@ -16,9 +16,9 @@ test('click in input', () => {
   `)
 })
 
-test('click in textarea', () => {
+test('click in textarea', async () => {
   const {element, getEventCalls} = setup('<textarea></textarea>')
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: textarea[value=""]
 
@@ -31,10 +31,10 @@ test('click in textarea', () => {
   `)
 })
 
-test('should fire the correct events for <input type="checkbox">', () => {
+test('should fire the correct events for <input type="checkbox">', async () => {
   const {element, getEventCalls} = setup('<input type="checkbox" />')
   expect(element).not.toBeChecked()
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[checked=true]
 
@@ -49,9 +49,9 @@ test('should fire the correct events for <input type="checkbox">', () => {
   `)
 })
 
-test('should fire the correct events for <input type="checkbox" disabled>', () => {
+test('should fire the correct events for <input type="checkbox" disabled>', async () => {
   const {element, getEventCalls} = setup('<input type="checkbox" disabled />')
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(element).toBeDisabled()
   // no event calls is expected here:
   expect(getEventCalls()).toMatchInlineSnapshot(
@@ -61,10 +61,10 @@ test('should fire the correct events for <input type="checkbox" disabled>', () =
   expect(element).toHaveProperty('checked', false)
 })
 
-test('should fire the correct events for <input type="radio">', () => {
+test('should fire the correct events for <input type="radio">', async () => {
   const {element, getEventCalls} = setup('<input type="radio" />')
   expect(element).not.toBeChecked()
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[checked=true]
 
@@ -81,9 +81,9 @@ test('should fire the correct events for <input type="radio">', () => {
   expect(element).toHaveProperty('checked', true)
 })
 
-test('should fire the correct events for <input type="radio" disabled>', () => {
+test('should fire the correct events for <input type="radio" disabled>', async () => {
   const {element, getEventCalls} = setup('<input type="radio" disabled />')
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(element).toBeDisabled()
   // no event calls is expected here:
   expect(getEventCalls()).toMatchInlineSnapshot(
@@ -94,9 +94,9 @@ test('should fire the correct events for <input type="radio" disabled>', () => {
   expect(element).toHaveProperty('checked', false)
 })
 
-test('should fire the correct events for <div>', () => {
+test('should fire the correct events for <div>', async () => {
   const {element, getEventCalls} = setup('<div></div>')
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: div
 
@@ -108,7 +108,7 @@ test('should fire the correct events for <div>', () => {
   `)
 })
 
-test('toggles the focus', () => {
+test('toggles the focus', async () => {
   const {element} = setup(`<div><input /><input /></div>`)
 
   const a = element.children[0]
@@ -117,26 +117,26 @@ test('toggles the focus', () => {
   expect(a).not.toHaveFocus()
   expect(b).not.toHaveFocus()
 
-  userEvent.click(a)
+  await userEvent.click(a)
   expect(a).toHaveFocus()
   expect(b).not.toHaveFocus()
 
-  userEvent.click(b)
+  await userEvent.click(b)
   expect(a).not.toHaveFocus()
   expect(b).toHaveFocus()
 })
 
-test('should blur the previous element', () => {
+test('should blur the previous element', async () => {
   const {element} = setup(`<div><input /><input /></div>`)
 
   const a = element.children[0]
   const b = element.children[1]
 
   const {getEventCalls, clearEventCalls} = addListeners(a)
 
-  userEvent.click(a)
+  await userEvent.click(a)
   clearEventCalls()
-  userEvent.click(b)
+  await userEvent.click(b)
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
@@ -146,7 +146,7 @@ test('should blur the previous element', () => {
   `)
 })
 
-test('should not blur the previous element when mousedown prevents default', () => {
+test('should not blur the previous element when mousedown prevents default', async () => {
   const {element} = setup(`<div><input /><input /></div>`)
 
   const a = element.children[0]
@@ -156,9 +156,9 @@ test('should not blur the previous element when mousedown prevents default', ()
 
   const {getEventCalls, clearEventCalls} = addListeners(a)
 
-  userEvent.click(a)
+  await userEvent.click(a)
   clearEventCalls()
-  userEvent.click(b)
+  await userEvent.click(b)
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
@@ -167,7 +167,7 @@ test('should not blur the previous element when mousedown prevents default', ()
   `)
 })
 
-test('does not lose focus when click updates focus', () => {
+test('does not lose focus when click updates focus', async () => {
   const {element} = setup(`<div><input /><button>focus</button></div>`)
   const input = element.children[0]
   const button = element.children[1]
@@ -176,14 +176,14 @@ test('does not lose focus when click updates focus', () => {
 
   expect(input).not.toHaveFocus()
 
-  userEvent.click(button)
+  await userEvent.click(button)
   expect(input).toHaveFocus()
 
-  userEvent.click(button)
+  await userEvent.click(button)
   expect(input).toHaveFocus()
 })
 
-test('gives focus to the form control when clicking the label', () => {
+test('gives focus to the form control when clicking the label', async () => {
   const {element} = setup(`
     <div>
       <label for="input">label</label>
@@ -193,11 +193,11 @@ test('gives focus to the form control when clicking the label', () => {
   const label = element.children[0]
   const input = element.children[1]
 
-  userEvent.click(label)
+  await userEvent.click(label)
   expect(input).toHaveFocus()
 })
 
-test('gives focus to the form control when clicking within a label', () => {
+test('gives focus to the form control when clicking within a label', async () => {
   const {element} = setup(`
     <div>
       <label for="input"><span>label</span></label>
@@ -208,11 +208,11 @@ test('gives focus to the form control when clicking within a label', () => {
   const span = label.firstChild
   const input = element.children[1]
 
-  userEvent.click(span)
+  await userEvent.click(span)
   expect(input).toHaveFocus()
 })
 
-test('clicking a label checks the checkbox', () => {
+test('clicking a label checks the checkbox', async () => {
   const {element} = setup(`
     <div>
       <label for="input">label</label>
@@ -222,12 +222,12 @@ test('clicking a label checks the checkbox', () => {
   const label = element.children[0]
   const input = element.children[1]
 
-  userEvent.click(label)
+  await userEvent.click(label)
   expect(input).toHaveFocus()
   expect(input).toBeChecked()
 })
 
-test('clicking a label checks the radio', () => {
+test('clicking a label checks the radio', async () => {
   const {element} = setup(`
     <div>
       <label for="input">label</label>
@@ -237,50 +237,50 @@ test('clicking a label checks the radio', () => {
   const label = element.children[0]
   const input = element.children[1]
 
-  userEvent.click(label)
+  await userEvent.click(label)
   expect(input).toHaveFocus()
   expect(input).toBeChecked()
 })
 
-test('submits a form when clicking on a <button>', () => {
+test('submits a form when clicking on a <button>', async () => {
   const {element, getEventCalls} = setup(`<form><button>Submit</button></form>`)
-  userEvent.click(element.children[0])
+  await userEvent.click(element.children[0])
   expect(getEventCalls()).toContain('submit')
 })
 
-test('does not submit a form when clicking on a <button type="button">', () => {
+test('does not submit a form when clicking on a <button type="button">', async () => {
   const {element, getEventCalls} = setup(`
     <form>
       <button type="button">Submit</button>
     </form>
   `)
-  userEvent.click(element.children[0])
+  await userEvent.click(element.children[0])
   expect(getEventCalls()).not.toContain('submit')
 })
 
-test('does not fire blur on current element if is the same as previous', () => {
+test('does not fire blur on current element if is the same as previous', async () => {
   const {element, getEventCalls, clearEventCalls} = setup('<button />')
 
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(getEventCalls()).not.toContain('blur')
 
   clearEventCalls()
 
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(getEventCalls()).not.toContain('blur')
 })
 
-test('does not give focus when mouseDown is prevented', () => {
+test('does not give focus when mouseDown is prevented', async () => {
   const {element} = setup('<input />', {
     eventHandlers: {mouseDown: e => e.preventDefault()},
   })
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(element).not.toHaveFocus()
 })
 
-test('fires mouse events with the correct properties', () => {
+test('fires mouse events with the correct properties', async () => {
   const {element, getEvents} = setup('<div></div>')
-  userEvent.click(element)
+  await userEvent.click(element)
   expect(getEvents()).toEqual([
     expect.objectContaining({
       type: 'mouseover',
@@ -315,9 +315,9 @@ test('fires mouse events with the correct properties', () => {
   ])
 })
 
-test('fires mouse events with custom button property', () => {
+test('fires mouse events with custom button property', async () => {
   const {element, getEvents} = setup('<div></div>')
-  userEvent.click(element, {
+  await userEvent.click(element, {
     button: 1,
     altKey: true,
   })
@@ -360,10 +360,10 @@ test('fires mouse events with custom button property', () => {
   ])
 })
 
-test('fires mouse events with custom buttons property', () => {
+test('fires mouse events with custom buttons property', async () => {
   const {element, getEvents} = setup('<div></div>')
 
-  userEvent.click(element, {buttons: 4})
+  await userEvent.click(element, {buttons: 4})
 
   expect(getEvents()).toEqual([
     expect.objectContaining({