{
type: 'mouseover',
button: 0,
buttons: 0,
- detail: 0
+ detail: 0,
},
{
type: 'mousemove',
button: 0,
buttons: 0,
- detail: 0
+ detail: 0,
},
{
type: 'mousedown',
button: 0,
buttons: 1,
- detail: 1
+ detail: 1,
},
{
type: 'mouseup',
button: 0,
buttons: 1,
- detail: 1
+ detail: 1,
},
{
type: 'click',
button: 0,
buttons: 1,
- detail: 1
+ detail: 1,
},
])
})
it('should fire mouse events with custom button property', () => {
const events = []
- const eventsHandler = jest.fn(evt => events.push({
- type: evt.type,
- button: evt.button,
- buttons: evt.buttons,
- detail: evt.detail,
- altKey: evt.altKey
- }))
+ const eventsHandler = jest.fn(evt =>
+ events.push({
+ type: evt.type,
+ button: evt.button,
+ buttons: evt.buttons,
+ detail: evt.detail,
+ altKey: evt.altKey,
+ }),
+ )
render(
{
userEvent.click(screen.getByTestId('div'), {
button: 1,
- altKey: true
+ altKey: true,
})
expect(events).toEqual([
@@ -519,47 +492,49 @@ it('should fire mouse events with custom button property', () => {
button: 0,
buttons: 0,
detail: 0,
- altKey: true
+ altKey: true,
},
{
type: 'mousemove',
button: 0,
buttons: 0,
detail: 0,
- altKey: true
+ altKey: true,
},
{
type: 'mousedown',
button: 1,
buttons: 4,
detail: 1,
- altKey: true
+ altKey: true,
},
{
type: 'mouseup',
button: 1,
buttons: 4,
detail: 1,
- altKey: true
+ altKey: true,
},
{
type: 'click',
button: 1,
buttons: 4,
detail: 1,
- altKey: true
+ altKey: true,
},
])
})
it('should fire mouse events with custom buttons property', () => {
const events = []
- const eventsHandler = jest.fn(evt => events.push({
- type: evt.type,
- button: evt.button,
- buttons: evt.buttons,
- detail: evt.detail
- }))
+ const eventsHandler = jest.fn(evt =>
+ events.push({
+ type: evt.type,
+ button: evt.button,
+ buttons: evt.buttons,
+ detail: evt.detail,
+ }),
+ )
render(
{
)
userEvent.click(screen.getByTestId('div'), {
- buttons: 4
+ buttons: 4,
})
expect(events).toEqual([
@@ -581,31 +556,31 @@ it('should fire mouse events with custom buttons property', () => {
type: 'mouseover',
button: 0,
buttons: 0,
- detail: 0
+ detail: 0,
},
{
type: 'mousemove',
button: 0,
buttons: 0,
- detail: 0
+ detail: 0,
},
{
type: 'mousedown',
button: 1,
buttons: 4,
- detail: 1
+ detail: 1,
},
{
type: 'mouseup',
button: 1,
buttons: 4,
- detail: 1
+ detail: 1,
},
{
type: 'click',
button: 1,
buttons: 4,
- detail: 1
+ detail: 1,
},
])
})
diff --git a/src/__tests__/helpers/utils.js b/src/__tests__/helpers/utils.js
new file mode 100644
index 00000000..cf834752
--- /dev/null
+++ b/src/__tests__/helpers/utils.js
@@ -0,0 +1,185 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+
+// this is pretty helpful:
+// https://jsbin.com/nimelileyo/edit?js,output
+
+// all of the stuff below is complex magic that makes the simpler tests work
+// sorrynotsorry...
+
+const unstringSnapshotSerializer = {
+ test: val => typeof val === 'string',
+ print: val => val,
+}
+
+expect.addSnapshotSerializer(unstringSnapshotSerializer)
+
+let eventListeners = []
+
+function getTestData(element) {
+ return {
+ value: element.value,
+ selectionStart: element.selectionStart,
+ selectionEnd: element.selectionEnd,
+ checked: element.checked,
+ }
+}
+
+function addEventListener(el, type, listener, options) {
+ const hijackedListener = e => {
+ e.testData = {previous: e.target.previousTestData}
+ const retVal = listener(e)
+ const next = getTestData(e.target)
+ e.testData.next = next
+ e.target.previousTestData = next
+ return retVal
+ }
+ eventListeners.push({el, type, listener: hijackedListener})
+ el.addEventListener(type, hijackedListener, options)
+}
+
+function setup(elementType, props, ...children) {
+ const {
+ container: {firstChild: element},
+ } = render(React.createElement(elementType, props, ...children))
+ element.previousTestData = getTestData(element)
+
+ const getEventCalls = addListeners(element)
+ return {element, getEventCalls}
+}
+
+function addListeners(element) {
+ const generalListener = jest.fn().mockName('eventListener')
+ const listeners = [
+ 'keydown',
+ 'keyup',
+ 'keypress',
+ 'input',
+ 'change',
+ 'blur',
+ 'focus',
+ 'click',
+ 'mouseover',
+ 'mousemove',
+ 'mouseenter',
+ 'mouseleave',
+ 'mouseup',
+ 'mousedown',
+ ]
+
+ for (const name of listeners) {
+ addEventListener(element, name, generalListener)
+ }
+ function getEventCalls() {
+ return generalListener.mock.calls
+ .map(([event]) => {
+ const window = event.target.ownerDocument.defaultView
+ const modifiers = ['altKey', 'shiftKey', 'metaKey', 'ctrlKey']
+ .filter(key => event[key])
+ .map(k => `{${k.replace('Key', '')}}`)
+ .join('')
+
+ if (
+ event.type === 'click' &&
+ event.hasOwnProperty('testData') &&
+ (element.type === 'checkbox' || element.type === 'radio')
+ ) {
+ return getCheckboxOrRadioClickedLine(event)
+ }
+
+ if (event.type === 'input' && event.hasOwnProperty('testData')) {
+ return getInputLine(element, event)
+ }
+
+ if (event instanceof window.KeyboardEvent) {
+ return getKeyboardEventLine(event, modifiers)
+ }
+
+ if (event instanceof window.MouseEvent) {
+ return getMouseEventLine(event, modifiers)
+ }
+
+ return [event.type, modifiers].join(' ').trim()
+ })
+ .join('\n')
+ }
+ return getEventCalls
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+const mouseButtonMap = {
+ 0: 'Left',
+ 1: 'Middle',
+ 2: 'Right',
+ 3: 'Browser Back',
+ 4: 'Browser Forward',
+}
+function getMouseEventLine(event, modifiers) {
+ return [
+ `${event.type}:`,
+ mouseButtonMap[event.button],
+ `(${event.button})`,
+ modifiers,
+ ]
+ .join(' ')
+ .trim()
+}
+
+function getKeyboardEventLine(event, modifiers) {
+ return [
+ `${event.type}:`,
+ event.key,
+ typeof event.keyCode === 'undefined' ? null : `(${event.keyCode})`,
+ modifiers,
+ ]
+ .join(' ')
+ .trim()
+}
+
+function getCheckboxOrRadioClickedLine(event) {
+ const {previous, next} = event.testData
+
+ return `${event.type}: ${previous.checked ? '' : 'un'}checked -> ${
+ next.checked ? '' : 'un'
+ }checked`
+}
+
+function getInputLine(element, event) {
+ if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+ const {previous, next} = event.testData
+
+ if (element.type === 'checkbox' || element.type === 'radio') {
+ return `${event.type}: ${next.checked ? '' : 'un'}checked`
+ } else {
+ const prevVal = [
+ previous.value.slice(0, previous.selectionStart),
+ ...(previous.selectionStart === previous.selectionEnd
+ ? ['{CURSOR}']
+ : [
+ '{SELECTION}',
+ previous.value.slice(
+ previous.selectionStart,
+ previous.selectionEnd,
+ ),
+ '{/SELECTION}',
+ ]),
+ previous.value.slice(previous.selectionEnd),
+ ].join('')
+ return `${event.type}: "${prevVal}" -> "${next.value}"`
+ }
+ } else {
+ throw new Error(
+ `fired ${event.type} event on a ${element.tagName} which probably doesn't make sense. Fix that, or handle it in the setup function`,
+ )
+ }
+}
+
+// eslint-disable-next-line jest/prefer-hooks-on-top
+afterEach(() => {
+ for (const {el, type, listener} of eventListeners) {
+ el.removeEventListener(type, listener)
+ }
+ eventListeners = []
+})
+
+export {setup, addEventListener}
diff --git a/src/__tests__/selectoptions.js b/src/__tests__/selectoptions.js
index 899b3a50..98c6813b 100644
--- a/src/__tests__/selectoptions.js
+++ b/src/__tests__/selectoptions.js
@@ -302,3 +302,19 @@ test('sets the selected prop on the selected OPTION using OPTGROUPS', () => {
expect(screen.getByTestId('val2').selected).toBe(false)
expect(screen.getByTestId('val3').selected).toBe(true)
})
+
+test('does not select anything if no matching options are given', () => {
+ const {
+ container: {firstChild: select},
+ } = render(
+ ,
+ )
+
+ userEvent.selectOptions(select, 'Matches nothing')
+ expect(select.selectedIndex).toBe(0)
+})
diff --git a/src/__tests__/type-modifiers.js b/src/__tests__/type-modifiers.js
new file mode 100644
index 00000000..47704470
--- /dev/null
+++ b/src/__tests__/type-modifiers.js
@@ -0,0 +1,232 @@
+import userEvent from '..'
+import {setup, addEventListener} from './helpers/utils'
+
+// Note, use the setup function at the bottom of the file...
+// but don't hurt yourself trying to read it 😅
+
+// keep in mind that we do not handle modifier interactions. This is primarily
+// because modifiers behave differently on different operating systems.
+// For example: {alt}{backspace}{/alt} will remove everything from the current
+// cursor position to the beginning of the word on Mac, but you need to use
+// {ctrl}{backspace}{/ctrl} to do that on Windows. And that doesn't appear to
+// be consistent within an OS either 🙃
+// So we're not going to even try.
+
+// This also means that '{shift}a' will fire an input event with the shiftKey,
+// but will not capitalize "a".
+
+test('{esc} triggers typing the escape character', async () => {
+ const {element: input, getEventCalls} = setup('input')
+
+ await userEvent.type(input, '{esc}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Escape (27)
+ keyup: Escape (27)
+ `)
+})
+
+test('{backspace} triggers typing the backspace character and deletes the character behind the cursor', async () => {
+ const {element: input, getEventCalls} = setup('input')
+ input.value = 'yo'
+ input.setSelectionRange(1, 1)
+
+ await userEvent.type(input, '{backspace}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Backspace (8)
+ input: "y{CURSOR}o" -> "o"
+ keyup: Backspace (8)
+ `)
+})
+
+test('{backspace} on a readOnly input', async () => {
+ const {element: input, getEventCalls} = setup('input')
+ input.readOnly = true
+ input.value = 'yo'
+ input.setSelectionRange(1, 1)
+
+ await userEvent.type(input, '{backspace}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Backspace (8)
+ keyup: Backspace (8)
+ `)
+})
+
+test('{backspace} deletes the selected range', async () => {
+ const {element: input, getEventCalls} = setup('input')
+ input.value = 'Hi there'
+ input.setSelectionRange(1, 5)
+
+ await userEvent.type(input, '{backspace}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Backspace (8)
+ input: "H{SELECTION}i th{/SELECTION}ere" -> "Here"
+ keyup: Backspace (8)
+ `)
+})
+
+test('{alt}a{/alt}', async () => {
+ const {element: input, getEventCalls} = setup('input')
+
+ await userEvent.type(input, '{alt}a{/alt}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Alt (18) {alt}
+ keydown: a (97) {alt}
+ keypress: a (97) {alt}
+ input: "{CURSOR}" -> "a"
+ keyup: a (97) {alt}
+ keyup: Alt (18)
+ `)
+})
+
+test('{meta}a{/meta}', async () => {
+ const {element: input, getEventCalls} = setup('input')
+
+ await userEvent.type(input, '{meta}a{/meta}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Meta (93) {meta}
+ keydown: a (97) {meta}
+ keypress: a (97) {meta}
+ input: "{CURSOR}" -> "a"
+ keyup: a (97) {meta}
+ keyup: Meta (93)
+ `)
+})
+
+test('{ctrl}a{/ctrl}', async () => {
+ const {element: input, getEventCalls} = setup('input')
+
+ await userEvent.type(input, '{ctrl}a{/ctrl}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Control (17) {ctrl}
+ keydown: a (97) {ctrl}
+ keypress: a (97) {ctrl}
+ input: "{CURSOR}" -> "a"
+ keyup: a (97) {ctrl}
+ keyup: Control (17)
+ `)
+})
+
+test('{shift}a{/shift}', async () => {
+ const {element: input, getEventCalls} = setup('input')
+
+ await userEvent.type(input, '{shift}a{/shift}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Shift (16) {shift}
+ keydown: a (97) {shift}
+ keypress: a (97) {shift}
+ input: "{CURSOR}" -> "a"
+ keyup: a (97) {shift}
+ keyup: Shift (16)
+ `)
+})
+
+test('a{enter}', async () => {
+ const {element: input, getEventCalls} = setup('input')
+
+ await userEvent.type(input, 'a{enter}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: a (97)
+ keypress: a (97)
+ input: "{CURSOR}" -> "a"
+ keyup: a (97)
+ keydown: Enter (13)
+ keypress: Enter (13)
+ keyup: Enter (13)
+ `)
+})
+
+test('{enter} with preventDefault keydown', async () => {
+ const {element: input, getEventCalls} = setup('input')
+ addEventListener(input, 'keydown', e => e.preventDefault())
+
+ await userEvent.type(input, '{enter}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Enter (13)
+ keyup: Enter (13)
+ `)
+})
+
+test('{enter} on a button', async () => {
+ const {element: button, getEventCalls} = setup('button')
+
+ await userEvent.type(button, '{enter}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Enter (13)
+ keypress: Enter (13)
+ click: Left (0)
+ keyup: Enter (13)
+ `)
+})
+
+test('{enter} on a textarea', async () => {
+ const {element: textarea, getEventCalls} = setup('textarea')
+
+ await userEvent.type(textarea, '{enter}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Enter (13)
+ keypress: Enter (13)
+ input: "{CURSOR}" -> "
+ "
+ keyup: Enter (13)
+ `)
+})
+
+test('{meta}{enter}{/meta} on a button', async () => {
+ const {element: button, getEventCalls} = setup('button')
+
+ await userEvent.type(button, '{meta}{enter}{/meta}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Meta (93) {meta}
+ keydown: Enter (13) {meta}
+ keypress: Enter (13) {meta}
+ click: Left (0) {meta}
+ keyup: Enter (13) {meta}
+ keyup: Meta (93)
+ `)
+})
+
+test('{meta}{alt}{ctrl}a{/ctrl}{/alt}{/meta}', async () => {
+ const {element: input, getEventCalls} = setup('input')
+
+ await userEvent.type(input, '{meta}{alt}{ctrl}a{/ctrl}{/alt}{/meta}')
+
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: Meta (93) {meta}
+ keydown: Alt (18) {alt}{meta}
+ keydown: Control (17) {alt}{meta}{ctrl}
+ keydown: a (97) {alt}{meta}{ctrl}
+ keypress: a (97) {alt}{meta}{ctrl}
+ input: "{CURSOR}" -> "a"
+ keyup: a (97) {alt}{meta}{ctrl}
+ keyup: Control (17) {alt}{meta}
+ keyup: Alt (18) {meta}
+ keyup: Meta (93)
+ `)
+})
diff --git a/src/__tests__/type.js b/src/__tests__/type.js
index 26652f36..8dc95614 100644
--- a/src/__tests__/type.js
+++ b/src/__tests__/type.js
@@ -1,39 +1,58 @@
import React, {Fragment} from 'react'
import {render, screen} from '@testing-library/react'
-import userEvent from '../../src'
-
-test.each(['input', 'textarea'])('should type text in <%s>', async type => {
- const onChange = jest.fn()
- render(
- React.createElement(type, {
- 'data-testid': 'input',
- onChange,
- }),
- )
- const text = 'Hello, world!'
- await userEvent.type(screen.getByTestId('input'), text)
- expect(onChange).toHaveBeenCalledTimes(text.length)
- expect(screen.getByTestId('input')).toHaveProperty('value', text)
+import userEvent from '..'
+import {setup} from './helpers/utils'
+
+it('types text in input', async () => {
+ const {element, getEventCalls} = setup('input')
+ await userEvent.type(element, 'Sup')
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: S (83)
+ keypress: S (83)
+ input: "{CURSOR}" -> "S"
+ keyup: S (83)
+ keydown: u (117)
+ keypress: u (117)
+ input: "S{CURSOR}" -> "Su"
+ keyup: u (117)
+ keydown: p (112)
+ keypress: p (112)
+ input: "Su{CURSOR}" -> "Sup"
+ keyup: p (112)
+ `)
})
-test('should append text one by one', async () => {
- const onChange = jest.fn()
- render()
- await userEvent.type(screen.getByTestId('input'), 'hello')
- await userEvent.type(screen.getByTestId('input'), ' world')
- expect(onChange).toHaveBeenCalledTimes('hello world'.length)
- expect(screen.getByTestId('input')).toHaveProperty('value', 'hello world')
+it('types text in textarea', async () => {
+ const {element, getEventCalls} = setup('textarea')
+ await userEvent.type(element, 'Sup')
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ keydown: S (83)
+ keypress: S (83)
+ input: "{CURSOR}" -> "S"
+ keyup: S (83)
+ keydown: u (117)
+ keypress: u (117)
+ input: "S{CURSOR}" -> "Su"
+ keyup: u (117)
+ keydown: p (112)
+ keypress: p (112)
+ input: "Su{CURSOR}" -> "Sup"
+ keyup: p (112)
+ `)
})
test('should append text all at once', async () => {
- const onChange = jest.fn()
- render()
- await userEvent.type(screen.getByTestId('input'), 'hello', {allAtOnce: true})
- await userEvent.type(screen.getByTestId('input'), ' world', {allAtOnce: true})
- expect(onChange).toHaveBeenCalledTimes(2)
- expect(screen.getByTestId('input')).toHaveProperty('value', 'hello world')
+ const {element, getEventCalls} = setup('input')
+ await userEvent.type(element, 'Sup', {allAtOnce: true})
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ focus
+ input: "{CURSOR}" -> "Sup"
+ `)
})
+// TODO: Let's migrate these tests to use the setup util
test('should not type when event.preventDefault() is called', async () => {
const onChange = jest.fn()
const onKeydown = jest
@@ -316,3 +335,64 @@ test('should enter text up to maxLength of the current element if provided', asy
expect(input2).toHaveValue(input2ExpectedValue)
expect(input2).toHaveFocus()
})
+
+test('should replace selected text one by one', async () => {
+ const onChange = jest.fn()
+ const {
+ container: {firstChild: input},
+ } = render()
+ const selectionStart = 'hello world'.search('world')
+ const selectionEnd = selectionStart + 'world'.length
+ input.setSelectionRange(selectionStart, selectionEnd)
+ await userEvent.type(input, 'friend')
+ expect(onChange).toHaveBeenCalledTimes('friend'.length)
+ expect(input).toHaveValue('hello friend')
+})
+
+test('should replace selected text one by one up to maxLength if provided', async () => {
+ const maxLength = 10
+ const onChange = jest.fn()
+ const {
+ container: {firstChild: input},
+ } = render(
+ ,
+ )
+ const selectionStart = 'hello world'.search('world')
+ const selectionEnd = selectionStart + 'world'.length
+ input.setSelectionRange(selectionStart, selectionEnd)
+ const resultIfUnlimited = 'hello friend'
+ const slicedText = resultIfUnlimited.slice(0, maxLength)
+ await userEvent.type(input, 'friend')
+ const truncatedCharCount = resultIfUnlimited.length - slicedText.length
+ expect(onChange).toHaveBeenCalledTimes('friend'.length - truncatedCharCount)
+ expect(input).toHaveValue(slicedText)
+})
+
+test('should replace selected text all at once', async () => {
+ const onChange = jest.fn()
+ const {
+ container: {firstChild: input},
+ } = render()
+ const selectionStart = 'hello world'.search('world')
+ const selectionEnd = selectionStart + 'world'.length
+ input.setSelectionRange(selectionStart, selectionEnd)
+ await userEvent.type(input, 'friend', {allAtOnce: true})
+ expect(onChange).toHaveBeenCalledTimes(1)
+ expect(input).toHaveValue('hello friend')
+})
+
+test('does not continue firing events when disabled during typing', async () => {
+ function TestComp() {
+ const [disabled, setDisabled] = React.useState(false)
+ return setDisabled(true)} />
+ }
+ const {
+ container: {firstChild: input},
+ } = render()
+ await userEvent.type(input, 'hi there')
+ expect(input).toHaveValue('h')
+})
diff --git a/src/index.js b/src/index.js
index b1a8a1bf..febda901 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,5 @@
-import {
- getConfig as getDOMTestingLibraryConfig,
- fireEvent,
-} from '@testing-library/dom'
-
-function wait(time) {
- return new Promise(resolve => setTimeout(() => resolve(), time))
-}
+import {fireEvent} from '@testing-library/dom'
+import {type} from './type'
function isMousePressEvent(event) {
return (
@@ -323,88 +317,6 @@ function clear(element) {
backspace(element)
}
-// this needs to be wrapped in the asyncWrapper for React's act and angular's change detection
-async function type(...args) {
- let result
- await getDOMTestingLibraryConfig().asyncWrapper(async () => {
- result = await typeImpl(...args)
- })
- return result
-}
-
-async function typeImpl(element, text, {allAtOnce = false, delay} = {}) {
- if (element.disabled) return
-
- element.focus()
-
- // The focussed element could change between each event, so get the currently active element each time
- const currentElement = () => element.ownerDocument.activeElement
- const currentValue = () => element.ownerDocument.activeElement.value
-
- const computeText = () =>
- currentElement().maxLength > 0
- ? text.slice(
- 0,
- Math.max(currentElement().maxLength - currentValue().length, 0),
- )
- : text
-
- if (allAtOnce) {
- if (!element.readOnly) {
- const previousText = element.value
-
- fireEvent.input(element, {
- target: {value: previousText + computeText()},
- })
- }
- } else {
- for (let index = 0; index < text.length; index++) {
- const char = text[index]
- const key = char // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
- const keyCode = char.charCodeAt(0)
-
- // eslint-disable-next-line no-await-in-loop
- if (delay > 0) await wait(delay)
-
- if (currentElement().disabled) return
-
- const downEvent = fireEvent.keyDown(currentElement(), {
- key,
- keyCode,
- which: keyCode,
- })
-
- if (downEvent) {
- const pressEvent = fireEvent.keyPress(currentElement(), {
- key,
- keyCode,
- charCode: keyCode,
- })
-
- const isTextPastThreshold = !computeText().length
-
- if (pressEvent && !isTextPastThreshold) {
- if (!element.readOnly) {
- fireEvent.input(currentElement(), {
- target: {
- value: currentValue() + key,
- },
- bubbles: true,
- cancelable: true,
- })
- }
- }
- }
-
- fireEvent.keyUp(currentElement(), {
- key,
- keyCode,
- which: keyCode,
- })
- }
- }
-}
-
function upload(element, fileOrFiles, {clickInit, changeInit} = {}) {
if (element.disabled) return
const focusedElement = element.ownerDocument.activeElement
diff --git a/src/tick.js b/src/tick.js
new file mode 100644
index 00000000..126e39bc
--- /dev/null
+++ b/src/tick.js
@@ -0,0 +1,54 @@
+/* istanbul ignore file */
+// the part of this file that we need tested is definitely being run
+// and the part that is not cannot easily have useful tests written
+// anyway. So we're just going to ignore coverage for this file
+// we're using this to ensure events are not fired synchronously one
+// after the other because that's not how things work when a user
+// fires them...
+/**
+ * copied from React's enqueueTask.js
+ */
+
+let didWarnAboutMessageChannel = false
+let enqueueTask
+try {
+ // read require off the module object to get around the bundlers.
+ // we don't want them to detect a require and bundle a Node polyfill.
+ const requireString = `require${Math.random()}`.slice(0, 7)
+ const nodeRequire = module && module[requireString]
+ // assuming we're in node, let's try to get node's
+ // version of setImmediate, bypassing fake timers if any.
+ enqueueTask = nodeRequire.call(module, 'timers').setImmediate
+} catch (_err) {
+ // we're in a browser
+ // we can't use regular timers because they may still be faked
+ // so we try MessageChannel+postMessage instead
+ enqueueTask = callback => {
+ const supportsMessageChannel = typeof MessageChannel === 'function'
+ if (supportsMessageChannel) {
+ const channel = new MessageChannel()
+ channel.port1.onmessage = callback
+ channel.port2.postMessage(undefined)
+ } else if (didWarnAboutMessageChannel === false) {
+ didWarnAboutMessageChannel = true
+
+ // eslint-disable-next-line no-console
+ console.error(
+ 'This browser does not have a MessageChannel implementation, ' +
+ 'so enqueuing tasks via await act(async () => ...) will fail. ' +
+ 'Please file an issue at https://github.com/testing-library/user-event/issues ' +
+ 'if you encounter this warning.',
+ )
+ }
+ }
+}
+
+function tick() {
+ return {
+ then(resolve) {
+ enqueueTask(resolve)
+ },
+ }
+}
+
+export {tick}
diff --git a/src/type.js b/src/type.js
new file mode 100644
index 00000000..de87434f
--- /dev/null
+++ b/src/type.js
@@ -0,0 +1,313 @@
+import {
+ getConfig as getDOMTestingLibraryConfig,
+ fireEvent,
+} from '@testing-library/dom'
+import {tick} from './tick'
+
+function wait(time) {
+ return new Promise(resolve => setTimeout(() => resolve(), time))
+}
+
+// this needs to be wrapped in the asyncWrapper for React's act and angular's change detection
+async function type(...args) {
+ let result
+ await getDOMTestingLibraryConfig().asyncWrapper(async () => {
+ result = await typeImpl(...args)
+ })
+ return result
+}
+
+async function typeImpl(element, text, {allAtOnce = false, delay} = {}) {
+ if (element.disabled) return
+
+ element.focus()
+
+ // The focused element could change between each event, so get the currently active element each time
+ const currentElement = () => element.ownerDocument.activeElement
+ const currentValue = () => element.ownerDocument.activeElement.value
+
+ if (allAtOnce) {
+ if (!element.readOnly) {
+ fireEvent.input(element, {
+ target: {value: calculateNewValue(text)},
+ })
+ }
+ } else {
+ const eventCallbackMap = {
+ ...modifier({
+ name: 'shift',
+ key: 'Shift',
+ keyCode: 16,
+ modifierProperty: 'shiftKey',
+ }),
+ ...modifier({
+ name: 'ctrl',
+ key: 'Control',
+ keyCode: 17,
+ modifierProperty: 'ctrlKey',
+ }),
+ ...modifier({
+ name: 'alt',
+ key: 'Alt',
+ keyCode: 18,
+ modifierProperty: 'altKey',
+ }),
+ ...modifier({
+ name: 'meta',
+ key: 'Meta',
+ keyCode: 93,
+ modifierProperty: 'metaKey',
+ }),
+ '{enter}': async ({eventOverrides}) => {
+ const key = 'Enter'
+ const keyCode = 13
+
+ const keyDownDefaultNotPrevented = fireEvent.keyDown(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ })
+
+ if (keyDownDefaultNotPrevented) {
+ await tick()
+
+ fireEvent.keyPress(currentElement(), {
+ key,
+ keyCode,
+ charCode: keyCode,
+ ...eventOverrides,
+ })
+ }
+
+ if (currentElement().tagName === 'BUTTON') {
+ await tick()
+ fireEvent.click(currentElement(), {
+ ...eventOverrides,
+ })
+ }
+
+ if (currentElement().tagName === 'TEXTAREA') {
+ await tick()
+ fireEvent.input(currentElement(), {
+ target: {value: calculateNewValue('\n')},
+ inputType: 'insertLineBreak',
+ ...eventOverrides,
+ })
+ }
+
+ await tick()
+
+ fireEvent.keyUp(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ })
+ },
+ '{esc}': async ({eventOverrides}) => {
+ const key = 'Escape'
+ const keyCode = 27
+
+ fireEvent.keyDown(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ })
+
+ await tick()
+
+ // NOTE: Browsers do not fire a keypress on meta key presses
+
+ fireEvent.keyUp(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ })
+ },
+ '{backspace}': async ({eventOverrides}) => {
+ const key = 'Backspace'
+ const keyCode = 8
+
+ fireEvent.keyDown(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ })
+
+ if (!currentElement().readOnly) {
+ await tick()
+
+ const {selectionStart} = currentElement()
+
+ fireEvent.input(currentElement(), {
+ target: {value: calculateNewValue('')},
+ inputType: 'deleteContentBackward',
+ ...eventOverrides,
+ })
+
+ element.setSelectionRange?.(selectionStart, selectionStart)
+ }
+
+ await tick()
+
+ fireEvent.keyUp(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ })
+ },
+ }
+ const eventCallbacks = []
+ let remainingString = text
+ while (remainingString) {
+ const eventKey = Object.keys(eventCallbackMap).find(key =>
+ remainingString.startsWith(key),
+ )
+ if (eventKey) {
+ eventCallbacks.push(eventCallbackMap[eventKey])
+ remainingString = remainingString.slice(eventKey.length)
+ } else {
+ const character = remainingString[0]
+ eventCallbacks.push((...args) => typeCharacter(character, ...args))
+ remainingString = remainingString.slice(1)
+ }
+ }
+ const eventOverrides = {}
+ for (const callback of eventCallbacks) {
+ if (delay > 0) await wait(delay)
+ if (!currentElement().disabled) {
+ const returnValue = await callback({eventOverrides})
+ Object.assign(eventOverrides, returnValue?.eventOverrides)
+ }
+ }
+ }
+
+ function calculateNewValue(newEntry) {
+ const {selectionStart, selectionEnd} = currentElement()
+ // can't use .maxLength property because of a jsdom bug:
+ // https://github.com/jsdom/jsdom/issues/2927
+ const maxLength = Number(currentElement().getAttribute('maxlength') ?? -1)
+ const value = currentValue()
+ let newValue
+ if (selectionStart === selectionEnd) {
+ if (selectionStart === 0) {
+ // at the beginning of the input
+ newValue = newEntry + value
+ } else if (selectionStart === value.length) {
+ // at the end of the input
+ newValue = value + newEntry
+ } else {
+ // in the middle of the input
+ newValue =
+ value.slice(0, selectionStart - 1) +
+ newEntry +
+ value.slice(selectionEnd)
+ }
+ } else {
+ // we have something selected
+ newValue =
+ value.slice(0, selectionStart) + newEntry + value.slice(selectionEnd)
+ }
+
+ if (maxLength < 0) {
+ return newValue
+ } else {
+ return newValue.slice(0, maxLength)
+ }
+ }
+
+ async function typeCharacter(char, {eventOverrides}) {
+ const key = char // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
+ const keyCode = char.charCodeAt(0)
+
+ const keyDownDefaultNotPrevented = fireEvent.keyDown(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ })
+
+ if (keyDownDefaultNotPrevented) {
+ await tick()
+
+ const keyPressDefaultNotPrevented = fireEvent.keyPress(currentElement(), {
+ key,
+ keyCode,
+ charCode: keyCode,
+ ...eventOverrides,
+ })
+
+ const newValue = calculateNewValue(key)
+
+ if (keyPressDefaultNotPrevented && newValue !== currentValue()) {
+ if (!currentElement().readOnly) {
+ await tick()
+
+ const {selectionStart} = currentElement()
+
+ fireEvent.input(currentElement(), {
+ target: {
+ value: newValue,
+ },
+ })
+
+ element.setSelectionRange?.(selectionStart + 1, selectionStart + 1)
+ }
+ }
+ }
+
+ await tick()
+
+ fireEvent.keyUp(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ })
+ }
+
+ function modifier({name, key, keyCode, modifierProperty}) {
+ return {
+ [`{${name}}`]: ({eventOverrides}) => {
+ const newEventOverrides = {[modifierProperty]: true}
+
+ fireEvent.keyDown(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ ...newEventOverrides,
+ })
+
+ return {eventOverrides: newEventOverrides}
+ },
+ [`{/${name}}`]: ({eventOverrides}) => {
+ const newEventOverrides = {[modifierProperty]: false}
+
+ fireEvent.keyUp(currentElement(), {
+ key,
+ keyCode,
+ which: keyCode,
+ ...eventOverrides,
+ ...newEventOverrides,
+ })
+
+ return {eventOverrides: newEventOverrides}
+ },
+ }
+ }
+}
+
+export {type}
+
+/*
+eslint
+ no-await-in-loop: "off",
+ no-loop-func: "off",
+ max-lines-per-function: "off",
+*/
diff --git a/tests/setup-env.js b/tests/setup-env.js
index 9c33c513..839137dc 100644
--- a/tests/setup-env.js
+++ b/tests/setup-env.js
@@ -1,4 +1,5 @@
import '@testing-library/jest-dom/extend-expect'
+import isCI from 'is-ci'
// prevent console calls from making it out into the wild
beforeEach(() => {
@@ -8,28 +9,28 @@ beforeEach(() => {
jest.spyOn(console, 'info')
})
+// but we only assert in CI because it's annoying locally during development
afterEach(() => {
- if (console.error.mock.calls.length) {
+ if (isCI && console.error.mock.calls.length) {
throw new Error(`console.error should not be called in tests`)
}
console.error.mockRestore()
- if (console.log.mock.calls.length) {
+ if (isCI && console.log.mock.calls.length) {
throw new Error(`console.log should not be called in tests`)
}
console.log.mockRestore()
- if (console.warn.mock.calls.length) {
+ if (isCI && console.warn.mock.calls.length) {
throw new Error(`console.warn should not be called in tests`)
}
console.warn.mockRestore()
- if (console.info.mock.calls.length) {
+ if (isCI && console.info.mock.calls.length) {
throw new Error(`console.info should not be called in tests`)
}
console.info.mockRestore()
})
-
/*
eslint
no-console: "off",