Add pointerMove between platform test

Summary:
Changelog: [RNTester][Internal] - Add "PointerMove Between" platform test

This diff adds another port of a web platform test which verifies the event order when a hoverable pointer moves between elements.

Reviewed By: lunaleaps

Differential Revision: D40164303

fbshipit-source-id: 12f39dfcf7a1a4acabfd762185bc2227451b1057

Author: vincentriemer

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

@@ -0,0 +1,135 @@
+/**
+ * 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 RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
+import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder';
+import * as React from 'react';
+import {useCallback, useState} from 'react';
+import {View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  a: {
+    width: 200,
+    height: 120,
+    backgroundColor: 'blue',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  b: {
+    height: 60,
+    width: 100,
+    backgroundColor: 'green',
+  },
+  c: {
+    height: 120,
+    width: 200,
+    backgroundColor: 'yellow',
+  },
+});
+
+const relevantEvents = [
+  'pointerMove',
+  'pointerOver',
+  'pointerEnter',
+  'pointerOut',
+  'pointerLeave',
+];
+
+const expected = [
+  {type: 'pointerOver', target: 'a'},
+  {type: 'pointerEnter', target: 'a'},
+  {type: 'pointerMove', target: 'a', optional: true},
+  {type: 'pointerOut', target: 'a'},
+  {type: 'pointerOver', target: 'b'},
+  {type: 'pointerEnter', target: 'b'},
+  {type: 'pointerMove', target: 'b', optional: true},
+  {type: 'pointerOut', target: 'b'},
+  {type: 'pointerLeave', target: 'b'},
+  {type: 'pointerOver', target: 'a'},
+  {type: 'pointerMove', target: 'a', optional: true},
+  {type: 'pointerOut', target: 'a'},
+  {type: 'pointerLeave', target: 'a'},
+  {type: 'pointerOver', target: 'c'},
+  {type: 'pointerEnter', target: 'c'},
+  {type: 'pointerMove', target: 'c', optional: true},
+  {type: 'pointerOut', target: 'c'},
+  {type: 'pointerLeave', target: 'c'},
+];
+
+const targetNames = ['a', 'b', 'c'];
+
+// adapted from https://github.com/web-platform-tests/wpt/blob/master/uievents/order-of-events/mouse-events/mousemove-between.html
+function PointerEventPointerMoveBetweenTestCase(
+  props: PlatformTestComponentBaseProps,
+) {
+  const {harness} = props;
+
+  const pointermove_between = harness.useAsyncTest(
+    'Pointermove events between elements should fire in the correct order.',
+  );
+
+  const [eventRecorder] = useState(
+    () =>
+      new RNTesterPlatformTestEventRecorder({
+        mergeEventTypes: ['pointerMove'],
+        relevantEvents,
+      }),
+  );
+
+  const eventHandler = useCallback(
+    (event: PointerEvent, eventType: string, eventTarget: string) => {
+      event.stopPropagation();
+      if (eventTarget === 'c' && eventType === 'pointerLeave') {
+        pointermove_between.step(({assert_true}) => {
+          assert_true(
+            eventRecorder.checkRecords(expected),
+            'Expected events to occur in the correct order',
+          );
+        });
+        pointermove_between.done();
+      }
+    },
+    [eventRecorder, pointermove_between],
+  );
+
+  const eventProps = eventRecorder.useRecorderTestEventHandlers(
+    targetNames,
+    eventHandler,
+  );
+
+  return (
+    <>
+      <View {...eventProps.a} style={styles.a}>
+        <View {...eventProps.b} style={styles.b} />
+      </View>
+      <View {...eventProps.c} style={styles.c} />
+    </>
+  );
+}
+
+type Props = $ReadOnly<{}>;
+export default function PointerEventPointerMoveBetween(
+  props: Props,
+): React.MixedElement {
+  return (
+    <RNTesterPlatformTest
+      component={PointerEventPointerMoveBetweenTestCase}
+      description=""
+      instructions={[
+        'Move your cursor over the blue element, later over the green one, later back to the blue one.',
+        'Move the mosue from the blue element to the yellow one, later to the white background.',
+      ]}
+      title="Pointermove handling between elements"
+    />
+  );
+}

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

@@ -20,6 +20,7 @@ import PointerEventAttributesNoHoverPointers from './W3CPointerEventPlatformTest
 import PointerEventPointerMoveOnChordedMouseButton from './W3CPointerEventPlatformTests/PointerEventPointerMoveOnChordedMouseButton';
 import PointerEventPointerMoveAcross from './W3CPointerEventPlatformTests/PointerEventPointerMoveAcross';
 import PointerEventPointerMoveEventOrder from './W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder';
+import PointerEventPointerMoveBetween from './W3CPointerEventPlatformTests/PointerEventPointerMoveBetween';
 import EventfulView from './W3CPointerEventsEventfulView';
 
 function AbsoluteChildExample({log}: {log: string => void}) {
@@ -212,6 +213,14 @@ export default {
         return <PointerEventPointerMoveAcross />;
       },
     },
+    {
+      name: 'pointerevent_pointermove_between',
+      description: '',
+      title: 'Pointermove handling between elements',
+      render(): React.Node {
+        return <PointerEventPointerMoveBetween />;
+      },
+    },
     {
       name: 'pointerevent_pointermove_event_order',
       description: '',