Skip to content
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.

Sign up for GitHub

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: replace pointer implementations #754

Merged
merged 12 commits into from
Oct 21, 2021
Merged

fix: replace pointer implementations #754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cab1876
add dblclick event
ph-fritsche Oct 20, 2021
016bcbc
add `pointerId` and `pointerType` to `click`
ph-fritsche Oct 20, 2021
054949c
bind APIs to userEvent instance
ph-fritsche Oct 20, 2021
a599d07
no mouse events on disabled elements
ph-fritsche Oct 20, 2021
0774747
fix which elements bubble
ph-fritsche Oct 20, 2021
cb3c2a7
replace hover implementation
ph-fritsche Oct 20, 2021
799ddcb
fix events on disabled elements
ph-fritsche Oct 20, 2021
41b80cc
fix button
ph-fritsche Oct 20, 2021
549c4ae
fix buttons
ph-fritsche Oct 21, 2021
ea5b2fa
replace click
ph-fritsche Oct 21, 2021
5067467
remove unused utils
ph-fritsche Oct 21, 2021
1ffc0b1
branch coverage
ph-fritsche Oct 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/__tests__/clear.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ test('clears text', () => {

input[value="hello"] - pointerover
input[value="hello"] - pointerenter
input[value="hello"] - mouseover: Left (0)
input[value="hello"] - mouseenter: Left (0)
input[value="hello"] - mouseover
input[value="hello"] - mouseenter
input[value="hello"] - pointermove
input[value="hello"] - mousemove: Left (0)
input[value="hello"] - mousemove
input[value="hello"] - pointerdown
input[value="hello"] - mousedown: Left (0)
input[value="hello"] - mousedown
input[value="hello"] - focus
input[value="hello"] - focusin
input[value="hello"] - pointerup
input[value="hello"] - mouseup: Left (0)
input[value="hello"] - click: Left (0)
input[value="hello"] - mouseup
input[value="hello"] - click
input[value="hello"] - select
input[value="hello"] - keydown: Delete (46)
input[value=""] - input
Expand Down Expand Up @@ -52,17 +52,17 @@ test('does not clear text on readonly inputs', () => {

input[value="hello"] - pointerover
input[value="hello"] - pointerenter
input[value="hello"] - mouseover: Left (0)
input[value="hello"] - mouseenter: Left (0)
input[value="hello"] - mouseover
input[value="hello"] - mouseenter
input[value="hello"] - pointermove
input[value="hello"] - mousemove: Left (0)
input[value="hello"] - mousemove
input[value="hello"] - pointerdown
input[value="hello"] - mousedown: Left (0)
input[value="hello"] - mousedown
input[value="hello"] - focus
input[value="hello"] - focusin
input[value="hello"] - pointerup
input[value="hello"] - mouseup: Left (0)
input[value="hello"] - click: Left (0)
input[value="hello"] - mouseup
input[value="hello"] - click
input[value="hello"] - select
input[value="hello"] - keydown: Delete (46)
input[value="hello"] - keyup: Delete (46)
Expand Down
142 changes: 72 additions & 70 deletions src/__tests__/click.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ test('click in button', () => {

button - pointerover
button - pointerenter
button - mouseover: Left (0)
button - mouseenter: Left (0)
button - mouseover
button - mouseenter
button - pointermove
button - mousemove: Left (0)
button - mousemove
button - pointerdown
button - mousedown: Left (0)
button - mousedown
button - focus
button - focusin
button - pointerup
button - mouseup: Left (0)
button - click: Left (0)
button - mouseup
button - click
`)
})

Expand All @@ -32,8 +32,6 @@ test('only fires pointer events when clicking a disabled button', () => {
button - pointerover
button - pointerenter
button - pointermove
button - pointerdown
button - pointerup
`)
})

Expand All @@ -46,17 +44,17 @@ test('clicking a checkbox', () => {

input[checked=false] - pointerover
input[checked=false] - pointerenter
input[checked=false] - mouseover: Left (0)
input[checked=false] - mouseenter: Left (0)
input[checked=false] - mouseover
input[checked=false] - mouseenter
input[checked=false] - pointermove
input[checked=false] - mousemove: Left (0)
input[checked=false] - mousemove
input[checked=false] - pointerdown
input[checked=false] - mousedown: Left (0)
input[checked=false] - mousedown
input[checked=false] - focus
input[checked=false] - focusin
input[checked=false] - pointerup
input[checked=false] - mouseup: Left (0)
input[checked=true] - click: Left (0)
input[checked=false] - mouseup
input[checked=true] - click
unchecked -> checked
input[checked=true] - input
input[checked=true] - change
Expand All @@ -75,8 +73,6 @@ test('clicking a disabled checkbox only fires pointer events', () => {
input[checked=false] - pointerover
input[checked=false] - pointerenter
input[checked=false] - pointermove
input[checked=false] - pointerdown
input[checked=false] - pointerup
`)
expect(element).toBeDisabled()
expect(element).not.toBeChecked()
Expand All @@ -91,17 +87,17 @@ test('clicking a radio button', () => {

input[checked=false] - pointerover
input[checked=false] - pointerenter
input[checked=false] - mouseover: Left (0)
input[checked=false] - mouseenter: Left (0)
input[checked=false] - mouseover
input[checked=false] - mouseenter
input[checked=false] - pointermove
input[checked=false] - mousemove: Left (0)
input[checked=false] - mousemove
input[checked=false] - pointerdown
input[checked=false] - mousedown: Left (0)
input[checked=false] - mousedown
input[checked=false] - focus
input[checked=false] - focusin
input[checked=false] - pointerup
input[checked=false] - mouseup: Left (0)
input[checked=true] - click: Left (0)
input[checked=false] - mouseup
input[checked=true] - click
unchecked -> checked
input[checked=true] - input
input[checked=true] - change
Expand All @@ -120,8 +116,6 @@ test('clicking a disabled radio button only fires pointer events', () => {
input[checked=false] - pointerover
input[checked=false] - pointerenter
input[checked=false] - pointermove
input[checked=false] - pointerdown
input[checked=false] - pointerup
`)
expect(element).toBeDisabled()

Expand All @@ -136,15 +130,15 @@ test('should fire the correct events for <div>', () => {

div - pointerover
div - pointerenter
div - mouseover: Left (0)
div - mouseenter: Left (0)
div - mouseover
div - mouseenter
div - pointermove
div - mousemove: Left (0)
div - mousemove
div - pointerdown
div - mousedown: Left (0)
div - mousedown
div - pointerup
div - mouseup: Left (0)
div - click: Left (0)
div - mouseup
div - click
`)
})

Expand Down Expand Up @@ -184,18 +178,16 @@ test('should blur the previous element', () => {
Events fired on: div

input[name="b"][value=""] - pointerover
div - pointerenter
input[name="b"][value=""] - mouseover: Left (0)
div - mouseenter: Left (0)
input[name="b"][value=""] - mouseover
input[name="b"][value=""] - pointermove
input[name="b"][value=""] - mousemove: Left (0)
input[name="b"][value=""] - mousemove
input[name="b"][value=""] - pointerdown
input[name="b"][value=""] - mousedown: Left (0)
input[name="b"][value=""] - mousedown
input[name="a"][value=""] - focusout
input[name="b"][value=""] - focusin
input[name="b"][value=""] - pointerup
input[name="b"][value=""] - mouseup: Left (0)
input[name="b"][value=""] - click: Left (0)
input[name="b"][value=""] - mouseup
input[name="b"][value=""] - click
`)
// focus/blur events don't bubble (but the focusout/focusin do!)
// we just want to make sure the blur was fired on a
Expand Down Expand Up @@ -224,16 +216,14 @@ test('should not blur the previous element when mousedown prevents default', ()
Events fired on: div

input[name="b"][value=""] - pointerover
div - pointerenter
input[name="b"][value=""] - mouseover: Left (0)
div - mouseenter: Left (0)
input[name="b"][value=""] - mouseover
input[name="b"][value=""] - pointermove
input[name="b"][value=""] - mousemove: Left (0)
input[name="b"][value=""] - mousemove
input[name="b"][value=""] - pointerdown
input[name="b"][value=""] - mousedown: Left (0)
input[name="b"][value=""] - mousedown
input[name="b"][value=""] - pointerup
input[name="b"][value=""] - mouseup: Left (0)
input[name="b"][value=""] - click: Left (0)
input[name="b"][value=""] - mouseup
input[name="b"][value=""] - click
`)
// focus/blur events don't bubble (but the focusout do!)
// we just want to make sure the blur was fired on a
Expand Down Expand Up @@ -290,9 +280,21 @@ test('gives focus to the form control when clicking within a label', () => {
test('fires no events when clicking a label with a nested control that is disabled', () => {
const {element, getEventSnapshot} = setup(`<label><input disabled /></label>`)
userEvent.click(element)
expect(getEventSnapshot()).toMatchInlineSnapshot(
`No events were fired on: label`,
)
expect(getEventSnapshot()).toMatchInlineSnapshot(`
Events fired on: label

label - pointerover
label - pointerenter
label - mouseover
label - mouseenter
label - pointermove
label - mousemove
label - pointerdown
label - mousedown
label - pointerup
label - mouseup
label - click
`)
})

test('does not crash if the label has no control', () => {
Expand Down Expand Up @@ -370,17 +372,17 @@ test('fires mouse events with the correct properties', () => {
const {element, getClickEventsSnapshot} = setup('<div></div>')
userEvent.click(element)
expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
pointerover - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerenter - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerover - pointerId=1; pointerType=mouse; isPrimary=undefined
pointerenter - pointerId=1; pointerType=mouse; isPrimary=undefined
mouseover - button=0; buttons=0; detail=0
mouseenter - button=0; buttons=0; detail=0
pointermove - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointermove - pointerId=1; pointerType=mouse; isPrimary=undefined
mousemove - button=0; buttons=0; detail=0
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
mousedown - button=0; buttons=1; detail=1
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=0; buttons=1; detail=1
click - button=0; buttons=1; detail=1
pointerup - pointerId=1; pointerType=mouse; isPrimary=true
mouseup - button=0; buttons=0; detail=1
click - button=0; buttons=0; detail=1
`)
})

Expand All @@ -391,17 +393,17 @@ test('fires mouse events with custom button property', () => {
altKey: true,
})
expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
pointerover - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerenter - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerover - pointerId=1; pointerType=mouse; isPrimary=undefined
pointerenter - pointerId=1; pointerType=mouse; isPrimary=undefined
mouseover - button=0; buttons=0; detail=0
mouseenter - button=0; buttons=0; detail=0
pointermove - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointermove - pointerId=1; pointerType=mouse; isPrimary=undefined
mousemove - button=0; buttons=0; detail=0
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=1; buttons=4; detail=1
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=1; buttons=4; detail=1
click - button=1; buttons=4; detail=1
pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
mousedown - button=0; buttons=1; detail=1
pointerup - pointerId=1; pointerType=mouse; isPrimary=true
mouseup - button=0; buttons=0; detail=1
click - button=0; buttons=0; detail=1
`)
})

Expand All @@ -410,17 +412,17 @@ test('fires mouse events with custom buttons property', () => {

userEvent.click(element, {buttons: 4})
expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
pointerover - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerenter - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerover - pointerId=1; pointerType=mouse; isPrimary=undefined
pointerenter - pointerId=1; pointerType=mouse; isPrimary=undefined
mouseover - button=0; buttons=0; detail=0
mouseenter - button=0; buttons=0; detail=0
pointermove - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointermove - pointerId=1; pointerType=mouse; isPrimary=undefined
mousemove - button=0; buttons=0; detail=0
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=1; buttons=4; detail=1
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=1; buttons=4; detail=1
click - button=1; buttons=4; detail=1
pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
mousedown - button=0; buttons=1; detail=1
pointerup - pointerId=1; pointerType=mouse; isPrimary=true
mouseup - button=0; buttons=0; detail=1
click - button=0; buttons=0; detail=1
`)
})

Expand Down
Loading