Add pointer event pointer move event order test

Summary:
Changelog: [Internal] - Add pointer event pointer move event order test

This diff adds a port of the [mouse event mouse move event order test](https://github.com/web-platform-tests/wpt/blob/master/uievents/order-of-events/mouse-events/mouseevents-mousemove.html) but instead used here for testing our pointer event implementation.

Reviewed By: lunaleaps

Differential Revision: D40041387

fbshipit-source-id: 491659405865e1a0d95cfd1b3227a48a6136a98b

packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js

@@ -136,6 +136,10 @@ class RNTesterPlatformTestEventRecorder {
     }, [callback, targetNames]);
   }
 
+  getRecords(): Array<EventRecord> {
+    return this.allRecords;
+  }
+
   checkRecords(
     expected: Array<{
       type: string,

packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js

@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
+import type {PointerEvent} from 'react-native/Libraries/Types/CoreEventTypes';
+
+import * as React from 'react';
+import {useCallback, useState} from 'react';
+import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
+import {StyleSheet, View} from 'react-native';
+import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder';
+
+const styles = StyleSheet.create({
+  end: {
+    backgroundColor: 'red',
+    position: 'absolute',
+    right: '15%',
+    bottom: '15%',
+    width: '50%',
+    height: '50%',
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+  green: {
+    backgroundColor: 'green',
+  },
+  start: {
+    backgroundColor: 'red',
+    position: 'absolute',
+    left: '15%',
+    top: '15%',
+    width: '50%',
+    height: '50%',
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+  testarea: {
+    width: '80%',
+    height: 250,
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+});
+
+// adapted from https://github.com/web-platform-tests/wpt/blob/master/uievents/order-of-events/mouse-events/mouseevents-mousemove.htm
+function PointerEventPointerMoveEventOrderTestCase(
+  props: PlatformTestComponentBaseProps,
+) {
+  const {harness} = props;
+  const pointer_test = harness.useAsyncTest('Pointermove events');
+
+  const [eventRecorder] = useState(
+    () =>
+      new RNTesterPlatformTestEventRecorder({
+        mergeEventTypes: ['pointerMove'],
+        relevantEvents: ['pointerMove'],
+      }),
+  );
+
+  const [startMoved, setStartMoved] = useState(false);
+  const [endMoved, setEndMoved] = useState(false);
+
+  const eventHandler = useCallback(
+    (event: PointerEvent, eventType: string, eventTarget: string) => {
+      event.stopPropagation();
+      if (
+        !startMoved &&
+        eventType === 'pointerMove' &&
+        eventTarget === 'start'
+      ) {
+        setStartMoved(true);
+      }
+      if (!endMoved && eventType === 'pointerMove' && eventTarget === 'end') {
+        setEndMoved(true);
+        const results = eventRecorder.getRecords();
+        pointer_test.step(({assert_equals}) => {
+          assert_equals(results.length, 2, 'Two pointermove events');
+          if (results.length === 2) {
+            assert_equals(
+              results[0].type,
+              'pointerMove',
+              'First event is a pointermove event',
+            );
+            assert_equals(
+              results[1].type,
+              'pointerMove',
+              'Second event is a pointermove event',
+            );
+            assert_equals(
+              results[0].target,
+              'start',
+              'First event targeted #start',
+            );
+            assert_equals(
+              results[1].target,
+              'end',
+              'Second event targeted #end',
+            );
+          }
+        });
+        pointer_test.done();
+      }
+    },
+    [endMoved, eventRecorder, pointer_test, startMoved],
+  );
+
+  const eventProps = eventRecorder.useRecorderTestEventHandlers(
+    ['start', 'end'],
+    eventHandler,
+  );
+
+  return (
+    <View style={styles.testarea}>
+      <View
+        {...eventProps.start}
+        style={[styles.start, startMoved && styles.green]}
+      />
+      <View
+        {...eventProps.end}
+        style={[styles.end, endMoved && styles.green]}
+      />
+    </View>
+  );
+}
+
+type Props = $ReadOnly<{}>;
+export default function PointerEventPointerMoveEventOrder(
+  props: Props,
+): React.MixedElement {
+  return (
+    <RNTesterPlatformTest
+      component={PointerEventPointerMoveEventOrderTestCase}
+      instructions={[
+        'Move the pointer to the upper-left red box and then move it directly toward and into the lower-right red box.',
+      ]}
+      description="Verifies that pointermove events track the pointer position and transition from top-most visible element to top-most visible element, changing targets along the way."
+      title="PointerEvent - pointermove event order"
+    />
+  );
+}

packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js

@@ -19,6 +19,7 @@ import PointerEventPrimaryTouchPointer from './W3CPointerEventPlatformTests/Poin
 import PointerEventAttributesNoHoverPointers from './W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers';
 import PointerEventPointerMoveOnChordedMouseButton from './W3CPointerEventPlatformTests/PointerEventPointerMoveOnChordedMouseButton';
 import PointerEventPointerMoveAcross from './W3CPointerEventPlatformTests/PointerEventPointerMoveAcross';
+import PointerEventPointerMoveEventOrder from './W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder';
 import EventfulView from './W3CPointerEventsEventfulView';
 
 function AbsoluteChildExample({log}: {log: string => void}) {
@@ -211,6 +212,14 @@ export default {
         return <PointerEventPointerMoveAcross />;
       },
     },
+    {
+      name: 'pointerevent_pointermove_event_order',
+      description: '',
+      title: 'PointerEvent - pointermove event order',
+      render(): React.Node {
+        return <PointerEventPointerMoveEventOrder />;
+      },
+    },
     CompatibilityAnimatedPointerMove,
     CompatibilityNativeGestureHandling,
   ],