Skip to content

Commit

Permalink
fix: button trigger space (testing-library#409)
Browse files Browse the repository at this point in the history
  • Loading branch information
@visualjerk
visualjerk authored and Jesu Castillo committed Oct 23, 2020
1 parent 6d7ec76 commit 1d57a79
Show file tree
Hide file tree
Showing 10 changed files with 675 additions and 329 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Expand Up @@ -149,7 +149,7 @@ test('double click', () => {
const checkbox = screen.getByTestId('checkbox')
userEvent.dblClick(checkbox)
expect(onChange).toHaveBeenCalledTimes(2)
expect(checkbox).toHaveProperty('checked', false)
expect(checkbox).not.toBeChecked()
})
```

Expand Down Expand Up @@ -185,6 +185,7 @@ The following special character strings are supported:
| Text string | Key | Modifier | Notes |
| ------------- | --------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{enter}` | Enter | N/A | Will insert a newline character (`<textarea />` only). |
| `{space}` | `' '` | N/A | |
| `{esc}` | Escape | N/A | |
| `{backspace}` | Backspace | N/A | Will delete the previous character (or the characters within the `selectedRange`). |
| `{del}` | Delete | N/A | Will delete the next character (or the characters within the `selectedRange`) |
Expand Down Expand Up @@ -558,6 +559,7 @@ Thanks goes to these people ([emoji key][emojis]):

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors][all-contributors] specification.
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Expand Up @@ -41,14 +41,14 @@
"@babel/runtime": "^7.10.2"
},
"devDependencies": {
"@testing-library/dom": "^7.16.0",
"@testing-library/jest-dom": "^5.10.1",
"@testing-library/dom": "^7.21.4",
"@testing-library/jest-dom": "^5.11.1",
"is-ci": "^2.0.0",
"jest-serializer-ansi": "^1.0.3",
"kcd-scripts": "^6.2.3"
},
"peerDependencies": {
"@testing-library/dom": ">=7.16.0"
"@testing-library/dom": ">=7.21.4"
},
"eslintConfig": {
"extends": "./node_modules/kcd-scripts/eslint.js",
Expand Down
6 changes: 3 additions & 3 deletions src/__tests__/click.js
View file
Expand Up @@ -79,7 +79,7 @@ test('clicking a disabled checkbox only fires pointer events', () => {
input[checked=false] - pointerup
`)
expect(element).toBeDisabled()
expect(element).toHaveProperty('checked', false)
expect(element).not.toBeChecked()
})

test('clicking a radio button', () => {
Expand Down Expand Up @@ -107,7 +107,7 @@ test('clicking a radio button', () => {
input[checked=true] - change
`)

expect(element).toHaveProperty('checked', true)
expect(element).toBeChecked()
})

test('clicking a disabled radio button only fires pointer events', () => {
Expand All @@ -125,7 +125,7 @@ test('clicking a disabled radio button only fires pointer events', () => {
`)
expect(element).toBeDisabled()

expect(element).toHaveProperty('checked', false)
expect(element).not.toBeChecked()
})

test('should fire the correct events for <div>', () => {
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/deselect-options.js
View file
Expand Up @@ -52,6 +52,7 @@ test('blurs previously focused element', () => {
option[value="1"][selected=false] - mousemove: Left (0)
option[value="1"][selected=false] - pointerdown
option[value="1"][selected=false] - mousedown: Left (0)
button - focusout
select[name="select"][value=[]] - focusin
option[value="1"][selected=false] - pointerup
option[value="1"][selected=false] - mouseup: Left (0)
Expand Down
3 changes: 3 additions & 0 deletions src/__tests__/paste.js
View file
Expand Up @@ -11,6 +11,7 @@ test('should paste text in input', () => {
Events fired on: input[value="Hello, world!"]
input[value=""] - focus
input[value=""] - focusin
input[value=""] - paste
input[value="Hello, world!"] - input
"{CURSOR}" -> "Hello, world!{CURSOR}"
Expand All @@ -28,6 +29,7 @@ test('should paste text in textarea', () => {
Events fired on: textarea[value="Hello, world!"]
textarea[value=""] - focus
textarea[value=""] - focusin
textarea[value=""] - paste
textarea[value="Hello, world!"] - input
"{CURSOR}" -> "Hello, world!{CURSOR}"
Expand All @@ -43,6 +45,7 @@ test('does not paste when readOnly', () => {
Events fired on: input[value=""]
input[value=""] - focus
input[value=""] - focusin
input[value=""] - paste
`)
})
Expand Down
206 changes: 206 additions & 0 deletions src/__tests__/type-modifiers.js
View file
Expand Up @@ -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)
`)
})

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"', () => {
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"', () => {
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"', () => {
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>')

Expand Down
4 changes: 1 addition & 3 deletions src/blur.js
View file
@@ -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}
4 changes: 1 addition & 3 deletions src/focus.js
View file
@@ -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}

0 comments on commit 1d57a79

Please sign in to comment.