Skip to content

Commit

Permalink
feat: add pointer API (#750)
Browse files Browse the repository at this point in the history 
* feat: add `pointer` API

* refactor

* add `pointerMove`

* fix fake event bubbling

* sequences of pointer actions

* default to mouse pointer

* add touch tests

* add enter/leave events on touch down/up

* add tests and handle errors

* add tests

* fix istanbul ignore

see kentcdodds/kcd-scripts#218

* add test
  • Loading branch information
@ph-fritsche
ph-fritsche committed Oct 19, 2021
1 parent 8bded0e commit 0b4287c
Show file tree
Hide file tree
Showing 21 changed files with 1,399 additions and 188 deletions.
30 changes: 15 additions & 15 deletions src/__tests__/click.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,15 +370,15 @@ test('fires mouse events with the correct properties', () => {
const {element, getClickEventsSnapshot} = setup('<div></div>')
userEvent.click(element)
expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
pointerover
pointerenter
pointerover - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerenter - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseover - button=0; buttons=0; detail=0
mouseenter - button=0; buttons=0; detail=0
pointermove
pointermove - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousemove - button=0; buttons=0; detail=0
pointerdown
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=0; buttons=1; detail=1
pointerup
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=0; buttons=1; detail=1
click - button=0; buttons=1; detail=1
`)
Expand All @@ -391,15 +391,15 @@ test('fires mouse events with custom button property', () => {
altKey: true,
})
expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
pointerover
pointerenter
pointerover - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerenter - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseover - button=0; buttons=0; detail=0
mouseenter - button=0; buttons=0; detail=0
pointermove
pointermove - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousemove - button=0; buttons=0; detail=0
pointerdown
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=1; buttons=4; detail=1
pointerup
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=1; buttons=4; detail=1
click - button=1; buttons=4; detail=1
`)
Expand All @@ -410,15 +410,15 @@ test('fires mouse events with custom buttons property', () => {

userEvent.click(element, {buttons: 4})
expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
pointerover
pointerenter
pointerover - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerenter - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseover - button=0; buttons=0; detail=0
mouseenter - button=0; buttons=0; detail=0
pointermove
pointermove - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousemove - button=0; buttons=0; detail=0
pointerdown
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=1; buttons=4; detail=1
pointerup
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=1; buttons=4; detail=1
click - button=1; buttons=4; detail=1
`)
Expand Down
42 changes: 21 additions & 21 deletions src/__tests__/dblclick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,20 +208,20 @@ test('fires mouse events with the correct properties', () => {
const {element, getClickEventsSnapshot} = setup('<div></div>')
userEvent.dblClick(element)
expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
pointerover
pointerenter
pointerover - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerenter - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseover - button=0; buttons=0; detail=0
mouseenter - button=0; buttons=0; detail=0
pointermove
pointermove - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousemove - button=0; buttons=0; detail=0
pointerdown
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=0; buttons=1; detail=1
pointerup
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=0; buttons=1; detail=1
click - button=0; buttons=1; detail=1
pointerdown
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=0; buttons=1; detail=2
pointerup
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=0; buttons=1; detail=2
click - button=0; buttons=1; detail=2
dblclick - button=0; buttons=1; detail=2
Expand All @@ -235,20 +235,20 @@ test('fires mouse events with custom button property', () => {
altKey: true,
})
expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
pointerover
pointerenter
pointerover - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerenter - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseover - button=0; buttons=0; detail=0
mouseenter - button=0; buttons=0; detail=0
pointermove
pointermove - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousemove - button=0; buttons=0; detail=0
pointerdown
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=1; buttons=4; detail=1
pointerup
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=1; buttons=4; detail=1
click - button=1; buttons=4; detail=1
pointerdown
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=1; buttons=4; detail=2
pointerup
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=1; buttons=4; detail=2
click - button=1; buttons=4; detail=2
dblclick - button=1; buttons=4; detail=2
Expand All @@ -261,20 +261,20 @@ test('fires mouse events with custom buttons property', () => {
userEvent.dblClick(element, {buttons: 4})

expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
pointerover
pointerenter
pointerover - pointerId=undefined; pointerType=undefined; isPrimary=undefined
pointerenter - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseover - button=0; buttons=0; detail=0
mouseenter - button=0; buttons=0; detail=0
pointermove
pointermove - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousemove - button=0; buttons=0; detail=0
pointerdown
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=1; buttons=4; detail=1
pointerup
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=1; buttons=4; detail=1
click - button=1; buttons=4; detail=1
pointerdown
pointerdown - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mousedown - button=1; buttons=4; detail=2
pointerup
pointerup - pointerId=undefined; pointerType=undefined; isPrimary=undefined
mouseup - button=1; buttons=4; detail=2
click - button=1; buttons=4; detail=2
dblclick - button=1; buttons=4; detail=2
Expand Down
12 changes: 11 additions & 1 deletion src/__tests__/helpers/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,15 @@ function isElement(target: EventTarget): target is Element {
}

function isMouseEvent(event: Event): event is MouseEvent {
return event.constructor.name === 'MouseEvent'
return (
event.constructor.name === 'MouseEvent' ||
event.type === 'click' ||
event.type.startsWith('mouse')
)
}

function isPointerEvent(event: Event): event is PointerEvent {
return event.type.startsWith('pointer')
}

function addListeners(
Expand Down Expand Up @@ -340,6 +348,8 @@ function addListeners(
const lines = getEvents().map(e =>
isMouseEvent(e)
? `${e.type} - button=${e.button}; buttons=${e.buttons}; detail=${e.detail}`
: isPointerEvent(e)
? `${e.type} - pointerId=${e.pointerId}; pointerType=${e.pointerType}; isPrimary=${e.isPrimary}`
: e.type,
)
return {snapshot: lines.join('\n')}
Expand Down

0 comments on commit 0b4287c

Please sign in to comment.