New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: button trigger space #409
Changes from all commits
7ff1a53
3d1fd25
393fcd6
f3c982e
a5816a2
f2e8104
a5a7925
bc380bc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -443,6 +443,212 @@ test('{enter} on a button', () => { | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
test('{space} on a button', () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const {element, getEventSnapshot} = setup('<button />') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
userEvent.type(element, '{space}') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
expect(getEventSnapshot()).toMatchInlineSnapshot(` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Events fired on: button | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerover | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerenter | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mouseover: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mouseenter: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointermove | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mousemove: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerdown | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mousedown: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - focus | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - focusin | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerup | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mouseup: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - keydown: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - keypress: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - keyup: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
test('{space} with preventDefault keydown on button', () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const {element, getEventSnapshot} = setup('<button />', { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
eventHandlers: { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
keyDown: e => e.preventDefault(), | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
userEvent.type(element, '{space}') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
expect(getEventSnapshot()).toMatchInlineSnapshot(` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Events fired on: button | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerover | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerenter | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mouseover: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mouseenter: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointermove | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mousemove: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerdown | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mousedown: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - focus | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - focusin | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerup | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mouseup: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - keydown: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - keyup: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
test(`' ' on a button`, () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const {element, getEventSnapshot} = setup('<button />') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
userEvent.type(element, ' ') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
expect(getEventSnapshot()).toMatchInlineSnapshot(` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Events fired on: button | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerover | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerenter | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mouseover: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mouseenter: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointermove | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mousemove: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerdown | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mousedown: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - focus | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - focusin | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - pointerup | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - mouseup: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - keydown: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - keypress: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - keyup: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
button - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+505
to
+530
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could we make it clear that all we're really testing is that
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
test('{space} on an input', () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const {element, getEventSnapshot} = setup(`<input value="" />`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
userEvent.type(element, '{space}') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
expect(getEventSnapshot()).toMatchInlineSnapshot(` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Events fired on: input[value=" "] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - pointerover | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - pointerenter | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - mouseover: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - mouseenter: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - pointermove | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - mousemove: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - pointerdown | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - mousedown: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - focus | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - focusin | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - pointerup | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - mouseup: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - keydown: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=""] - keypress: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=" "] - input | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
"{CURSOR}" -> " {CURSOR}" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value=" "] - keyup: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
test('{enter} on an input type="color"', () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same thing as the space on a type color. Why is type color so special it needs a test? When this test fails, how does the developer know what part of the test is important for fixing? |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const {element, getEventSnapshot} = setup( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`<input value="#ffffff" type="color" />`, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
userEvent.type(element, '{enter}') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
expect(getEventSnapshot()).toMatchInlineSnapshot(` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Events fired on: input[value="#ffffff"] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerover | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerenter | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mouseover: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mouseenter: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointermove | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mousemove: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerdown | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mousedown: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - focus | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - focusin | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerup | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mouseup: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - keydown: Enter (13) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - keypress: Enter (13) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - keyup: Enter (13) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
test('{space} on an input type="color"', () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could we make it clear (probably via a comment or the test title) what about this test is important? It's hard to tell as it looks just like all the other tests. Is there some special reason we want to test the color type? (I just tried out an input[type=color] and realized in chrome it renders a button with a color picker so that makes sense why we've got this test here, but a comment would be helpful). |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const {element, getEventSnapshot} = setup( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`<input value="#ffffff" type="color" />`, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
userEvent.type(element, '{space}') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
expect(getEventSnapshot()).toMatchInlineSnapshot(` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Events fired on: input[value="#ffffff"] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerover | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerenter | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mouseover: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mouseenter: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointermove | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mousemove: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerdown | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mousedown: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - focus | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - focusin | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerup | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mouseup: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - keydown: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - keypress: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - keyup: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
test('" " on an input type="color"', () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's do the same to this one as we do with the button one above. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const {element, getEventSnapshot} = setup( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`<input value="#ffffff" type="color" />`, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
userEvent.type(element, ' ') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
expect(getEventSnapshot()).toMatchInlineSnapshot(` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Events fired on: input[value="#ffffff"] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerover | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerenter | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mouseover: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mouseenter: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointermove | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mousemove: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerdown | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mousedown: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - focus | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - focusin | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - pointerup | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - mouseup: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - keydown: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - keypress: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - keyup: (32) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
input[value="#ffffff"] - click: Left (0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
test('{enter} on a textarea', () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const {element, getEventSnapshot} = setup('<textarea></textarea>') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,12 @@ | ||
import {fireEvent} from '@testing-library/dom' | ||
import {getActiveElement, isFocusable, eventWrapper} from './utils' | ||
|
||
function blur(element, init) { | ||
function blur(element) { | ||
if (!isFocusable(element)) return | ||
|
||
const wasActive = getActiveElement(element.ownerDocument) === element | ||
if (!wasActive) return | ||
|
||
eventWrapper(() => element.blur()) | ||
fireEvent.focusOut(element, init) | ||
} | ||
|
||
export {blur} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,12 @@ | ||
import {fireEvent} from '@testing-library/dom' | ||
import {getActiveElement, isFocusable, eventWrapper} from './utils' | ||
|
||
function focus(element, init) { | ||
function focus(element) { | ||
if (!isFocusable(element)) return | ||
|
||
const isAlreadyActive = getActiveElement(element.ownerDocument) === element | ||
if (isAlreadyActive) return | ||
|
||
eventWrapper(() => element.focus()) | ||
fireEvent.focusIn(element, init) | ||
} | ||
|
||
export {focus} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm thinking this is probably a special case where simulating mousing over and clicking wouldn't make sense right? Because anyone trying to do:
userEvent.type(button, '{space}')
is probably not wanting to fire two click events... Hmmm... Should we make this a special case?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was asking myself the same question. For the sake of consistency I decided it should behave the same way it does with other elements.
Maybe we could add a section about this to the documentation? So it is clear that the most popular way to test keyboard events on a button would be:
Another idea would be to use element.focus() instead of userEvent.click(element) as a default for
type
.The benefit would be, that it is less "magic" and we could get rid of
skipClick
altogether.Also the
.focus()
would just fire additional events, if the element doesn't have focus already. So it would just be a minimal safety net.For tests that require a
click
beforehand, it would still be easy to do that: