software-mansion · piaskowyk · Dec 15, 2021 · Dec 15, 2021 · Dec 15, 2021 · Dec 15, 2021
diff --git a/__tests__/Events.test.js b/__tests__/Events.test.js
@@ -0,0 +1,219 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Text, View } from 'react-native';
+import {
+  GestureHandlerRootView,
+  TapGestureHandler,
+  PanGestureHandler,
+  LongPressGestureHandler,
+  FlingGestureHandler,
+  RotationGestureHandler,
+  PinchGestureHandler,
+  Gesture,
+  GestureDetector
+} from 'react-native-gesture-handler';
+import { 
+  fireTapGestureHandler,
+  firePanGestureHandler,
+  fireLongPressGestureHandler,
+  fireRotationGestureHandler,
+  fireFlingGestureHandler,
+  firePinchGestureHandler,
+  ghTagEventMacro
+} from '../src/jestUtils'
+import { useAnimatedGestureHandler } from 'react-native-reanimated';
+
+const mockEventFunctions = () => {
+  return {
+    begin: jest.fn(), 
+    progress: jest.fn(), 
+    end: jest.fn(),
+    fail: jest.fn(),
+    cancel: jest.fn(),
+    finish: jest.fn()
+  };
+}
+
+const assertEventCalls = (eventFunctions, counts) => {
+  expect(eventFunctions.begin).toHaveBeenCalledTimes(
+    counts?.begin ? counts.begin : 1
+  );
+  expect(eventFunctions.progress).toHaveBeenCalledTimes(
+    counts?.progress ? counts.progress : 1
+  );
+  expect(eventFunctions.end).toHaveBeenCalledTimes(
+    counts?.end ? counts.end : 1
+  );
+}
+
+const App = (props) => {
+  const eventHandler = useAnimatedGestureHandler({
+    onStart: () => props.eventFunctions.begin(),
+    onActive: () => props.eventFunctions.progress(),
+    onEnd: () => props.eventFunctions.end()
+  });
+
+  return (
+    <GestureHandlerRootView>
+      <TapGestureHandler onHandlerStateChange={eventHandler}>
+        <Text {...ghTagEventMacro()}>TapGestureHandlerTest</Text>
+      </TapGestureHandler>
+
+      <PanGestureHandler onHandlerStateChange={eventHandler} onGestureEvent={eventHandler}>
+        <Text {...ghTagEventMacro()}>PanGestureHandlerTest</Text>
+      </PanGestureHandler>
+
+      <LongPressGestureHandler onHandlerStateChange={eventHandler}>
+        <Text {...ghTagEventMacro()}>LongPressGestureHandlerTest</Text>
+      </LongPressGestureHandler>
+
+      <RotationGestureHandler onHandlerStateChange={eventHandler}>
+        <Text {...ghTagEventMacro()}>RotationGestureHandlerTest</Text>
+      </RotationGestureHandler>
+
+      <FlingGestureHandler onHandlerStateChange={eventHandler}>
+        <Text {...ghTagEventMacro()}>FlingGestureHandlerTest</Text>
+      </FlingGestureHandler>
+
+      <PinchGestureHandler onHandlerStateChange={eventHandler}>
+        <Text {...ghTagEventMacro()}>PinchGestureHandlerTest</Text>
+      </PinchGestureHandler>
+
+      <PanGestureHandler onHandlerStateChange={eventHandler}>
+        <View>
+          <Text {...ghTagEventMacro()}>NestedGestureHandlerTest1</Text>
+          <TapGestureHandler onHandlerStateChange={eventHandler}>
+            <Text {...ghTagEventMacro()}>NestedGestureHandlerTest2</Text>
+          </TapGestureHandler>
+        </View>
+      </PanGestureHandler>
+
+    </GestureHandlerRootView>
+  );
+};
+
+test('test fireTapGestureHandler', () => {
+  const eventFunctions = mockEventFunctions();
+  const { getByText } = render(<App eventFunctions={eventFunctions} />);
+  fireTapGestureHandler(getByText('TapGestureHandlerTest'));
+  assertEventCalls(eventFunctions);
+});
+
+test('test firePanGestureHandler', () => {
+  const eventFunctions = mockEventFunctions();
+  const { getByText } = render(<App eventFunctions={eventFunctions} />);
+  firePanGestureHandler(
+    getByText('PanGestureHandlerTest'),
+    { 
+      configBegin: { x: 1, y: 1 },
+      configProgress: [{ x: 2, y: 2 }, { x: 3, y: 3 }],
+      configEnd: { x: 4, y: 4 }
+    },
+  );
+  assertEventCalls(eventFunctions, { progress: 2 });
+});
+
+test('test fireLongPressGestureHandler', () => {
+  const eventFunctions = mockEventFunctions();
+  const { getByText } = render(<App eventFunctions={eventFunctions} />);
+  fireLongPressGestureHandler(
+    getByText('LongPressGestureHandlerTest'),
+    { configBegin: { x: 1, y: 1 } },
+  );
+  assertEventCalls(eventFunctions);
+});
+
+test('test fireRotationGestureHandler', () => {
+  const eventFunctions = mockEventFunctions();
+  const { getByText } = render(<App eventFunctions={eventFunctions} />);
+  fireRotationGestureHandler(
+    getByText('RotationGestureHandlerTest'),
+    {
+      configBegin: { 
+        rotation: 0,
+        velocity: 0,
+        anchorX: 0,
+        anchorY: 0, 
+      },
+      configProgress: { 
+        rotation: 5,
+        velocity: 5,
+        anchorX: 5,
+        anchorY: 5,
+      },
+      configEnd: { 
+        rotation: 0,
+        velocity: 0,
+        anchorX: 0,
+        anchorY: 0,
+      },
+    }
+  );
+  assertEventCalls(eventFunctions);
+});
+
+test('test fireFlingGestureHandler', () => {
+  const eventFunctions = mockEventFunctions();
+  const { getByText } = render(<App eventFunctions={eventFunctions} />);
+  fireFlingGestureHandler(
+    getByText('FlingGestureHandlerTest'),
+    { configBegin: { x: 1, y: 1 } },
+  );
+  assertEventCalls(eventFunctions);
+});
+
+test('test firePinchGestureHandler', () => {
+  const eventFunctions = mockEventFunctions();
+  const { getByText } = render(<App eventFunctions={eventFunctions} />);
+  firePinchGestureHandler(
+    getByText('PinchGestureHandlerTest'),
+    { configBegin: { x: 1, y: 1 } },
+  );
+  assertEventCalls(eventFunctions);
+});
+
+test('test nestedGestureHandler', () => {
+  const eventFunctions = mockEventFunctions();
+  const { getByText } = render(<App eventFunctions={eventFunctions} />);
+  firePanGestureHandler(getByText('NestedGestureHandlerTest1'));
+  firePanGestureHandler(getByText('NestedGestureHandlerTest2'));
+  fireTapGestureHandler(getByText('NestedGestureHandlerTest2'));
+  assertEventCalls(eventFunctions, { begin: 3, progress: 3, end: 3 });
+});
+
+const AppAPIv2 = props => {
+  const tap = Gesture.Tap()
+    .onBegin(() => {
+      props.eventFunctions.begin()
+    })
+    .onEnd(() => {
+      props.eventFunctions.progress()
+    });
+
+  const pan = Gesture.Pan()
+    .onBegin(() => {
+      props.eventFunctions.begin()
+    })
+    .onEnd(() => {
+      props.eventFunctions.progress()
+    });
+
+  return (
+    <GestureHandlerRootView>
+      <GestureDetector gesture={Gesture.Race(tap, pan)}>
+        <View>
+          <Text {...ghTagEventMacro()}>Text</Text>
+        </View>
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+};
+
+test('test API v2', () => {
+  const eventFunctions = mockEventFunctions();
+  const {getByText} = render(<AppAPIv2 eventFunctions={eventFunctions} />);
+  fireTapGestureHandler(getByText('Text'));
+  firePanGestureHandler(getByText('Text'));
+  expect(eventFunctions.begin).toHaveBeenCalledTimes(2);
+  expect(eventFunctions.progress).toHaveBeenCalledTimes(2);
+});
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    'module:metro-react-native-babel-preset',
+  ],
+};
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  preset: 'react-native',
+  setupFiles: ['./jestSetup.js'],
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  transformIgnorePatterns: [
+    "node_modules/?!(react-native-reanimated)",
+    "node_modules/?!(react-native)"
+  ]
+};
diff --git a/package.json b/package.json
@@ -68,9 +68,11 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
+    "@testing-library/jest-native": "^4.0.4",
+    "@testing-library/react-native": "^9.0.0",
     "@types/hammerjs": "^2.0.38",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^27.0.3",
     "@types/react": "^17.0.0",
     "@types/react-native": "^0.64.2",
     "@types/react-test-renderer": "^17.0.0",
