[react-events] Press: improve test coverage (#16397)

1. Run the tests in both an environment without PointerEvent and one with PointerEvent.
2. Improve test coverage to include both mouse and touch pointers.
3. Change 'Press' so that it only listens to either pointer events or fallbacks events.

packages/react-events/src/dom/Press.js

@@ -95,10 +95,14 @@ type PressEvent = {|
   shiftKey: boolean,
 |};
 
+const hasPointerEvents =
+  typeof window !== 'undefined' && window.PointerEvent !== undefined;
+
 const isMac =
   typeof window !== 'undefined' && window.navigator != null
     ? /^Mac/.test(window.navigator.platform)
     : false;
+
 const DEFAULT_PRESS_RETENTION_OFFSET = {
   bottom: 20,
   top: 20,
@@ -106,37 +110,32 @@ const DEFAULT_PRESS_RETENTION_OFFSET = {
   right: 20,
 };
 
-const targetEventTypes = [
-  'keydown_active',
-  // We need to preventDefault on pointerdown for mouse/pen events
-  // that are in hit target area but not the element area.
-  'pointerdown_active',
-  'click_active',
-];
-const rootEventTypes = [
-  'click',
-  'keyup',
-  'pointerup',
-  'pointermove',
-  'scroll',
-  'pointercancel',
-  // We listen to this here so stopPropagation can
-  // block other mouseup events used internally
-  'mouseup_active',
-  'touchend',
-];
+const targetEventTypes = hasPointerEvents
+  ? [
+      'keydown_active',
+      // We need to preventDefault on pointerdown for mouse/pen events
+      // that are in hit target area but not the element area.
+      'pointerdown_active',
+      'click_active',
+    ]
+  : ['keydown_active', 'touchstart', 'mousedown', 'click_active'];
 
-// If PointerEvents is not supported (e.g., Safari), also listen to touch and mouse events.
-if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
-  targetEventTypes.push('touchstart', 'mousedown');
-  rootEventTypes.push(
-    'mousemove',
-    'touchmove',
-    'touchcancel',
-    // Used as a 'cancel' signal for mouse interactions
-    'dragstart',
-  );
-}
+const rootEventTypes = hasPointerEvents
+  ? ['pointerup', 'pointermove', 'pointercancel', 'click', 'keyup', 'scroll']
+  : [
+      'click',
+      'keyup',
+      'scroll',
+      'mousemove',
+      'touchmove',
+      'touchcancel',
+      // Used as a 'cancel' signal for mouse interactions
+      'dragstart',
+      // We listen to this here so stopPropagation can
+      // block other mouseup events used internally
+      'mouseup_active',
+      'touchend',
+    ];
 
 function isFunction(obj): boolean {
   return typeof obj === 'function';
@@ -539,7 +538,7 @@ const pressResponderImpl = {
           }
 
           state.shouldPreventClick = false;
-          if (isPointerEvent || isTouchEvent) {
+          if (isTouchEvent) {
             state.ignoreEmulatedMouseEvents = true;
           } else if (isKeyboardEvent) {
             // Ignore unrelated key events
@@ -676,6 +675,7 @@ const pressResponderImpl = {
         if (state.isPressWithinResponderRegion) {
           if (isPressed) {
             const onPressMove = props.onPressMove;
+
             if (isFunction(onPressMove)) {
               dispatchEvent(
                 event,
@@ -777,6 +777,7 @@ const pressResponderImpl = {
                 );
               }
             }
+
             if (state.isPressWithinResponderRegion && button !== 1) {
               dispatchEvent(
                 event,

packages/react-events/src/dom/__tests__/Focus-test.internal.js

@@ -15,8 +15,8 @@ import {
   keydown,
   setPointerEvent,
   platform,
-  dispatchPointerPressDown,
-  dispatchPointerPressRelease,
+  dispatchPointerDown,
+  dispatchPointerUp,
 } from '../test-utils';
 
 let React;
@@ -138,8 +138,8 @@ describe.each(table)('Focus responder', hasPointerEvents => {
 
     it('is called with the correct pointerType: mouse', () => {
       const target = ref.current;
-      dispatchPointerPressDown(target, {pointerType: 'mouse'});
-      dispatchPointerPressRelease(target, {pointerType: 'mouse'});
+      dispatchPointerDown(target, {pointerType: 'mouse'});
+      dispatchPointerUp(target, {pointerType: 'mouse'});
       expect(onFocus).toHaveBeenCalledTimes(1);
       expect(onFocus).toHaveBeenCalledWith(
         expect.objectContaining({pointerType: 'mouse'}),
@@ -148,8 +148,8 @@ describe.each(table)('Focus responder', hasPointerEvents => {
 
     it('is called with the correct pointerType: touch', () => {
       const target = ref.current;
-      dispatchPointerPressDown(target, {pointerType: 'touch'});
-      dispatchPointerPressRelease(target, {pointerType: 'touch'});
+      dispatchPointerDown(target, {pointerType: 'touch'});
+      dispatchPointerUp(target, {pointerType: 'touch'});
       expect(onFocus).toHaveBeenCalledTimes(1);
       expect(onFocus).toHaveBeenCalledWith(
         expect.objectContaining({pointerType: 'touch'}),
@@ -159,8 +159,8 @@ describe.each(table)('Focus responder', hasPointerEvents => {
     if (hasPointerEvents) {
       it('is called with the correct pointerType: pen', () => {
         const target = ref.current;
-        dispatchPointerPressDown(target, {pointerType: 'pen'});
-        dispatchPointerPressRelease(target, {pointerType: 'pen'});
+        dispatchPointerDown(target, {pointerType: 'pen'});
+        dispatchPointerUp(target, {pointerType: 'pen'});
         expect(onFocus).toHaveBeenCalledTimes(1);
         expect(onFocus).toHaveBeenCalledWith(
           expect.objectContaining({pointerType: 'pen'}),
@@ -278,7 +278,7 @@ describe.each(table)('Focus responder', hasPointerEvents => {
       expect(onFocusVisibleChange).toHaveBeenCalledTimes(1);
       expect(onFocusVisibleChange).toHaveBeenCalledWith(true);
       // then use pointer on the target, focus should no longer be visible
-      dispatchPointerPressDown(target);
+      dispatchPointerDown(target);
       expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);
       expect(onFocusVisibleChange).toHaveBeenCalledWith(false);
       // onFocusVisibleChange should not be called again
@@ -288,9 +288,9 @@ describe.each(table)('Focus responder', hasPointerEvents => {
 
     it('is not called after "focus" and "blur" events without keyboard', () => {
       const target = ref.current;
-      dispatchPointerPressDown(target);
-      dispatchPointerPressRelease(target);
-      dispatchPointerPressDown(container);
+      dispatchPointerDown(target);
+      dispatchPointerUp(target);
+      dispatchPointerDown(container);
       target.dispatchEvent(blur({relatedTarget: container}));
       expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);
     });

packages/react-events/src/dom/__tests__/FocusWithin-test.internal.js

@@ -14,8 +14,8 @@ import {
   focus,
   keydown,
   setPointerEvent,
-  dispatchPointerPressDown,
-  dispatchPointerPressRelease,
+  dispatchPointerDown,
+  dispatchPointerUp,
 } from '../test-utils';
 
 let React;
@@ -203,7 +203,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
       expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
       expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
       // then use pointer on the next target, focus should no longer be visible
-      dispatchPointerPressDown(innerTarget2);
+      dispatchPointerDown(innerTarget2);
       innerTarget1.dispatchEvent(blur({relatedTarget: innerTarget2}));
       innerTarget2.dispatchEvent(focus());
       expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
@@ -215,7 +215,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
       expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(3);
       expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
       // then use pointer on the target, focus should no longer be visible
-      dispatchPointerPressDown(innerTarget1);
+      dispatchPointerDown(innerTarget1);
       expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(4);
       expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
       // onFocusVisibleChange should not be called again
@@ -225,8 +225,8 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
 
     it('is not called after "focus" and "blur" events without keyboard', () => {
       const innerTarget = innerRef.current;
-      dispatchPointerPressDown(innerTarget);
-      dispatchPointerPressRelease(innerTarget);
+      dispatchPointerDown(innerTarget);
+      dispatchPointerUp(innerTarget);
       innerTarget.dispatchEvent(blur({relatedTarget: container}));
       expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(0);
     });

packages/react-events/src/dom/__tests__/Hover-test.internal.js

@@ -213,7 +213,8 @@ describe.each(table)('Hover responder', hasPointerEvents => {
 
       const target = ref.current;
       dispatchPointerHoverEnter(target);
-      dispatchPointerHoverMove(target, {from: {x: 0, y: 0}, to: {x: 1, y: 1}});
+      dispatchPointerHoverMove(target, {x: 0, y: 0});
+      dispatchPointerHoverMove(target, {x: 1, y: 1});
       expect(onHoverMove).toHaveBeenCalledTimes(2);
       expect(onHoverMove).toHaveBeenCalledWith(
         expect.objectContaining({type: 'hovermove'}),
@@ -317,10 +318,8 @@ describe.each(table)('Hover responder', hasPointerEvents => {
     const target = ref.current;
 
     dispatchPointerHoverEnter(target, {x: 10, y: 10});
-    dispatchPointerHoverMove(target, {
-      from: {x: 10, y: 10},
-      to: {x: 20, y: 20},
-    });
+    dispatchPointerHoverMove(target, {x: 10, y: 10});
+    dispatchPointerHoverMove(target, {x: 20, y: 20});
     dispatchPointerHoverExit(target, {x: 20, y: 20});
 
     expect(eventLog).toEqual([

packages/react-events/src/dom/test-utils.js

@@ -15,7 +15,7 @@
  * Change environment support for PointerEvent.
  */
 
-function hasPointerEvent(bool) {
+function hasPointerEvent() {
   return global != null && global.PointerEvent != null;
 }
 
@@ -57,23 +57,38 @@ const platform = {
  * Mock native events
  */
 
-function createEvent(type, data) {
+function createEvent(type, data = {}) {
   const event = document.createEvent('CustomEvent');
   event.initCustomEvent(type, true, true);
+  event.clientX = data.x || 0;
+  event.clientY = data.y || 0;
+  event.x = data.x || 0;
+  event.y = data.y || 0;
   if (data != null) {
-    Object.entries(data).forEach(([key, value]) => {
-      event[key] = value;
+    Object.keys(data).forEach(key => {
+      const value = data[key];
+      Object.defineProperty(event, key, {value});
     });
   }
   return event;
 }
 
-function createTouchEvent(type, data, id) {
+function createTouchEvent(type, data = {}, id) {
   return createEvent(type, {
     changedTouches: [
       {
-        ...data,
         identifier: id,
+        clientX: data.x || 0,
+        clientY: data.y || 0,
+        ...data,
+      },
+    ],
+    targetTouches: [
+      {
+        identifier: id,
+        clientX: 0 || data.x,
+        clientY: 0 || data.y,
+        ...data,
       },
     ],
   });
@@ -112,17 +127,45 @@ function gotpointercapture(data) {
 }
 
 function keydown(data) {
-  return createKeyboardEvent('keydown', data);
+  return createEvent('keydown', data);
 }
 
 function keyup(data) {
-  return createKeyboardEvent('keyup', data);
+  return createEvent('keyup', data);
 }
 
 function lostpointercapture(data) {
   return createEvent('lostpointercapture', data);
 }
 
+function mousedown(data) {
+  return createEvent('mousedown', data);
+}
+
+function mouseenter(data) {
+  return createEvent('mouseenter', data);
+}
+
+function mouseleave(data) {
+  return createEvent('mouseleave', data);
+}
+
+function mousemove(data) {
+  return createEvent('mousemove', data);
+}
+
+function mouseout(data) {
+  return createEvent('mouseout', data);
+}
+
+function mouseover(data) {
+  return createEvent('mouseover', data);
+}
+
+function mouseup(data) {
+  return createEvent('mouseup', data);
+}
+
 function pointercancel(data) {
   return createEvent('pointercancel', data);
 }
@@ -155,32 +198,8 @@ function pointerup(data) {
   return createEvent('pointerup', data);
 }
 
-function mousedown(data) {
-  return createEvent('mousedown', data);
-}
-
-function mouseenter(data) {
-  return createEvent('mouseenter', data);
-}
-
-function mouseleave(data) {
-  return createEvent('mouseleave', data);
-}
-
-function mousemove(data) {
-  return createEvent('mousemove', data);
-}
-
-function mouseout(data) {
-  return createEvent('mouseout', data);
-}
-
-function mouseover(data) {
-  return createEvent('mouseover', data);
-}
-
-function mouseup(data) {
-  return createEvent('mouseup', data);
+function scroll(data) {
+  return createEvent('scroll', data);
 }
 
 function touchcancel(data, id) {
@@ -264,15 +283,15 @@ function dispatchPointerHoverEnter(target, {relatedTarget, x, y} = {}) {
     dispatch(pointerenter({pointerType, ...event}));
   }
   dispatch(mouseover(event));
-  dispatch(mouseover(event));
+  dispatch(mouseenter(event));
 }
 
-function dispatchPointerHoverMove(target, {from, to} = {}) {
+function dispatchPointerHoverMove(target, {x, y} = {}) {
   const dispatch = arg => target.dispatchEvent(arg);
   const button = -1;
   const pointerId = 1;
   const pointerType = 'mouse';
-  function dispatchMove({x, y}) {
+  function dispatchMove() {
     const event = {
       button,
       clientX: x,
@@ -285,8 +304,7 @@ function dispatchPointerHoverMove(target, {from, to} = {}) {
     }
     dispatch(mousemove(event));
   }
-  dispatchMove({x: from.x, y: from.y});
-  dispatchMove({x: to.x, y: to.y});
+  dispatchMove();
 }
 
 function dispatchPointerHoverExit(target, {relatedTarget, x, y} = {}) {
@@ -309,77 +327,135 @@ function dispatchPointerHoverExit(target, {relatedTarget, x, y} = {}) {
   dispatch(mouseleave(event));
 }
 
-function dispatchPointerCancel(target, options) {
+function dispatchPointerCancel(target, {pointerType = 'mouse', ...rest} = {}) {
   const dispatchEvent = arg => target.dispatchEvent(arg);
-  dispatchEvent(pointercancel({pointerType: 'mouse'}));
-  dispatchEvent(dragstart({pointerType: 'mouse'}));
-}
-
-function dispatchPointerPressDown(
-  target,
-  {button = 0, pointerType = 'mouse'} = {},
-) {
-  const dispatch = arg => target.dispatchEvent(arg);
-  const pointerId = 1;
-  if (pointerType !== 'mouse') {
-    if (hasPointerEvent()) {
-      dispatch(pointerover({button, pointerId, pointerType}));
-      dispatch(pointerenter({button, pointerId, pointerType}));
-      dispatch(pointerdown({button, pointerId, pointerType}));
-    }
-    dispatch(touchstart(null, pointerId));
-    if (hasPointerEvent()) {
-      dispatch(gotpointercapture({button, pointerId, pointerType}));
-    }
+  if (hasPointerEvent()) {
+    dispatchEvent(pointercancel({pointerType, ...rest}));
   } else {
-    if (hasPointerEvent()) {
-      dispatch(pointerdown({button, pointerId, pointerType}));
-    }
-    dispatch(mousedown({button}));
-    if (document.activeElement !== target) {
-      dispatch(focus({button}));
+    if (pointerType === 'mouse') {
+      dispatchEvent(dragstart({...rest}));
+    } else {
+      dispatchEvent(touchcancel({...rest}));
     }
   }
 }
 
-function dispatchPointerPressRelease(
+function dispatchPointerDown(
   target,
-  {button = 0, pointerType = 'mouse'} = {},
+  {button = 0, pointerType = 'mouse', ...rest} = {},
 ) {
   const dispatch = arg => target.dispatchEvent(arg);
   const pointerId = 1;
-  if (pointerType !== 'mouse') {
+  const pointerEvent = {button, pointerId, pointerType, ...rest};
+  const mouseEvent = {button, ...rest};
+  const touch = {...rest};
+
+  if (pointerType === 'mouse') {
     if (hasPointerEvent()) {
-      dispatch(pointerup({button, pointerId, pointerType}));
-      dispatch(lostpointercapture({button, pointerId, pointerType}));
-      dispatch(pointerout({button, pointerId, pointerType}));
-      dispatch(pointerleave({button, pointerId, pointerType}));
+      dispatch(pointerover(pointerEvent));
+      dispatch(pointerenter(pointerEvent));
     }
-    dispatch(touchend(null, pointerId));
-    dispatch(mouseover({button}));
-    dispatch(mousemove({button}));
-    dispatch(mousedown({button}));
+    dispatch(mouseover(mouseEvent));
+    dispatch(mouseenter(mouseEvent));
+    if (hasPointerEvent()) {
+      dispatch(pointerdown(pointerEvent));
+    }
+    dispatch(mousedown(mouseEvent));
     if (document.activeElement !== target) {
-      dispatch(focus({button}));
+      dispatch(focus());
     }
-    dispatch(mouseup({button}));
-    dispatch(click({button}));
   } else {
     if (hasPointerEvent()) {
-      dispatch(pointerup({button, pointerId, pointerType}));
+      dispatch(pointerover(pointerEvent));
+      dispatch(pointerenter(pointerEvent));
+      dispatch(pointerdown(pointerEvent));
     }
-    dispatch(mouseup({button}));
-    dispatch(click({button}));
+    dispatch(touchstart(touch, pointerId));
+    if (hasPointerEvent()) {
+      dispatch(gotpointercapture(pointerEvent));
+    }
+  }
+}
+
+function dispatchPointerUp(
+  target,
+  {button = 0, pointerType = 'mouse', ...rest} = {},
+) {
+  const dispatch = arg => target.dispatchEvent(arg);
+  const pointerId = 1;
+  const pointerEvent = {button, pointerId, pointerType, ...rest};
+  const mouseEvent = {button, ...rest};
+  const touch = {...rest};
+
+  if (pointerType === 'mouse') {
+    if (hasPointerEvent()) {
+      dispatch(pointerup(pointerEvent));
+    }
+    dispatch(mouseup(mouseEvent));
+    dispatch(click(mouseEvent));
+  } else {
+    if (hasPointerEvent()) {
+      dispatch(pointerup(pointerEvent));
+      dispatch(lostpointercapture(pointerEvent));
+      dispatch(pointerout(pointerEvent));
+      dispatch(pointerleave(pointerEvent));
+    }
+    dispatch(touchend(touch, pointerId));
+    dispatch(mouseover(mouseEvent));
+    dispatch(mousemove(mouseEvent));
+    dispatch(mousedown(mouseEvent));
+    if (document.activeElement !== target) {
+      dispatch(focus());
+    }
+    dispatch(mouseup(mouseEvent));
+    dispatch(click(mouseEvent));
+  }
+}
+
+function dispatchPointerMove(
+  target,
+  {button = 0, pointerType = 'mouse', ...rest} = {},
+) {
+  const dispatch = arg => target.dispatchEvent(arg);
+  const pointerId = 1;
+  const pointerEvent = {
+    button,
+    pointerId,
+    pointerType,
+    ...rest,
+  };
+  const mouseEvent = {
+    button,
+    ...rest,
+  };
+  const touch = {
+    ...rest,
+  };
+
+  if (hasPointerEvent()) {
+    dispatch(pointermove(pointerEvent));
+  }
+  if (pointerType === 'mouse') {
+    dispatch(mousemove(mouseEvent));
+  }
+  if (pointerType === 'touch') {
+    dispatch(touchmove(touch, pointerId));
   }
 }
 
 function dispatchTouchTap(target) {
-  dispatchPointerPressDown(target, {pointerType: 'touch'});
-  dispatchPointerPressRelease(target, {pointerType: 'touch'});
+  dispatchPointerDown(target, {pointerType: 'touch'});
+  dispatchPointerUp(target, {pointerType: 'touch'});
+}
+
+function dispatchMouseTap(target) {
+  dispatchPointerDown(target, {pointerType: 'mouse'});
+  dispatchPointerUp(target, {pointerType: 'mouse'});
 }
 
 module.exports = {
   blur,
+  click,
   focus,
   createEvent,
   dispatchLongPressContextMenu,
@@ -389,11 +465,16 @@ module.exports = {
   dispatchPointerHoverEnter,
   dispatchPointerHoverExit,
   dispatchPointerHoverMove,
-  dispatchPointerPressDown,
-  dispatchPointerPressRelease,
+  dispatchPointerMove,
+  dispatchPointerDown,
+  dispatchPointerUp,
   dispatchTouchTap,
+  dispatchMouseTap,
   keydown,
   keyup,
+  scroll,
+  pointerdown,
+  pointerup,
   platform,
   hasPointerEvent,
   setPointerEvent,