fix: expose common base synthetic event methods (#1589)

* fix: add stup base synthetic event methods

* chore: update snapshots

* refactor: self code review

* refactor: improvements

* chore: add test

Author: mdjastrzebski

src/user-event/__tests__/__snapshots__/clear.test.tsx.snap

@@ -0,0 +1,17 @@
+import { BaseSyntheticEvent } from 'react';
+
+/** Builds base syntentic event stub, with prop values as inspected in RN runtime. */
+export function baseSyntheticEvent(): Partial<BaseSyntheticEvent<{}, unknown, unknown>> {
+  return {
+    currentTarget: {},
+    target: {},
+    preventDefault: () => {},
+    isDefaultPrevented: () => false,
+    stopPropagation: () => {},
+    isPropagationStopped: () => false,
+    persist: () => {},
+    // @ts-expect-error: `isPersistent` is not a standard prop, but it's used in RN runtime. See: https://react.dev/reference/react-dom/components/common#react-event-object-methods
+    isPersistent: () => false,
+    timeStamp: 0,
+  };
+}

src/user-event/event-builder/base.ts

@@ -1,10 +1,13 @@
+import { baseSyntheticEvent } from './base';
+
 /**
  * Experimental values:
  * - iOS: `{"changedTouches": [[Circular]], "identifier": 1, "locationX": 253, "locationY": 30.333328247070312, "pageX": 273, "pageY": 141.3333282470703, "target": 75, "timestamp": 875928682.0450834, "touches": [[Circular]]}`
  * - Android: `{"changedTouches": [[Circular]], "identifier": 0, "locationX": 160, "locationY": 40.3636360168457, "pageX": 180, "pageY": 140.36363220214844, "target": 53, "targetSurface": -1, "timestamp": 10290805, "touches": [[Circular]]}`
  */
 function touch() {
   return {
+    ...baseSyntheticEvent(),
     nativeEvent: {
       changedTouches: [],
       identifier: 0,
@@ -16,9 +19,7 @@ function touch() {
       timestamp: Date.now(),
       touches: [],
     },
-    persist: () => {},
     currentTarget: { measure: () => {} },
-    target: {},
   };
 }
 
@@ -46,11 +47,10 @@ export const CommonEventBuilder = {
    */
   focus: () => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: {
         target: 0,
       },
-      currentTarget: {},
-      target: {},
     };
   },
 
@@ -61,11 +61,10 @@ export const CommonEventBuilder = {
    */
   blur: () => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: {
         target: 0,
       },
-      currentTarget: {},
-      target: {},
     };
   },
 };

src/user-event/event-builder/common.ts

@@ -1,3 +1,5 @@
+import { baseSyntheticEvent } from './base';
+
 /**
  * Scroll position of a scrollable element.
  */
@@ -28,6 +30,7 @@ export type ScrollEventOptions = {
 export const ScrollViewEventBuilder = {
   scroll: (offset: ContentOffset = { y: 0, x: 0 }, options?: ScrollEventOptions) => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: {
         contentInset: { bottom: 0, left: 0, right: 0, top: 0 },
         contentOffset: { y: offset.y, x: offset.x },
@@ -43,8 +46,6 @@ export const ScrollViewEventBuilder = {
         target: 0,
         velocity: { y: 0, x: 0 },
       },
-      currentTarget: {},
-      target: {},
     };
   },
 };

src/user-event/event-builder/scroll-view.ts

@@ -1,5 +1,6 @@
 import { ContentSize } from '../utils/content-size';
 import { TextRange } from '../utils/text-range';
+import { baseSyntheticEvent } from './base';
 
 export const TextInputEventBuilder = {
   /**
@@ -9,9 +10,8 @@ export const TextInputEventBuilder = {
    */
   change: (text: string) => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: { text, target: 0, eventCount: 0 },
-      currentTarget: {},
-      target: {},
     };
   },
 
@@ -22,9 +22,8 @@ export const TextInputEventBuilder = {
    */
   keyPress: (key: string) => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: { key },
-      currentTarget: {},
-      target: {},
     };
   },
 
@@ -35,9 +34,8 @@ export const TextInputEventBuilder = {
    */
   submitEditing: (text: string) => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: { text, target: 0 },
-      currentTarget: {},
-      target: {},
     };
   },
 
@@ -48,9 +46,8 @@ export const TextInputEventBuilder = {
    */
   endEditing: (text: string) => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: { text, target: 0 },
-      currentTarget: {},
-      target: {},
     };
   },
 
@@ -61,9 +58,8 @@ export const TextInputEventBuilder = {
    */
   selectionChange: ({ start, end }: TextRange) => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: { selection: { start, end } },
-      currentTarget: {},
-      target: {},
     };
   },
 