@@ -84,7 +86,7 @@
     "expo": "^35.0.1",
     "flow-bin": "^0.98.0",
     "husky": "^0.14.3",
-    "jest": "^24.7.1",
+    "jest": "^26.6.3",
     "jest-react-native": "16.0.0",
     "lint-staged": "^10.2.11",
     "metro-react-native-babel-preset": "^0.64.0",
@@ -93,9 +95,9 @@
     "react-dom": "^16.12.0",
     "react-native": "^0.64.0",
     "react-native-builder-bob": "^0.17.1",
-    "react-native-reanimated": "^2.0.0",
+    "react-native-reanimated": "^2.3.1",
     "react-native-web": "^0.11.7",
-    "react-test-renderer": "16.8.6",
+    "react-test-renderer": "17.0.2",
     "release-it": "^13.6.5",
     "typescript": "^4.1.2"
   },

diff --git a/src/handlers/createHandler.ts b/src/handlers/createHandler.ts
@@ -21,6 +21,7 @@ import {
   findNodeHandle,
 } from './gestureHandlerCommon';
 import { ValueOf } from '../typeUtils';
+import { decorateChildrenWithTag } from '../jestUtils';
 
 const UIManagerAny = UIManager as any;
 
@@ -162,6 +163,17 @@ export default function createHandler<
         }
         handlerIDToTag[props.id] = this.handlerTag;
       }
