feat: add pointer API (#750)

* 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
testing-library · Oct 21, 2021 · 04820bd · 04820bd
1 parent f1d375d
commit 04820bd
Show file tree

Hide file tree

Showing 21 changed files with 1,399 additions and 188 deletions.
diff --git a/src/__tests__/click.js b/src/__tests__/click.js
@@ -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
   `)
@@ -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
   `)
@@ -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
   `)

diff --git a/src/__tests__/dblclick.js b/src/__tests__/dblclick.js
@@ -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
@@ -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
@@ -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

diff --git a/src/__tests__/helpers/utils.ts b/src/__tests__/helpers/utils.ts
@@ -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(
@@ -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')}