diff --git a/jest.config.js b/jest.config.js
index 7a7a2b500..8d869c497 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -6,6 +6,7 @@ const {
} = require('kcd-scripts/jest')
module.exports = {
+ resetMocks: true,
collectCoverageFrom,
coveragePathIgnorePatterns: [
...coveragePathIgnorePatterns,
diff --git a/package.json b/package.json
index 9076ffe2c..b4f93502c 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
"jest-watch-select-projects": "^2.0.0",
"jsdom": "^16.2.2",
"kcd-scripts": "^6.2.0",
+ "redent": "^3.0.0",
"typescript": "^3.9.5"
},
"eslintConfig": {
diff --git a/src/user-event/__mocks__/utils.js b/src/user-event/__mocks__/utils.js
new file mode 100644
index 000000000..450cafc26
--- /dev/null
+++ b/src/user-event/__mocks__/utils.js
@@ -0,0 +1,49 @@
+const {getElementDisplayName} = require('../__tests__/helpers/utils')
+const actual = jest.requireActual('../utils')
+
+function getTrackedElementValues(element) {
+ return {
+ value: element.value,
+ checked: element.checked,
+ selectionStart: element.selectionStart,
+ selectionEnd: element.selectionEnd,
+ selectedOptions: element.selectedOptions
+ ? Array.from(element.selectedOptions).map(o => o.value)
+ : null,
+ }
+}
+
+function wrapWithTestData(fn) {
+ return async (element, init) => {
+ const before = getTrackedElementValues(element)
+ const testData = {
+ before,
+ elementDisplayName: getElementDisplayName(element),
+ }
+
+ // put it on the element so the event handler can grab it
+ element.testData = testData
+ const result = await fn(element, init)
+
+ const after = getTrackedElementValues(element)
+ Object.assign(testData, {after})
+
+ // elete the testData for the next event
+ delete element.testData
+ return result
+ }
+}
+
+const mockFireEvent = wrapWithTestData(actual.fireEvent)
+for (const key of Object.keys(actual.fireEvent)) {
+ if (typeof actual.fireEvent[key] === 'function') {
+ mockFireEvent[key] = wrapWithTestData(actual.fireEvent[key], key)
+ } else {
+ mockFireEvent[key] = actual.fireEvent[key]
+ }
+}
+
+module.exports = {
+ ...actual,
+ fireEvent: mockFireEvent,
+}
diff --git a/src/user-event/__tests__/clear.js b/src/user-event/__tests__/clear.js
index 64b06da99..40abe33fb 100644
--- a/src/user-event/__tests__/clear.js
+++ b/src/user-event/__tests__/clear.js
@@ -8,13 +8,14 @@ test('clears text', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- focus
- select
- select
- keydown: Delete (46)
- input: "{SELECTION}hello{/SELECTION}" -> ""
- select
- keyup: Delete (46)
+ input[value="hello"] - focus
+ input[value="hello"] - select
+ input[value="hello"] - select
+ input[value="hello"] - keydown: Delete (46)
+ input[value="hello"] - input
+ "{SELECTION}hello{/SELECTION}" -> "{CURSOR}"
+ input[value=""] - select
+ input[value=""] - keyup: Delete (46)
`)
})
@@ -40,11 +41,11 @@ test('does not clear text on readonly inputs', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="hello"]
- focus
- select
- select
- keydown: Delete (46)
- keyup: Delete (46)
+ input[value="hello"] - focus
+ input[value="hello"] - select
+ input[value="hello"] - select
+ input[value="hello"] - keydown: Delete (46)
+ input[value="hello"] - keyup: Delete (46)
`)
})
diff --git a/src/user-event/__tests__/click.js b/src/user-event/__tests__/click.js
index 59a3271ea..fe7e17460 100644
--- a/src/user-event/__tests__/click.js
+++ b/src/user-event/__tests__/click.js
@@ -7,13 +7,13 @@ test('click in input', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- focusin
- mouseup: Left (0)
- click: Left (0)
+ input[value=""] - mouseover: Left (0)
+ input[value=""] - mousemove: Left (0)
+ input[value=""] - mousedown: Left (0)
+ input[value=""] - focus
+ input[value=""] - focusin
+ input[value=""] - mouseup: Left (0)
+ input[value=""] - click: Left (0)
`)
})
@@ -23,13 +23,13 @@ test('click in textarea', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: textarea[value=""]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- focusin
- mouseup: Left (0)
- click: Left (0)
+ textarea[value=""] - mouseover: Left (0)
+ textarea[value=""] - mousemove: Left (0)
+ textarea[value=""] - mousedown: Left (0)
+ textarea[value=""] - focus
+ textarea[value=""] - focusin
+ textarea[value=""] - mouseup: Left (0)
+ textarea[value=""] - click: Left (0)
`)
})
@@ -40,14 +40,17 @@ test('should fire the correct events for ', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[checked=true]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- mouseup: Left (0)
- click: unchecked -> checked
- input: checked
- change
+ input[checked=false] - mouseover: Left (0)
+ input[checked=false] - mousemove: Left (0)
+ input[checked=false] - mousedown: Left (0)
+ input[checked=false] - focus
+ input[checked=false] - mouseup: Left (0)
+ input[checked=false] - click: Left (0)
+ unchecked -> checked
+ input[checked=false] - input
+ unchecked -> checked
+ input[checked=false] - change
+ unchecked -> checked
`)
})
@@ -70,14 +73,17 @@ test('should fire the correct events for ', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[checked=true]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- mouseup: Left (0)
- click: unchecked -> checked
- input: checked
- change
+ input[checked=false] - mouseover: Left (0)
+ input[checked=false] - mousemove: Left (0)
+ input[checked=false] - mousedown: Left (0)
+ input[checked=false] - focus
+ input[checked=false] - mouseup: Left (0)
+ input[checked=false] - click: Left (0)
+ unchecked -> checked
+ input[checked=false] - input
+ unchecked -> checked
+ input[checked=false] - change
+ unchecked -> checked
`)
expect(element).toHaveProperty('checked', true)
@@ -102,12 +108,12 @@ test('should fire the correct events for
', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: div
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focusin
- mouseup: Left (0)
- click: Left (0)
+ div - mouseover: Left (0)
+ div - mousemove: Left (0)
+ div - mousedown: Left (0)
+ div - focusin
+ div - mouseup: Left (0)
+ div - click: Left (0)
`)
})
@@ -143,8 +149,15 @@ test('should blur the previous element', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[name="a"][value=""]
- blur
- focusout (bubbled from input[name="a"][value=""])
+ input[name="a"][value=""] - mouseover: Left (0)
+ input[name="a"][value=""] - mousemove: Left (0)
+ input[name="a"][value=""] - mousedown: Left (0)
+ input[name="a"][value=""] - focus
+ input[name="a"][value=""] - focusin
+ input[name="a"][value=""] - mouseup: Left (0)
+ input[name="a"][value=""] - click: Left (0)
+ input[name="a"][value=""] - blur
+ input[name="a"][value=""] - focusout
`)
})
@@ -161,9 +174,17 @@ test('should not blur the previous element when mousedown prevents default', asy
await userEvent.click(a)
clearEventCalls()
await userEvent.click(b)
- expect(getEventCalls()).toMatchInlineSnapshot(
- `No events were fired on: input[name="a"][value=""]`,
- )
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ Events fired on: input[name="a"][value=""]
+
+ input[name="a"][value=""] - mouseover: Left (0)
+ input[name="a"][value=""] - mousemove: Left (0)
+ input[name="a"][value=""] - mousedown: Left (0)
+ input[name="a"][value=""] - focus
+ input[name="a"][value=""] - focusin
+ input[name="a"][value=""] - mouseup: Left (0)
+ input[name="a"][value=""] - click: Left (0)
+ `)
})
test('does not lose focus when click updates focus', async () => {
diff --git a/src/user-event/__tests__/dblclick.js b/src/user-event/__tests__/dblclick.js
index 524bcb9ef..dca1dd337 100644
--- a/src/user-event/__tests__/dblclick.js
+++ b/src/user-event/__tests__/dblclick.js
@@ -7,16 +7,16 @@ test('fires the correct events on buttons', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: button
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- mouseup: Left (0)
- click: Left (0)
- mousedown: Left (0)
- mouseup: Left (0)
- click: Left (0)
- dblclick: Left (0)
+ button - mouseover: Left (0)
+ button - mousemove: Left (0)
+ button - mousedown: Left (0)
+ button - focus
+ button - mouseup: Left (0)
+ button - click: Left (0)
+ button - mousedown: Left (0)
+ button - mouseup: Left (0)
+ button - click: Left (0)
+ button - dblclick: Left (0)
`)
})
@@ -26,19 +26,25 @@ test('fires the correct events on checkboxes', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[checked=false]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- mouseup: Left (0)
- click: unchecked -> checked
- input: checked
- change
- mousedown: Left (0)
- mouseup: Left (0)
- click: checked -> unchecked
- input: unchecked
- change
+ input[checked=false] - mouseover: Left (0)
+ input[checked=false] - mousemove: Left (0)
+ input[checked=false] - mousedown: Left (0)
+ input[checked=false] - focus
+ input[checked=false] - mouseup: Left (0)
+ input[checked=false] - click: Left (0)
+ unchecked -> checked
+ input[checked=false] - input
+ unchecked -> checked
+ input[checked=false] - change
+ unchecked -> checked
+ input[checked=true] - mousedown: Left (0)
+ input[checked=true] - mouseup: Left (0)
+ input[checked=true] - click: Left (0)
+ checked -> unchecked
+ input[checked=true] - input
+ checked -> unchecked
+ input[checked=true] - change
+ checked -> unchecked
`)
})
@@ -48,16 +54,16 @@ test('fires the correct events on regular inputs', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- mouseup: Left (0)
- click: Left (0)
- mousedown: Left (0)
- mouseup: Left (0)
- click: Left (0)
- dblclick: Left (0)
+ input[value=""] - mouseover: Left (0)
+ input[value=""] - mousemove: Left (0)
+ input[value=""] - mousedown: Left (0)
+ input[value=""] - focus
+ input[value=""] - mouseup: Left (0)
+ input[value=""] - click: Left (0)
+ input[value=""] - mousedown: Left (0)
+ input[value=""] - mouseup: Left (0)
+ input[value=""] - click: Left (0)
+ input[value=""] - dblclick: Left (0)
`)
})
@@ -67,15 +73,15 @@ test('fires the correct events on divs', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: div
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- mouseup: Left (0)
- click: Left (0)
- mousedown: Left (0)
- mouseup: Left (0)
- click: Left (0)
- dblclick: Left (0)
+ div - mouseover: Left (0)
+ div - mousemove: Left (0)
+ div - mousedown: Left (0)
+ div - mouseup: Left (0)
+ div - click: Left (0)
+ div - mousedown: Left (0)
+ div - mouseup: Left (0)
+ div - click: Left (0)
+ div - dblclick: Left (0)
`)
})
@@ -98,7 +104,17 @@ test('blurs the previous element', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: button#button-a
- blur
+ button#button-a - mouseover: Left (0)
+ button#button-a - mousemove: Left (0)
+ button#button-a - mousedown: Left (0)
+ button#button-a - focus
+ button#button-a - mouseup: Left (0)
+ button#button-a - click: Left (0)
+ button#button-a - mousedown: Left (0)
+ button#button-a - mouseup: Left (0)
+ button#button-a - click: Left (0)
+ button#button-a - dblclick: Left (0)
+ button#button-a - blur
`)
})
@@ -123,17 +139,17 @@ test('clicking an element in a label gives the control focus', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: div
- mouseover: Left (0) (bubbled from span)
- mousemove: Left (0) (bubbled from span)
- mousedown: Left (0) (bubbled from span)
- mouseup: Left (0) (bubbled from span)
- click: Left (0) (bubbled from span)
- click: Left (0) (bubbled from input#nested-input[value=""])
- mousedown: Left (0) (bubbled from span)
- mouseup: Left (0) (bubbled from span)
- click: Left (0) (bubbled from span)
- click: Left (0) (bubbled from input#nested-input[value=""])
- dblclick: Left (0) (bubbled from span)
+ span - mouseover: Left (0)
+ span - mousemove: Left (0)
+ span - mousedown: Left (0)
+ span - mouseup: Left (0)
+ span - click: Left (0)
+ input#nested-input[value=""] - click: Left (0)
+ span - mousedown: Left (0)
+ span - mouseup: Left (0)
+ span - click: Left (0)
+ input#nested-input[value=""] - click: Left (0)
+ span - dblclick: Left (0)
`)
})
@@ -155,9 +171,20 @@ test('does not blur the previous element when mousedown prevents default', async
await userEvent.dblClick(a)
clearEventCalls()
await userEvent.dblClick(b)
- expect(getEventCalls()).toMatchInlineSnapshot(
- `No events were fired on: button#button-a`,
- )
+ expect(getEventCalls()).toMatchInlineSnapshot(`
+ Events fired on: button#button-a
+
+ button#button-a - mouseover: Left (0)
+ button#button-a - mousemove: Left (0)
+ button#button-a - mousedown: Left (0)
+ button#button-a - focus
+ button#button-a - mouseup: Left (0)
+ button#button-a - click: Left (0)
+ button#button-a - mousedown: Left (0)
+ button#button-a - mouseup: Left (0)
+ button#button-a - click: Left (0)
+ button#button-a - dblclick: Left (0)
+ `)
})
test('fires mouse events with the correct properties', async () => {
diff --git a/src/user-event/__tests__/helpers/utils.js b/src/user-event/__tests__/helpers/utils.js
index 45cf2a034..4683d03c4 100644
--- a/src/user-event/__tests__/helpers/utils.js
+++ b/src/user-event/__tests__/helpers/utils.js
@@ -1,4 +1,6 @@
+import redent from 'redent'
import {eventMap} from '../../../event-map'
+
// this is pretty helpful:
// https://codesandbox.io/s/quizzical-worker-eo909
@@ -42,37 +44,37 @@ function setupSelect({multiple = false} = {}) {
}
}
-let eventListeners = []
-
-function getTestData(element, event) {
- return {
- bubbledFrom:
- event && event.eventPhase === event.BUBBLING_PHASE
- ? getElementDisplayName(event.target)
- : null,
- value: element.value,
- selectionStart: element.selectionStart,
- selectionEnd: element.selectionEnd,
- checked: element.checked,
- }
+const eventLabelGetters = {
+ KeyboardEvent(event) {
+ return [
+ event.key,
+ typeof event.keyCode === 'undefined' ? null : `(${event.keyCode})`,
+ ]
+ .join(' ')
+ .trim()
+ },
+ MouseEvent(event) {
+ // 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',
+ }
+ return `${mouseButtonMap[event.button]} (${event.button})`
+ },
}
+let eventListeners = []
+
// asside from the hijacked listener stuff here, it's also important to call
// this function rather than simply calling addEventListener yourself
// because it adds your listener to an eventListeners array which is cleaned
// up automatically which will help use avoid memory leaks.
function addEventListener(el, type, listener, options) {
- el.previousTestData = getTestData(el)
- const hijackedListener = e => {
- e.testData = {previous: e.target.previousTestData}
- const retVal = listener(e)
- const next = getTestData(e.target, e)
- e.testData.next = next
- e.target.previousTestData = next
- return retVal
- }
- eventListeners.push({el, type, listener: hijackedListener})
- el.addEventListener(type, hijackedListener, options)
+ eventListeners.push({el, type, listener})
+ el.addEventListener(type, listener, options)
}
function getElementValue(element) {
@@ -105,7 +107,18 @@ function getElementDisplayName(element) {
}
function addListeners(element, {eventHandlers = {}} = {}) {
- const generalListener = jest.fn().mockName('eventListener')
+ const eventHandlerCalls = []
+ const generalListener = jest
+ .fn(event => {
+ const testData = element.testData ?? {
+ elementDisplayName: getElementDisplayName(event.target),
+ }
+ eventHandlerCalls.push({
+ event,
+ testData,
+ })
+ })
+ .mockName('eventListener')
const listeners = Object.keys(eventMap)
for (const name of listeners) {
@@ -122,40 +135,30 @@ function addListeners(element, {eventHandlers = {}} = {}) {
if (element.tagName === 'FORM') {
addEventListener(element, 'submit', e => e.preventDefault())
}
+
function getEventCalls() {
- const eventCalls = generalListener.mock.calls
- .map(([event]) => {
- const window = event.target?.ownerDocument.defaultView
+ const eventCalls = eventHandlerCalls
+ .map(({event, testData}) => {
+ const eventLabel =
+ eventLabelGetters[event.constructor.name]?.(event) ?? ''
const modifiers = ['altKey', 'shiftKey', 'metaKey', 'ctrlKey']
.filter(key => event[key])
.map(k => `{${k.replace('Key', '')}}`)
.join('')
- let log = event.type
- if (
- event.type === 'click' &&
- event.hasOwnProperty('testData') &&
- (element.type === 'checkbox' || element.type === 'radio')
- ) {
- log = getCheckboxOrRadioClickedLine(event)
- } else if (event.type === 'input' && event.hasOwnProperty('testData')) {
- log = getInputLine(element, event)
- } else if (window && event instanceof window.KeyboardEvent) {
- log = getKeyboardEventLine(event)
- } else if (window && event instanceof window.MouseEvent) {
- log = getMouseEventLine(event)
- }
+ const firstLine = [
+ `${testData.elementDisplayName} - ${event.type}`,
+ [eventLabel, modifiers].filter(Boolean).join(' '),
+ ]
+ .filter(Boolean)
+ .join(': ')
return [
- log,
- event.testData && event.testData.next.bubbledFrom
- ? `(bubbled from ${event.testData.next.bubbledFrom})`
- : null,
- modifiers,
+ firstLine,
+ testData.before ? redent(getChanges(testData), 2) : null,
]
.filter(Boolean)
- .join(' ')
- .trim()
+ .join('\n')
})
.join('\n')
.trim()
@@ -171,69 +174,56 @@ function addListeners(element, {eventHandlers = {}} = {}) {
const clearEventCalls = () => generalListener.mockClear()
const getEvents = () => generalListener.mock.calls.map(([e]) => e)
const eventWasFired = eventType => getEvents().some(e => e.type === eventType)
- return {getEventCalls, clearEventCalls, getEvents, eventWasFired}
-}
-
-// 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) {
- return [`${event.type}:`, mouseButtonMap[event.button], `(${event.button})`]
- .join(' ')
- .trim()
+ return {
+ getEventCalls,
+ clearEventCalls,
+ getEvents,
+ eventWasFired,
+ }
}
-function getKeyboardEventLine(event) {
+function getValueWithSelection({value, selectionStart, selectionEnd}) {
return [
- `${event.type}:`,
- event.key,
- typeof event.keyCode === 'undefined' ? null : `(${event.keyCode})`,
- ]
- .join(' ')
- .trim()
+ value.slice(0, selectionStart),
+ ...(selectionStart === selectionEnd
+ ? ['{CURSOR}']
+ : [
+ '{SELECTION}',
+ value.slice(selectionStart, selectionEnd),
+ '{/SELECTION}',
+ ]),
+ value.slice(selectionEnd),
+ ].join('')
}
-function getCheckboxOrRadioClickedLine(event) {
- const {previous, next} = event.testData
-
- return `${event.type}: ${previous.checked ? '' : 'un'}checked -> ${
- next.checked ? '' : 'un'
- }checked`
+const changeLabelGetter = {
+ value: ({before, after}) =>
+ [
+ JSON.stringify(getValueWithSelection(before)),
+ JSON.stringify(getValueWithSelection(after)),
+ ].join(' -> '),
+ checked: ({before, after}) =>
+ [
+ before.checked ? 'checked' : 'unchecked',
+ after.checked ? 'checked' : 'unchecked',
+ ].join(' -> '),
}
-
-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}"`
+changeLabelGetter.selectionStart = changeLabelGetter.value
+changeLabelGetter.selectionEnd = changeLabelGetter.value
+const getDefaultLabel = ({key, before, after}) =>
+ `${key}: ${JSON.stringify(before[key])} -> ${JSON.stringify(after[key])}`
+
+function getChanges({before, after}) {
+ const changes = new Set()
+ for (const key of Object.keys(before)) {
+ if (after[key] !== before[key]) {
+ changes.add(
+ (changeLabelGetter[key] ?? getDefaultLabel)({key, before, after}),
+ )
}
- } 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`,
- )
}
+
+ return Array.from(changes).join('\n')
}
// eslint-disable-next-line jest/prefer-hooks-on-top
@@ -245,4 +235,10 @@ afterEach(() => {
document.body.innerHTML = ''
})
-export {setup, setupSelect, addEventListener, addListeners}
+export {
+ setup,
+ setupSelect,
+ addEventListener,
+ addListeners,
+ getElementDisplayName,
+}
diff --git a/src/user-event/__tests__/hover.js b/src/user-event/__tests__/hover.js
index e3a410206..8fa79c205 100644
--- a/src/user-event/__tests__/hover.js
+++ b/src/user-event/__tests__/hover.js
@@ -8,11 +8,11 @@ test('hover', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: button
- pointerover
- pointerenter
- mouseover: Left (0)
- mouseenter: Left (0)
- pointermove
- mousemove: Left (0)
+ button - pointerover
+ button - pointerenter
+ button - mouseover: Left (0)
+ button - mouseenter: Left (0)
+ button - pointermove
+ button - mousemove: Left (0)
`)
})
diff --git a/src/user-event/__tests__/select-options.js b/src/user-event/__tests__/select-options.js
index eb707121b..8ecf62d7f 100644
--- a/src/user-event/__tests__/select-options.js
+++ b/src/user-event/__tests__/select-options.js
@@ -7,19 +7,26 @@ test('fires correct events', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: select[name="select"][value="1"]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- focusin
- mouseup: Left (0)
- click: Left (0)
- mouseover: Left (0) (bubbled from option[value="1"])
- mousemove: Left (0) (bubbled from option[value="1"])
- mousedown: Left (0) (bubbled from option[value="1"])
- mouseup: Left (0) (bubbled from option[value="1"])
- click: Left (0) (bubbled from option[value="1"])
- change
+ select[name="select"][value="1"] - mouseover: Left (0)
+ selectedOptions: ["1"] -> ["1"]
+ select[name="select"][value="1"] - mousemove: Left (0)
+ selectedOptions: ["1"] -> ["1"]
+ select[name="select"][value="1"] - mousedown: Left (0)
+ selectedOptions: ["1"] -> ["1"]
+ select[name="select"][value="1"] - focus
+ select[name="select"][value="1"] - focusin
+ selectedOptions: ["1"] -> ["1"]
+ select[name="select"][value="1"] - mouseup: Left (0)
+ selectedOptions: ["1"] -> ["1"]
+ select[name="select"][value="1"] - click: Left (0)
+ selectedOptions: ["1"] -> ["1"]
+ option[value="1"] - mouseover: Left (0)
+ option[value="1"] - mousemove: Left (0)
+ option[value="1"] - mousedown: Left (0)
+ option[value="1"] - mouseup: Left (0)
+ option[value="1"] - click: Left (0)
+ select[name="select"][value="1"] - change
+ selectedOptions: ["1"] -> ["1"]
`)
const [o1, o2, o3] = options
expect(o1.selected).toBe(true)
@@ -33,25 +40,33 @@ test('fires correct events on multi-selects', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: select[name="select"][value=["1","3"]]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- focusin
- mouseup: Left (0)
- click: Left (0)
- mouseover: Left (0) (bubbled from option[value="1"])
- mousemove: Left (0) (bubbled from option[value="1"])
- mousedown: Left (0) (bubbled from option[value="1"])
- mouseup: Left (0) (bubbled from option[value="1"])
- click: Left (0) (bubbled from option[value="1"])
- change
- mouseover: Left (0) (bubbled from option[value="3"])
- mousemove: Left (0) (bubbled from option[value="3"])
- mousedown: Left (0) (bubbled from option[value="3"])
- mouseup: Left (0) (bubbled from option[value="3"])
- click: Left (0) (bubbled from option[value="3"])
- change
+ select[name="select"][value=[]] - mouseover: Left (0)
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - mousemove: Left (0)
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - mousedown: Left (0)
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - focus
+ select[name="select"][value=[]] - focusin
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - mouseup: Left (0)
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - click: Left (0)
+ selectedOptions: [] -> []
+ option[value="1"] - mouseover: Left (0)
+ option[value="1"] - mousemove: Left (0)
+ option[value="1"] - mousedown: Left (0)
+ option[value="1"] - mouseup: Left (0)
+ option[value="1"] - click: Left (0)
+ select[name="select"][value=["1"]] - change
+ selectedOptions: ["1"] -> ["1"]
+ option[value="3"] - mouseover: Left (0)
+ option[value="3"] - mousemove: Left (0)
+ option[value="3"] - mousedown: Left (0)
+ option[value="3"] - mouseup: Left (0)
+ option[value="3"] - click: Left (0)
+ select[name="select"][value=["1","3"]] - change
+ selectedOptions: ["1","3"] -> ["1","3"]
`)
const [o1, o2, o3] = options
expect(o1.selected).toBe(true)
@@ -59,7 +74,7 @@ test('fires correct events on multi-selects', async () => {
expect(o3.selected).toBe(true)
})
-test('sets the selected prop on the selected OPTION using option html elements', async () => {
+test('sets the selected prop on the selected option using option html elements', async () => {
const {select, options} = setupSelect()
const [o1, o2, o3] = options
await userEvent.selectOptions(select, o1)
@@ -78,8 +93,8 @@ test('a previously focused input gets blurred', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: button
- blur
- focusout
+ button - blur
+ button - focusout
`)
})
diff --git a/src/user-event/__tests__/toggle-selectoptions.js b/src/user-event/__tests__/toggle-selectoptions.js
index 852855fc1..a991cdca8 100644
--- a/src/user-event/__tests__/toggle-selectoptions.js
+++ b/src/user-event/__tests__/toggle-selectoptions.js
@@ -9,19 +9,26 @@ test('should fire the correct events for multiple select', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: select[name="select"][value=["1"]]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- focusin
- mouseup: Left (0)
- click: Left (0)
- mouseover: Left (0) (bubbled from option[value="1"])
- mousemove: Left (0) (bubbled from option[value="1"])
- mousedown: Left (0) (bubbled from option[value="1"])
- mouseup: Left (0) (bubbled from option[value="1"])
- click: Left (0) (bubbled from option[value="1"])
- change
+ select[name="select"][value=[]] - mouseover: Left (0)
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - mousemove: Left (0)
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - mousedown: Left (0)
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - focus
+ select[name="select"][value=[]] - focusin
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - mouseup: Left (0)
+ selectedOptions: [] -> []
+ select[name="select"][value=[]] - click: Left (0)
+ selectedOptions: [] -> []
+ option[value="1"] - mouseover: Left (0)
+ option[value="1"] - mousemove: Left (0)
+ option[value="1"] - mousedown: Left (0)
+ option[value="1"] - mouseup: Left (0)
+ option[value="1"] - click: Left (0)
+ select[name="select"][value=["1"]] - change
+ selectedOptions: ["1"] -> ["1"]
`)
expect(form).toHaveFormValues({select: ['1']})
@@ -41,19 +48,19 @@ test('should fire the correct events for multiple select when focus is in other
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: form
- mouseover: Left (0) (bubbled from select[name="select"][value=[]])
- mousemove: Left (0) (bubbled from select[name="select"][value=[]])
- mousedown: Left (0) (bubbled from select[name="select"][value=[]])
- focusout (bubbled from button)
- focusin (bubbled from select[name="select"][value=[]])
- mouseup: Left (0) (bubbled from select[name="select"][value=[]])
- click: Left (0) (bubbled from select[name="select"][value=[]])
- mouseover: Left (0) (bubbled from option[value="1"])
- mousemove: Left (0) (bubbled from option[value="1"])
- mousedown: Left (0) (bubbled from option[value="1"])
- mouseup: Left (0) (bubbled from option[value="1"])
- click: Left (0) (bubbled from option[value="1"])
- change (bubbled from select[name="select"][value=["1"]])
+ select[name="select"][value=[]] - mouseover: Left (0)
+ select[name="select"][value=[]] - mousemove: Left (0)
+ select[name="select"][value=[]] - mousedown: Left (0)
+ button - focusout
+ select[name="select"][value=[]] - focusin
+ select[name="select"][value=[]] - mouseup: Left (0)
+ select[name="select"][value=[]] - click: Left (0)
+ option[value="1"] - mouseover: Left (0)
+ option[value="1"] - mousemove: Left (0)
+ option[value="1"] - mousedown: Left (0)
+ option[value="1"] - mouseup: Left (0)
+ option[value="1"] - click: Left (0)
+ select[name="select"][value=["1"]] - change
`)
})
diff --git a/src/user-event/__tests__/type-modifiers.js b/src/user-event/__tests__/type-modifiers.js
index a6b1a19ef..749b8a6d1 100644
--- a/src/user-event/__tests__/type-modifiers.js
+++ b/src/user-event/__tests__/type-modifiers.js
@@ -23,10 +23,10 @@ test('{esc} triggers typing the escape character', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- focus
- select
- keydown: Escape (27)
- keyup: Escape (27)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: Escape (27)
+ input[value=""] - keyup: Escape (27)
`)
})
@@ -36,17 +36,19 @@ test('a{backspace}', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- focus
- select
- keydown: a (97)
- keypress: a (97)
- input: "{CURSOR}" -> "a"
- select
- keyup: a (97)
- keydown: Backspace (8)
- input: "a{CURSOR}" -> ""
- select
- keyup: Backspace (8)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: a (97)
+ input[value=""] - keypress: a (97)
+ input[value=""] - input
+ "{CURSOR}" -> "a{CURSOR}"
+ input[value="a"] - select
+ input[value="a"] - keyup: a (97)
+ input[value="a"] - keydown: Backspace (8)
+ input[value="a"] - input
+ "a{CURSOR}" -> "{CURSOR}"
+ input[value=""] - select
+ input[value=""] - keyup: Backspace (8)
`)
})
@@ -56,15 +58,16 @@ test('{backspace}a', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="a"]
- focus
- select
- keydown: Backspace (8)
- keyup: Backspace (8)
- keydown: a (97)
- keypress: a (97)
- input: "{CURSOR}" -> "a"
- select
- keyup: a (97)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: Backspace (8)
+ input[value=""] - keyup: Backspace (8)
+ input[value=""] - keydown: a (97)
+ input[value=""] - keypress: a (97)
+ input[value=""] - input
+ "{CURSOR}" -> "a{CURSOR}"
+ input[value="a"] - select
+ input[value="a"] - keyup: a (97)
`)
})
@@ -77,12 +80,13 @@ test('{backspace} triggers typing the backspace character and deletes the charac
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="o"]
- select
- focus
- keydown: Backspace (8)
- input: "y{CURSOR}o" -> "o"
- select
- keyup: Backspace (8)
+ input[value="yo"] - select
+ input[value="yo"] - focus
+ input[value="yo"] - keydown: Backspace (8)
+ input[value="yo"] - input
+ "y{CURSOR}o" -> "o{CURSOR}"
+ input[value="o"] - select
+ input[value="o"] - keyup: Backspace (8)
`)
})
@@ -95,10 +99,10 @@ test('{backspace} on a readOnly input', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="yo"]
- select
- focus
- keydown: Backspace (8)
- keyup: Backspace (8)
+ input[value="yo"] - select
+ input[value="yo"] - focus
+ input[value="yo"] - keydown: Backspace (8)
+ input[value="yo"] - keyup: Backspace (8)
`)
})
@@ -113,10 +117,10 @@ test('{backspace} does not fire input if keydown prevents default', async () =>
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="yo"]
- select
- focus
- keydown: Backspace (8)
- keyup: Backspace (8)
+ input[value="yo"] - select
+ input[value="yo"] - focus
+ input[value="yo"] - keydown: Backspace (8)
+ input[value="yo"] - keyup: Backspace (8)
`)
})
@@ -129,12 +133,13 @@ test('{backspace} deletes the selected range', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="Here"]
- select
- focus
- keydown: Backspace (8)
- input: "H{SELECTION}i th{/SELECTION}ere" -> "Here"
- select
- keyup: Backspace (8)
+ input[value="Hi there"] - select
+ input[value="Hi there"] - focus
+ input[value="Hi there"] - keydown: Backspace (8)
+ input[value="Hi there"] - input
+ "H{SELECTION}i th{/SELECTION}ere" -> "Here{CURSOR}"
+ input[value="Here"] - select
+ input[value="Here"] - keyup: Backspace (8)
`)
})
@@ -154,15 +159,16 @@ test('{alt}a{/alt}', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="a"]
- focus
- select
- keydown: Alt (18) {alt}
- keydown: a (97) {alt}
- keypress: a (97) {alt}
- input: "{CURSOR}" -> "a"
- select
- keyup: a (97) {alt}
- keyup: Alt (18)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: Alt (18) {alt}
+ input[value=""] - keydown: a (97) {alt}
+ input[value=""] - keypress: a (97) {alt}
+ input[value=""] - input
+ "{CURSOR}" -> "a{CURSOR}"
+ input[value="a"] - select
+ input[value="a"] - keyup: a (97) {alt}
+ input[value="a"] - keyup: Alt (18)
`)
})
@@ -174,15 +180,16 @@ test('{meta}a{/meta}', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="a"]
- focus
- select
- keydown: Meta (93) {meta}
- keydown: a (97) {meta}
- keypress: a (97) {meta}
- input: "{CURSOR}" -> "a"
- select
- keyup: a (97) {meta}
- keyup: Meta (93)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: Meta (93) {meta}
+ input[value=""] - keydown: a (97) {meta}
+ input[value=""] - keypress: a (97) {meta}
+ input[value=""] - input
+ "{CURSOR}" -> "a{CURSOR}"
+ input[value="a"] - select
+ input[value="a"] - keyup: a (97) {meta}
+ input[value="a"] - keyup: Meta (93)
`)
})
@@ -194,15 +201,16 @@ test('{ctrl}a{/ctrl}', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="a"]
- focus
- select
- keydown: Control (17) {ctrl}
- keydown: a (97) {ctrl}
- keypress: a (97) {ctrl}
- input: "{CURSOR}" -> "a"
- select
- keyup: a (97) {ctrl}
- keyup: Control (17)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: Control (17) {ctrl}
+ input[value=""] - keydown: a (97) {ctrl}
+ input[value=""] - keypress: a (97) {ctrl}
+ input[value=""] - input
+ "{CURSOR}" -> "a{CURSOR}"
+ input[value="a"] - select
+ input[value="a"] - keyup: a (97) {ctrl}
+ input[value="a"] - keyup: Control (17)
`)
})
@@ -214,15 +222,16 @@ test('{shift}a{/shift}', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="a"]
- focus
- select
- keydown: Shift (16) {shift}
- keydown: a (97) {shift}
- keypress: a (97) {shift}
- input: "{CURSOR}" -> "a"
- select
- keyup: a (97) {shift}
- keyup: Shift (16)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: Shift (16) {shift}
+ input[value=""] - keydown: a (97) {shift}
+ input[value=""] - keypress: a (97) {shift}
+ input[value=""] - input
+ "{CURSOR}" -> "a{CURSOR}"
+ input[value="a"] - select
+ input[value="a"] - keyup: a (97) {shift}
+ input[value="a"] - keyup: Shift (16)
`)
})
@@ -234,16 +243,17 @@ test('a{enter}', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="a"]
- focus
- select
- keydown: a (97)
- keypress: a (97)
- input: "{CURSOR}" -> "a"
- select
- keyup: a (97)
- keydown: Enter (13)
- keypress: Enter (13)
- keyup: Enter (13)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: a (97)
+ input[value=""] - keypress: a (97)
+ input[value=""] - input
+ "{CURSOR}" -> "a{CURSOR}"
+ input[value="a"] - select
+ input[value="a"] - keyup: a (97)
+ input[value="a"] - keydown: Enter (13)
+ input[value="a"] - keypress: Enter (13)
+ input[value="a"] - keyup: Enter (13)
`)
})
@@ -259,10 +269,10 @@ test('{enter} with preventDefault keydown', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- focus
- select
- keydown: Enter (13)
- keyup: Enter (13)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: Enter (13)
+ input[value=""] - keyup: Enter (13)
`)
})
@@ -274,11 +284,11 @@ test('{enter} on a button', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: button
- focus
- keydown: Enter (13)
- keypress: Enter (13)
- click: Left (0)
- keyup: Enter (13)
+ button - focus
+ button - keydown: Enter (13)
+ button - keypress: Enter (13)
+ button - click: Left (0)
+ button - keyup: Enter (13)
`)
})
@@ -290,14 +300,14 @@ test('{enter} on a textarea', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: textarea[value="\\n"]
- focus
- select
- keydown: Enter (13)
- keypress: Enter (13)
- input: "{CURSOR}" -> "
- "
- select
- keyup: Enter (13)
+ textarea[value=""] - focus
+ textarea[value=""] - select
+ textarea[value=""] - keydown: Enter (13)
+ textarea[value=""] - keypress: Enter (13)
+ textarea[value=""] - input
+ "{CURSOR}" -> "\\n{CURSOR}"
+ textarea[value="\\n"] - select
+ textarea[value="\\n"] - keyup: Enter (13)
`)
})
@@ -309,13 +319,13 @@ test('{meta}{enter}{/meta} on a button', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: button
- focus
- keydown: Meta (93) {meta}
- keydown: Enter (13) {meta}
- keypress: Enter (13) {meta}
- click: Left (0) {meta}
- keyup: Enter (13) {meta}
- keyup: Meta (93)
+ button - focus
+ button - keydown: Meta (93) {meta}
+ button - keydown: Enter (13) {meta}
+ button - keypress: Enter (13) {meta}
+ button - click: Left (0) {meta}
+ button - keyup: Enter (13) {meta}
+ button - keyup: Meta (93)
`)
})
@@ -327,19 +337,20 @@ test('{meta}{alt}{ctrl}a{/ctrl}{/alt}{/meta}', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="a"]
- focus
- select
- 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"
- select
- keyup: a (97) {alt}{meta}{ctrl}
- keyup: Control (17) {alt}{meta}
- keyup: Alt (18) {meta}
- keyup: Meta (93)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: Meta (93) {meta}
+ input[value=""] - keydown: Alt (18) {alt}{meta}
+ input[value=""] - keydown: Control (17) {alt}{meta}{ctrl}
+ input[value=""] - keydown: a (97) {alt}{meta}{ctrl}
+ input[value=""] - keypress: a (97) {alt}{meta}{ctrl}
+ input[value=""] - input
+ "{CURSOR}" -> "a{CURSOR}"
+ input[value="a"] - select
+ input[value="a"] - keyup: a (97) {alt}{meta}{ctrl}
+ input[value="a"] - keyup: Control (17) {alt}{meta}
+ input[value="a"] - keyup: Alt (18) {meta}
+ input[value="a"] - keyup: Meta (93)
`)
})
@@ -359,8 +370,9 @@ test('{selectall} selects all the text', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="abcdefg"]
- focus
- select
+ input[value="abcdefg"] - select
+ input[value="abcdefg"] - focus
+ input[value="abcdefg"] - select
`)
})
@@ -377,12 +389,13 @@ test('{del} at the start of the input', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="ello"]
- focus
- select
- keydown: Delete (46)
- input: "{CURSOR}hello" -> "ello"
- select
- keyup: Delete (46)
+ input[value="hello"] - focus
+ input[value="hello"] - select
+ input[value="hello"] - keydown: Delete (46)
+ input[value="hello"] - input
+ "{CURSOR}hello" -> "ello{CURSOR}"
+ input[value="ello"] - select
+ input[value="ello"] - keyup: Delete (46)
`)
})
@@ -396,10 +409,10 @@ test('{del} at end of the input', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="hello"]
- focus
- select
- keydown: Delete (46)
- keyup: Delete (46)
+ input[value="hello"] - focus
+ input[value="hello"] - select
+ input[value="hello"] - keydown: Delete (46)
+ input[value="hello"] - keyup: Delete (46)
`)
})
@@ -416,12 +429,13 @@ test('{del} in the middle of the input', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="helo"]
- focus
- select
- keydown: Delete (46)
- input: "he{CURSOR}llo" -> "helo"
- select
- keyup: Delete (46)
+ input[value="hello"] - focus
+ input[value="hello"] - select
+ input[value="hello"] - keydown: Delete (46)
+ input[value="hello"] - input
+ "he{CURSOR}llo" -> "helo{CURSOR}"
+ input[value="helo"] - select
+ input[value="helo"] - keyup: Delete (46)
`)
})
@@ -438,12 +452,13 @@ test('{del} with a selection range', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="hlo"]
- focus
- select
- keydown: Delete (46)
- input: "h{SELECTION}el{/SELECTION}lo" -> "hlo"
- select
- keyup: Delete (46)
+ input[value="hello"] - focus
+ input[value="hello"] - select
+ input[value="hello"] - keydown: Delete (46)
+ input[value="hello"] - input
+ "h{SELECTION}el{/SELECTION}lo" -> "hlo{CURSOR}"
+ input[value="hlo"] - select
+ input[value="hlo"] - keyup: Delete (46)
`)
})
diff --git a/src/user-event/__tests__/type.js b/src/user-event/__tests__/type.js
index bfd62590e..cbfc4a435 100644
--- a/src/user-event/__tests__/type.js
+++ b/src/user-event/__tests__/type.js
@@ -8,23 +8,26 @@ test('types text in input', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="Sup"]
- focus
- select
- keydown: S (83)
- keypress: S (83)
- input: "{CURSOR}" -> "S"
- select
- keyup: S (83)
- keydown: u (117)
- keypress: u (117)
- input: "S{CURSOR}" -> "Su"
- select
- keyup: u (117)
- keydown: p (112)
- keypress: p (112)
- input: "Su{CURSOR}" -> "Sup"
- select
- keyup: p (112)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: S (83)
+ input[value=""] - keypress: S (83)
+ input[value=""] - input
+ "{CURSOR}" -> "S{CURSOR}"
+ input[value="S"] - select
+ input[value="S"] - keyup: S (83)
+ input[value="S"] - keydown: u (117)
+ input[value="S"] - keypress: u (117)
+ input[value="S"] - input
+ "S{CURSOR}" -> "Su{CURSOR}"
+ input[value="Su"] - select
+ input[value="Su"] - keyup: u (117)
+ input[value="Su"] - keydown: p (112)
+ input[value="Su"] - keypress: p (112)
+ input[value="Su"] - input
+ "Su{CURSOR}" -> "Sup{CURSOR}"
+ input[value="Sup"] - select
+ input[value="Sup"] - keyup: p (112)
`)
})
@@ -34,10 +37,11 @@ test('types text in input with allAtOnce', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="Sup"]
- focus
- select
- input: "{CURSOR}" -> "Sup"
- select
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - input
+ "{CURSOR}" -> "Sup{CURSOR}"
+ input[value="Sup"] - select
`)
})
@@ -51,23 +55,26 @@ test('types text inside custom element', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="Sup"]
- focus
- select
- keydown: S (83)
- keypress: S (83)
- input: "{CURSOR}" -> "S"
- select
- keyup: S (83)
- keydown: u (117)
- keypress: u (117)
- input: "S{CURSOR}" -> "Su"
- select
- keyup: u (117)
- keydown: p (112)
- keypress: p (112)
- input: "Su{CURSOR}" -> "Sup"
- select
- keyup: p (112)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: S (83)
+ input[value=""] - keypress: S (83)
+ input[value=""] - input
+ "{CURSOR}" -> "S{CURSOR}"
+ input[value="S"] - select
+ input[value="S"] - keyup: S (83)
+ input[value="S"] - keydown: u (117)
+ input[value="S"] - keypress: u (117)
+ input[value="S"] - input
+ "S{CURSOR}" -> "Su{CURSOR}"
+ input[value="Su"] - select
+ input[value="Su"] - keyup: u (117)
+ input[value="Su"] - keydown: p (112)
+ input[value="Su"] - keypress: p (112)
+ input[value="Su"] - input
+ "Su{CURSOR}" -> "Sup{CURSOR}"
+ input[value="Sup"] - select
+ input[value="Sup"] - keyup: p (112)
`)
})
@@ -77,23 +84,26 @@ test('types text in textarea', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: textarea[value="Sup"]
- focus
- select
- keydown: S (83)
- keypress: S (83)
- input: "{CURSOR}" -> "S"
- select
- keyup: S (83)
- keydown: u (117)
- keypress: u (117)
- input: "S{CURSOR}" -> "Su"
- select
- keyup: u (117)
- keydown: p (112)
- keypress: p (112)
- input: "Su{CURSOR}" -> "Sup"
- select
- keyup: p (112)
+ textarea[value=""] - focus
+ textarea[value=""] - select
+ textarea[value=""] - keydown: S (83)
+ textarea[value=""] - keypress: S (83)
+ textarea[value=""] - input
+ "{CURSOR}" -> "S{CURSOR}"
+ textarea[value="S"] - select
+ textarea[value="S"] - keyup: S (83)
+ textarea[value="S"] - keydown: u (117)
+ textarea[value="S"] - keypress: u (117)
+ textarea[value="S"] - input
+ "S{CURSOR}" -> "Su{CURSOR}"
+ textarea[value="Su"] - select
+ textarea[value="Su"] - keyup: u (117)
+ textarea[value="Su"] - keydown: p (112)
+ textarea[value="Su"] - keypress: p (112)
+ textarea[value="Su"] - input
+ "Su{CURSOR}" -> "Sup{CURSOR}"
+ textarea[value="Sup"] - select
+ textarea[value="Sup"] - keyup: p (112)
`)
})
@@ -103,10 +113,11 @@ test('should append text all at once', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="Sup"]
- focus
- select
- input: "{CURSOR}" -> "Sup"
- select
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - input
+ "{CURSOR}" -> "Sup{CURSOR}"
+ input[value="Sup"] - select
`)
})
@@ -119,11 +130,11 @@ test('does not fire input event when keypress calls prevent default', async () =
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- focus
- select
- keydown: a (97)
- keypress: a (97)
- keyup: a (97)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: a (97)
+ input[value=""] - keypress: a (97)
+ input[value=""] - keyup: a (97)
`)
})
@@ -136,10 +147,10 @@ test('does not fire keypress or input events when keydown calls prevent default'
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- focus
- select
- keydown: a (97)
- keyup: a (97)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: a (97)
+ input[value=""] - keyup: a (97)
`)
})
@@ -159,11 +170,11 @@ test('does not fire input when readonly', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- focus
- select
- keydown: a (97)
- keypress: a (97)
- keyup: a (97)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: a (97)
+ input[value=""] - keypress: a (97)
+ input[value=""] - keyup: a (97)
`)
})
@@ -174,8 +185,8 @@ test('does not fire input when readonly (with allAtOnce)', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- focus
- select
+ input[value=""] - focus
+ input[value=""] - select
`)
})
@@ -218,21 +229,23 @@ test('honors maxlength', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="12"]
- focus
- select
- keydown: 1 (49)
- keypress: 1 (49)
- input: "{CURSOR}" -> "1"
- select
- keyup: 1 (49)
- keydown: 2 (50)
- keypress: 2 (50)
- input: "1{CURSOR}" -> "12"
- select
- keyup: 2 (50)
- keydown: 3 (51)
- keypress: 3 (51)
- keyup: 3 (51)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: 1 (49)
+ input[value=""] - keypress: 1 (49)
+ input[value=""] - input
+ "{CURSOR}" -> "1{CURSOR}"
+ input[value="1"] - select
+ input[value="1"] - keyup: 1 (49)
+ input[value="1"] - keydown: 2 (50)
+ input[value="1"] - keypress: 2 (50)
+ input[value="1"] - input
+ "1{CURSOR}" -> "12{CURSOR}"
+ input[value="12"] - select
+ input[value="12"] - keyup: 2 (50)
+ input[value="12"] - keydown: 3 (51)
+ input[value="12"] - keypress: 3 (51)
+ input[value="12"] - keyup: 3 (51)
`)
})
@@ -244,11 +257,11 @@ test('honors maxlength with existing text', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="12"]
- focus
- select
- keydown: 3 (51)
- keypress: 3 (51)
- keyup: 3 (51)
+ input[value="12"] - focus
+ input[value="12"] - select
+ input[value="12"] - keydown: 3 (51)
+ input[value="12"] - keypress: 3 (51)
+ input[value="12"] - keyup: 3 (51)
`)
})
@@ -320,17 +333,19 @@ test('typing into a controlled input works', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="$23"]
- focus
- select
- keydown: 2 (50)
- keypress: 2 (50)
- input: "{CURSOR}" -> "$2"
- keyup: 2 (50)
- keydown: 3 (51)
- keypress: 3 (51)
- input: "$2{CURSOR}" -> "$23"
- select
- keyup: 3 (51)
+ input[value=""] - focus
+ input[value=""] - select
+ input[value=""] - keydown: 2 (50)
+ input[value=""] - keypress: 2 (50)
+ input[value=""] - input
+ "{CURSOR}" -> "$2{CURSOR}"
+ input[value="$2"] - keyup: 2 (50)
+ input[value="$2"] - keydown: 3 (51)
+ input[value="$2"] - keypress: 3 (51)
+ input[value="$2"] - input
+ "$2{CURSOR}" -> "$23{CURSOR}"
+ input[value="$23"] - select
+ input[value="$23"] - keyup: 3 (51)
`)
})
@@ -344,13 +359,14 @@ test('typing in the middle of a controlled input works', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="$213"]
- select
- focus
- keydown: 1 (49)
- keypress: 1 (49)
- input: "$2{CURSOR}3" -> "$213"
- select
- keyup: 1 (49)
+ input[value="$23"] - select
+ input[value="$23"] - focus
+ input[value="$23"] - keydown: 1 (49)
+ input[value="$23"] - keypress: 1 (49)
+ input[value="$23"] - input
+ "$2{CURSOR}3" -> "$213{CURSOR}"
+ input[value="$213"] - select
+ input[value="$213"] - keyup: 1 (49)
`)
})
@@ -374,16 +390,18 @@ test('ignored {backspace} in controlled input', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="$234"]
- select
- focus
- keydown: Backspace (8)
- input: "\${CURSOR}23" -> "$23"
- keyup: Backspace (8)
- keydown: 4 (52)
- keypress: 4 (52)
- input: "$23{CURSOR}" -> "$234"
- select
- keyup: 4 (52)
+ input[value="$23"] - select
+ input[value="$23"] - focus
+ input[value="$23"] - keydown: Backspace (8)
+ input[value="$23"] - input
+ "\${CURSOR}23" -> "$23{CURSOR}"
+ input[value="$23"] - keyup: Backspace (8)
+ input[value="$23"] - keydown: 4 (52)
+ input[value="$23"] - keypress: 4 (52)
+ input[value="$23"] - input
+ "$23{CURSOR}" -> "$234{CURSOR}"
+ input[value="$234"] - select
+ input[value="$234"] - keyup: 4 (52)
`)
})
@@ -395,18 +413,20 @@ test('typing in a textarea with existing text', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: textarea[value="Hello, 12"]
- focus
- select
- keydown: 1 (49)
- keypress: 1 (49)
- input: "Hello, {CURSOR}" -> "Hello, 1"
- select
- keyup: 1 (49)
- keydown: 2 (50)
- keypress: 2 (50)
- input: "Hello, 1{CURSOR}" -> "Hello, 12"
- select
- keyup: 2 (50)
+ textarea[value="Hello, "] - focus
+ textarea[value="Hello, "] - select
+ textarea[value="Hello, "] - keydown: 1 (49)
+ textarea[value="Hello, "] - keypress: 1 (49)
+ textarea[value="Hello, "] - input
+ "Hello, {CURSOR}" -> "Hello, 1{CURSOR}"
+ textarea[value="Hello, 1"] - select
+ textarea[value="Hello, 1"] - keyup: 1 (49)
+ textarea[value="Hello, 1"] - keydown: 2 (50)
+ textarea[value="Hello, 1"] - keypress: 2 (50)
+ textarea[value="Hello, 1"] - input
+ "Hello, 1{CURSOR}" -> "Hello, 12{CURSOR}"
+ textarea[value="Hello, 12"] - select
+ textarea[value="Hello, 12"] - keyup: 2 (50)
`)
expect(element).toHaveValue('Hello, 12')
})
@@ -423,19 +443,21 @@ test('accepts an initialSelectionStart and initialSelectionEnd', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: textarea[value="12Hello, "]
- select
- focus
- select
- keydown: 1 (49)
- keypress: 1 (49)
- input: "{CURSOR}Hello, " -> "1Hello, "
- select
- keyup: 1 (49)
- keydown: 2 (50)
- keypress: 2 (50)
- input: "1{CURSOR}Hello, " -> "12Hello, "
- select
- keyup: 2 (50)
+ textarea[value="Hello, "] - select
+ textarea[value="Hello, "] - focus
+ textarea[value="Hello, "] - select
+ textarea[value="Hello, "] - keydown: 1 (49)
+ textarea[value="Hello, "] - keypress: 1 (49)
+ textarea[value="Hello, "] - input
+ "{CURSOR}Hello, " -> "1Hello, {CURSOR}"
+ textarea[value="1Hello, "] - select
+ textarea[value="1Hello, "] - keyup: 1 (49)
+ textarea[value="1Hello, "] - keydown: 2 (50)
+ textarea[value="1Hello, "] - keypress: 2 (50)
+ textarea[value="1Hello, "] - input
+ "1{CURSOR}Hello, " -> "12Hello, {CURSOR}"
+ textarea[value="12Hello, "] - select
+ textarea[value="12Hello, "] - keyup: 2 (50)
`)
expect(element).toHaveValue('12Hello, ')
})
@@ -461,15 +483,16 @@ test('can type "-" into number inputs', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value="-3"]
- focus
- keydown: - (45)
- keypress: - (45)
- input: "{CURSOR}" -> ""
- keyup: - (45)
- keydown: 3 (51)
- keypress: 3 (51)
- input: "{CURSOR}" -> "-3"
- keyup: 3 (51)
+ input[value=""] - focus
+ input[value=""] - keydown: - (45)
+ input[value=""] - keypress: - (45)
+ input[value=""] - input
+ input[value=""] - keyup: - (45)
+ input[value=""] - keydown: 3 (51)
+ input[value=""] - keypress: 3 (51)
+ input[value=""] - input
+ "{CURSOR}" -> "{CURSOR}-3"
+ input[value="-3"] - keyup: 3 (51)
`)
})
@@ -482,19 +505,22 @@ test('can type "." into number inputs', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=".3"]
- focus
- keydown: 0 (48)
- keypress: 0 (48)
- input: "{CURSOR}" -> "0"
- keyup: 0 (48)
- keydown: . (46)
- keypress: . (46)
- input: "{CURSOR}0" -> ""
- keyup: . (46)
- keydown: 3 (51)
- keypress: 3 (51)
- input: "{CURSOR}" -> ".3"
- keyup: 3 (51)
+ input[value=""] - focus
+ input[value=""] - keydown: 0 (48)
+ input[value=""] - keypress: 0 (48)
+ input[value=""] - input
+ "{CURSOR}" -> "{CURSOR}0"
+ input[value="0"] - keyup: 0 (48)
+ input[value="0"] - keydown: . (46)
+ input[value="0"] - keypress: . (46)
+ input[value="0"] - input
+ "{CURSOR}0" -> "{CURSOR}"
+ input[value=""] - keyup: . (46)
+ input[value=""] - keydown: 3 (51)
+ input[value=""] - keypress: 3 (51)
+ input[value=""] - input
+ "{CURSOR}" -> "{CURSOR}.3"
+ input[value=".3"] - keyup: 3 (51)
`)
})
diff --git a/src/user-event/__tests__/unhover.js b/src/user-event/__tests__/unhover.js
index d5769fb99..43fc410fa 100644
--- a/src/user-event/__tests__/unhover.js
+++ b/src/user-event/__tests__/unhover.js
@@ -8,11 +8,11 @@ test('unhover', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: button
- pointermove
- mousemove: Left (0)
- pointerout
- pointerleave
- mouseout: Left (0)
- mouseleave: Left (0)
+ button - pointermove
+ button - mousemove: Left (0)
+ button - pointerout
+ button - pointerleave
+ button - mouseout: Left (0)
+ button - mouseleave: Left (0)
`)
})
diff --git a/src/user-event/__tests__/upload.js b/src/user-event/__tests__/upload.js
index 798241980..71c113469 100644
--- a/src/user-event/__tests__/upload.js
+++ b/src/user-event/__tests__/upload.js
@@ -10,14 +10,14 @@ test('should fire the correct events for input', async () => {
expect(getEventCalls()).toMatchInlineSnapshot(`
Events fired on: input[value=""]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- focus
- focusin
- mouseup: Left (0)
- click: Left (0)
- change
+ input[value=""] - mouseover: Left (0)
+ input[value=""] - mousemove: Left (0)
+ input[value=""] - mousedown: Left (0)
+ input[value=""] - focus
+ input[value=""] - focusin
+ input[value=""] - mouseup: Left (0)
+ input[value=""] - click: Left (0)
+ input[value=""] - change
`)
})
@@ -40,18 +40,18 @@ test('should fire the correct events with label', async () => {
expect(getLabelEventCalls()).toMatchInlineSnapshot(`
Events fired on: label[for="element"]
- mouseover: Left (0)
- mousemove: Left (0)
- mousedown: Left (0)
- mouseup: Left (0)
- click: Left (0)
+ label[for="element"] - mouseover: Left (0)
+ label[for="element"] - mousemove: Left (0)
+ label[for="element"] - mousedown: Left (0)
+ label[for="element"] - mouseup: Left (0)
+ label[for="element"] - click: Left (0)
`)
expect(getInputEventCalls()).toMatchInlineSnapshot(`
Events fired on: input#element[value=""]
- click: Left (0)
- focus
- change
+ input#element[value=""] - click: Left (0)
+ input#element[value=""] - focus
+ input#element[value=""] - change
`)
})
diff --git a/src/user-event/hover.js b/src/user-event/hover.js
index f521e5e05..d7d9b8480 100644
--- a/src/user-event/hover.js
+++ b/src/user-event/hover.js
@@ -1,6 +1,8 @@
import {wrapAsync} from '../wrap-async'
import {fireEvent, getMouseEventOptions} from './utils'
+jest.mock('./utils')
+
async function hover(element, init) {
await fireEvent.pointerOver(element, init)
await fireEvent.pointerEnter(element, init)
diff --git a/tests/setup-env.js b/tests/setup-env.js
index 99b03bdba..6bb7bcfb3 100644
--- a/tests/setup-env.js
+++ b/tests/setup-env.js
@@ -1,6 +1,8 @@
import '@testing-library/jest-dom/extend-expect'
import jestSerializerAnsi from 'jest-serializer-ansi'
+jest.mock('../src/user-event/utils')
+
expect.addSnapshotSerializer(jestSerializerAnsi)
// add serializer for MutationRecord
expect.addSnapshotSerializer({