+      // @ts-ignore @typescript-eslint/ban-ts-comment
+      if (process.env.JEST_WORKER_ID) {
+        const handlerProperties = {
+          handlerType: name,
+          handlerTag: this.handlerTag,
+          onGestureEvent: props.onGestureEvent,
+          onHandlerStateChange: props.onHandlerStateChange,
+        };
+        // @ts-ignore @typescript-eslint/ban-ts-comment
+        decorateChildrenWithTag({ props }, handlerProperties);
+      }
     }
 
     componentDidMount() {

diff --git a/src/handlers/gestures/GestureDetector.tsx b/src/handlers/gestures/GestureDetector.tsx
@@ -32,6 +32,7 @@ import { tapGestureHandlerProps } from '../TapGestureHandler';
 import { State } from '../../State';
 import { EventType } from '../../EventType';
 import { ComposedGesture } from './gestureComposition';
+import { decorateChildrenWithTag } from '../../jestUtils';
 
 const ALLOWED_PROPS = [
   ...baseGestureHandlerWithMonitorProps,
@@ -416,6 +417,28 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
     );
   }
 
+  // @ts-ignore @typescript-eslint/ban-ts-comment
+  if (process.env.JEST_WORKER_ID) {
+    for (const handler of gesture) {
+      const handlers = handler.handlers;
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const reaGestureHandler = Reanimated.useAnimatedGestureHandler({
+        onStart: handlers.onBegin,
+        onActive: handlers.onUpdate,
+        onEnd: handlers.onEnd,
+        onFinish: handlers.onFinalize,
-        onStart: handlers.onBegin,
-        onActive: handlers.onUpdate,
-        onEnd: handlers.onEnd,
-        onFinish: handlers.onFinalize,
+        // this one passes the context to the onBegin callback, but I think it's fine in tests
+        onStart: handlers.onBegin,
+        onActive: (event, context) => {
+          // useAnimatedGestureHandler passes all events with state === 4 (ACTIVE) to the onActive
+          // callback, event the StateChangeEvent from 2 (BEGAN) to 4. Since the StateChangeEvent
+          // will always be the first in the new state we can just check a flag here.
+          if (context.active) {
+            handlers.onUpdate?.(event);
+          } else {
+            handlers.onStart?.(event);
+            context.active = true;
+          }
+        },
+        onEnd: (event, context) => {
+          // in the new API onEnd, onFail and onCancel callbacks are merged into one, because
+          // - from the user's perspective there is no meaningfull difference between gesture failing
+          //   and being cancelled, so having separate callbacks for it makes no sense
+          // - most of the time you want to clean up after the gesture in all of those callbacks,
+          //   so there is no point in repeating the same logic three times
+          // new onEnd callback receives a bool as the second argument which tells whether the gesture
+          // has finished gracefully or not, and if you really need to know if it failed or was cancelled
+          // you can chech the state property of event
+          handlers.onEnd?.(event, true);
+          context.success = true;
+        },
+        onCancel: (event, context) => {
+          handlers.onEnd?.(event, false);
+          context.success = false;
+        },
+        onFail: (event, context) => {
+          handlers.onEnd?.(event, false);
+          context.success = false;
+        },
+        onFinish: (event, context) => {
+          // onFinalize, like onEnd, requires a flag that tells whether the gesture finished gracefully
+          handlers.onFinalize?.(event, context.success ?? false);
+        },
-        onStart: handlers.onBegin,
-        onActive: handlers.onUpdate,
-        onEnd: handlers.onEnd,
-        onFinish: handlers.onFinalize,
+        // this one passes the context to the onBegin callback, but I think it's fine in tests
+        onStart: handlers.onBegin,
+        onActive: (event, context) => {
+          // useAnimatedGestureHandler passes all events with state === 4 (ACTIVE) to the onActive
+          // callback, event the StateChangeEvent from 2 (BEGAN) to 4. Since the StateChangeEvent
+          // will always be the first in the new state we can just check a flag here.
+          if (context.active) {
+            handlers.onUpdate?.(event);
+          } else {
+            handlers.onStart?.(event);
+            context.active = true;
+          }
+        },
+        onEnd: (event, context) => {
+          // in the new API onEnd, onFail and onCancel callbacks are merged into one, because
+          // - from the user's perspective there is no meaningfull difference between gesture failing
+          //   and being cancelled, so having separate callbacks for it makes no sense
+          // - most of the time you want to clean up after the gesture in all of those callbacks,
+          //   so there is no point in repeating the same logic three times
+          // new onEnd callback receives a bool as the second argument which tells whether the gesture
+          // has finished gracefully or not, and if you really need to know if it failed or was cancelled
+          // you can chech the state property of event
+          handlers.onEnd?.(event, true);
+          context.success = true;
+        },
+        onCancel: (event, context) => {
+          handlers.onEnd?.(event, false);
+          context.success = false;
+        },
+        onFail: (event, context) => {
+          handlers.onEnd?.(event, false);
+          context.success = false;
+        },
+        onFinish: (event, context) => {
+          // onFinalize, like onEnd, requires a flag that tells whether the gesture finished gracefully
+          handlers.onFinalize?.(event, context.success ?? false);
+        },
+      });
+      const handlerProperties = {
+        handlerType: handler.handlerName,
+        handlerTag: handler.handlerTag,
+        onGestureEvent: reaGestureHandler,
+        onHandlerStateChange: reaGestureHandler,
+      };
+      // @ts-ignore @typescript-eslint/ban-ts-comment
+      decorateChildrenWithTag({ props }, handlerProperties);
+    }
+  }
+
   if (preparedGesture.firstExecution) {
     gestureConfig?.initialize?.();
   }

diff --git a/src/handlers/gestures/reanimatedWrapper.ts b/src/handlers/gestures/reanimatedWrapper.ts
@@ -24,6 +24,17 @@ let Reanimated: {
   ) => unknown;
   useSharedValue: <T>(value: T) => SharedValue<T>;
   setGestureState: (handlerTag: number, newState: number) => void;
+  useAnimatedGestureHandler: (
+    handlers: {
+      onStart?: (event: any, context: any) => void;
+      onActive?: (event: any, context: any) => void;
+      onEnd?: (event: any, context: any) => void;
+      onFail?: (event: any, context: any) => void;
+      onCancel?: (event: any, context: any) => void;
+      onFinish?: (event: any, context: any) => void;
+    },
+    dependencies?: any
+  ) => void;
 };
 
 try {