Skip to content

Commit

Permalink
test: improve setup utility
Browse files Browse the repository at this point in the history
  • Loading branch information
@kentcdodds
kentcdodds committed Jun 4, 2020
1 parent d38e493 commit 4abecfa
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 27 deletions.
11 changes: 4 additions & 7 deletions src/__tests__/click.js
View file
Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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(`
Expand All @@ -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:
Expand Down
5 changes: 2 additions & 3 deletions src/__tests__/helpers/utils.js
View file
@@ -1,4 +1,3 @@
import React from 'react'
import {render} from '@testing-library/react'

// this is pretty helpful:
Expand Down Expand Up @@ -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)
Expand Down
29 changes: 15 additions & 14 deletions src/__tests__/type-modifiers.js
View file
@@ -1,3 +1,4 @@
import React from 'react'
import userEvent from '..'
import {setup, addEventListener} from './helpers/utils'

Expand All @@ -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}')

Expand All @@ -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)

Expand All @@ -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)
Expand All @@ -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)

Expand All @@ -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}')

Expand All @@ -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}')

Expand All @@ -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}')

Expand All @@ -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}')

Expand All @@ -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}')

Expand All @@ -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}')
Expand All @@ -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}')

Expand All @@ -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}')

Expand All @@ -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}')

Expand All @@ -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}')

Expand Down
6 changes: 3 additions & 3 deletions src/__tests__/type.js
View file
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down

0 comments on commit 4abecfa

Please sign in to comment.