@@ -74,14 +70,13 @@ export const TextInputEventBuilder = {
    */
   textInput: (text: string, previousText: string) => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: {
         text,
         previousText,
         range: { start: text.length, end: text.length },
         target: 0,
       },
-      currentTarget: {},
-      target: {},
     };
   },
 
@@ -92,9 +87,8 @@ export const TextInputEventBuilder = {
    */
   contentSizeChange: ({ width, height }: ContentSize) => {
     return {
+      ...baseSyntheticEvent(),
       nativeEvent: { contentSize: { width, height }, target: 0 },
-      currentTarget: {},
-      target: {},
     };
   },
 };

src/user-event/event-builder/text-input.ts

@@ -11,6 +11,9 @@ exports[`userEvent.longPress with fake timers calls onLongPress if the delayLong
       "dispatchConfig": {
         "registrationName": "onResponderGrant",
       },
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
       "nativeEvent": {
         "changedTouches": [],
         "identifier": 0,
@@ -23,7 +26,10 @@ exports[`userEvent.longPress with fake timers calls onLongPress if the delayLong
         "touches": [],
       },
       "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
       "target": {},
+      "timeStamp": 0,
     },
   },
 ]

src/user-event/press/__tests__/__snapshots__/longPress.test.tsx.snap

@@ -11,6 +11,9 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
       "dispatchConfig": {
         "registrationName": "onResponderGrant",
       },
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
       "nativeEvent": {
         "changedTouches": [],
         "identifier": 0,
@@ -23,7 +26,10 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
         "touches": [],
       },
       "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
       "target": {},
+      "timeStamp": 0,
     },
   },
   {
@@ -35,6 +41,9 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
       "dispatchConfig": {
         "registrationName": "onResponderRelease",
       },
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
       "nativeEvent": {
         "changedTouches": [],
         "identifier": 0,
@@ -47,7 +56,10 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
         "touches": [],
       },
       "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
       "target": {},
+      "timeStamp": 0,
     },
   },
   {
@@ -59,6 +71,9 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
       "dispatchConfig": {
         "registrationName": "onResponderRelease",
       },
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
       "nativeEvent": {
         "changedTouches": [],
         "identifier": 0,
@@ -71,7 +86,10 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
         "touches": [],
       },
       "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
       "target": {},
+      "timeStamp": 0,
     },
   },
 ]

src/user-event/press/__tests__/__snapshots__/press.test.tsx.snap

@@ -6,6 +6,9 @@ exports[`scrollTo() with FlatList supports vertical drag scroll: scrollTo({ y: 1
     "name": "scrollBeginDrag",
     "payload": {
       "currentTarget": {},
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
       "nativeEvent": {
         "contentInset": {
           "bottom": 0,
@@ -32,13 +35,20 @@ exports[`scrollTo() with FlatList supports vertical drag scroll: scrollTo({ y: 1
           "y": 0,
         },
       },
+      "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
       "target": {},
+      "timeStamp": 0,
     },
   },
   {
     "name": "scroll",
     "payload": {
       "currentTarget": {},
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
       "nativeEvent": {
         "contentInset": {
           "bottom": 0,
@@ -65,13 +75,20 @@ exports[`scrollTo() with FlatList supports vertical drag scroll: scrollTo({ y: 1
           "y": 0,
         },
       },
+      "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
       "target": {},
+      "timeStamp": 0,
     },
   },
   {
     "name": "scroll",
     "payload": {
       "currentTarget": {},
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
       "nativeEvent": {
         "contentInset": {
           "bottom": 0,
@@ -98,13 +115,20 @@ exports[`scrollTo() with FlatList supports vertical drag scroll: scrollTo({ y: 1
           "y": 0,
         },
       },
+      "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
       "target": {},
+      "timeStamp": 0,
     },
   },
   {
     "name": "scroll",
     "payload": {
       "currentTarget": {},
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
       "nativeEvent": {
         "contentInset": {
           "bottom": 0,
@@ -131,13 +155,20 @@ exports[`scrollTo() with FlatList supports vertical drag scroll: scrollTo({ y: 1
           "y": 0,
         },
       },
+      "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
       "target": {},
+      "timeStamp": 0,
     },
   },
   {
     "name": "scrollEndDrag",
     "payload": {
       "currentTarget": {},
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
       "nativeEvent": {
         "contentInset": {
           "bottom": 0,
@@ -164,7 +195,11 @@ exports[`scrollTo() with FlatList supports vertical drag scroll: scrollTo({ y: 1
           "y": 0,
         },
       },
+      "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
       "target": {},
+      "timeStamp": 0,
     },
   },
 ]