From 4abecfa9f84e38ba2ad68ab3654d10a5a413fd58 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Thu, 4 Jun 2020 17:35:44 -0600
Subject: [PATCH] test: improve setup utility

---
 src/__tests__/click.js          | 11 ++++-------
 src/__tests__/helpers/utils.js  |  5 ++---
 src/__tests__/type-modifiers.js | 29 +++++++++++++++--------------
 src/__tests__/type.js           |  6 +++---
 4 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/__tests__/click.js b/src/__tests__/click.js
index 5630c230..02b25c27 100644
--- a/src/__tests__/click.js
+++ b/src/__tests__/click.js
@@ -4,7 +4,7 @@ import userEvent from '..'
 import {setup} from './helpers/utils'
 
 test('click in input', () => {
-  const {element, getEventCalls} = setup('input')
+  const {element, getEventCalls} = setup(<input />)
   userEvent.click(element)
   expect(getEventCalls()).toMatchInlineSnapshot(`
     mouseover: Left (0)
@@ -17,7 +17,7 @@ test('click in input', () => {
 })
 
 test('click in textarea', () => {
-  const {element, getEventCalls} = setup('textarea')
+  const {element, getEventCalls} = setup(<textarea />)
   userEvent.click(element)
   expect(getEventCalls()).toMatchInlineSnapshot(`
     mouseover: Left (0)
@@ -30,7 +30,7 @@ test('click in textarea', () => {
 })
 
 it('should fire the correct events for <input type="checkbox">', () => {
-  const {element, getEventCalls} = setup('input', {type: 'checkbox'})
+  const {element, getEventCalls} = setup(<input type="checkbox" />)
   expect(element).not.toBeChecked()
   userEvent.click(element)
   expect(getEventCalls()).toMatchInlineSnapshot(`
@@ -46,10 +46,7 @@ it('should fire the correct events for <input type="checkbox">', () => {
 })
 
 it('should fire the correct events for <input type="checkbox" disabled>', () => {
-  const {element, getEventCalls} = setup('input', {
-    type: 'checkbox',
-    disabled: true,
-  })
+  const {element, getEventCalls} = setup(<input type="checkbox" disabled />)
   userEvent.click(element)
   expect(element).toBeDisabled()
   // no event calls is expected here:
diff --git a/src/__tests__/helpers/utils.js b/src/__tests__/helpers/utils.js
index cf834752..e35da3e4 100644
--- a/src/__tests__/helpers/utils.js
+++ b/src/__tests__/helpers/utils.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import {render} from '@testing-library/react'
 
 // this is pretty helpful:
@@ -38,10 +37,10 @@ function addEventListener(el, type, listener, options) {
   el.addEventListener(type, hijackedListener, options)
 }
 
-function setup(elementType, props, ...children) {
+function setup(ui) {
   const {
     container: {firstChild: element},
-  } = render(React.createElement(elementType, props, ...children))
+  } = render(ui)
   element.previousTestData = getTestData(element)
 
   const getEventCalls = addListeners(element)
diff --git a/src/__tests__/type-modifiers.js b/src/__tests__/type-modifiers.js
index 47704470..c27138ca 100644
--- a/src/__tests__/type-modifiers.js
+++ b/src/__tests__/type-modifiers.js
@@ -1,3 +1,4 @@
+import React from 'react'
 import userEvent from '..'
 import {setup, addEventListener} from './helpers/utils'
 
@@ -16,7 +17,7 @@ import {setup, addEventListener} from './helpers/utils'
 // but will not capitalize "a".
 
 test('{esc} triggers typing the escape character', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
 
   await userEvent.type(input, '{esc}')
 
@@ -28,7 +29,7 @@ test('{esc} triggers typing the escape character', async () => {
 })
 
 test('{backspace} triggers typing the backspace character and deletes the character behind the cursor', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
   input.value = 'yo'
   input.setSelectionRange(1, 1)
 
@@ -43,7 +44,7 @@ test('{backspace} triggers typing the backspace character and deletes the charac
 })
 
 test('{backspace} on a readOnly input', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
   input.readOnly = true
   input.value = 'yo'
   input.setSelectionRange(1, 1)
@@ -58,7 +59,7 @@ test('{backspace} on a readOnly input', async () => {
 })
 
 test('{backspace} deletes the selected range', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
   input.value = 'Hi there'
   input.setSelectionRange(1, 5)
 
@@ -73,7 +74,7 @@ test('{backspace} deletes the selected range', async () => {
 })
 
 test('{alt}a{/alt}', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
 
   await userEvent.type(input, '{alt}a{/alt}')
 
@@ -89,7 +90,7 @@ test('{alt}a{/alt}', async () => {
 })
 
 test('{meta}a{/meta}', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
 
   await userEvent.type(input, '{meta}a{/meta}')
 
@@ -105,7 +106,7 @@ test('{meta}a{/meta}', async () => {
 })
 
 test('{ctrl}a{/ctrl}', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
 
   await userEvent.type(input, '{ctrl}a{/ctrl}')
 
@@ -121,7 +122,7 @@ test('{ctrl}a{/ctrl}', async () => {
 })
 
 test('{shift}a{/shift}', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
 
   await userEvent.type(input, '{shift}a{/shift}')
 
@@ -137,7 +138,7 @@ test('{shift}a{/shift}', async () => {
 })
 
 test('a{enter}', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
 
   await userEvent.type(input, 'a{enter}')
 
@@ -154,7 +155,7 @@ test('a{enter}', async () => {
 })
 
 test('{enter} with preventDefault keydown', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
   addEventListener(input, 'keydown', e => e.preventDefault())
 
   await userEvent.type(input, '{enter}')
@@ -167,7 +168,7 @@ test('{enter} with preventDefault keydown', async () => {
 })
 
 test('{enter} on a button', async () => {
-  const {element: button, getEventCalls} = setup('button')
+  const {element: button, getEventCalls} = setup(<button />)
 
   await userEvent.type(button, '{enter}')
 
@@ -181,7 +182,7 @@ test('{enter} on a button', async () => {
 })
 
 test('{enter} on a textarea', async () => {
-  const {element: textarea, getEventCalls} = setup('textarea')
+  const {element: textarea, getEventCalls} = setup(<textarea />)
 
   await userEvent.type(textarea, '{enter}')
 
@@ -196,7 +197,7 @@ test('{enter} on a textarea', async () => {
 })
 
 test('{meta}{enter}{/meta} on a button', async () => {
-  const {element: button, getEventCalls} = setup('button')
+  const {element: button, getEventCalls} = setup(<button />)
 
   await userEvent.type(button, '{meta}{enter}{/meta}')
 
@@ -212,7 +213,7 @@ test('{meta}{enter}{/meta} on a button', async () => {
 })
 
 test('{meta}{alt}{ctrl}a{/ctrl}{/alt}{/meta}', async () => {
-  const {element: input, getEventCalls} = setup('input')
+  const {element: input, getEventCalls} = setup(<input />)
 
   await userEvent.type(input, '{meta}{alt}{ctrl}a{/ctrl}{/alt}{/meta}')
 
diff --git a/src/__tests__/type.js b/src/__tests__/type.js
index 8dc95614..6912c477 100644
--- a/src/__tests__/type.js
+++ b/src/__tests__/type.js
@@ -4,7 +4,7 @@ import userEvent from '..'
 import {setup} from './helpers/utils'
 
 it('types text in input', async () => {
-  const {element, getEventCalls} = setup('input')
+  const {element, getEventCalls} = setup(<input />)
   await userEvent.type(element, 'Sup')
   expect(getEventCalls()).toMatchInlineSnapshot(`
     focus
@@ -24,7 +24,7 @@ it('types text in input', async () => {
 })
 
 it('types text in textarea', async () => {
-  const {element, getEventCalls} = setup('textarea')
+  const {element, getEventCalls} = setup(<textarea />)
   await userEvent.type(element, 'Sup')
   expect(getEventCalls()).toMatchInlineSnapshot(`
     focus
@@ -44,7 +44,7 @@ it('types text in textarea', async () => {
 })
 
 test('should append text all at once', async () => {
-  const {element, getEventCalls} = setup('input')
+  const {element, getEventCalls} = setup(<input />)
   await userEvent.type(element, 'Sup', {allAtOnce: true})
   expect(getEventCalls()).toMatchInlineSnapshot(`
     focus