[E2E] Add more E2E tests

.github/workflows/e2e.yml

@@ -47,7 +47,7 @@ jobs:
 
       - name: Run tests on iOS
         working-directory: ${{ env.WORKING_DIRECTORY }}
-        run: yarn e2e:ios
+        run: yarn e2e:ios-ci
 
   android-e2e:
     if: github.repository == 'software-mansion/react-native-gesture-handler'
@@ -95,4 +95,4 @@ jobs:
           disable-animations: true
           avd-name: Pixel_9
           working-directory: ${{ env.WORKING_DIRECTORY }}
-          script: adb devices && yarn e2e:android
+          script: adb devices && yarn e2e:android-ci

apps/common-app/src/e2e_screens/TestingScreen.tsx

@@ -0,0 +1,72 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { ScrollView, Touchable } from 'react-native-gesture-handler';
+
+interface TestingScreenProps {
+  text: string;
+  buttonCallback: () => void;
+  children: React.ReactNode;
+}
+
+export default function TestingScreen({
+  text,
+  buttonCallback,
+  children,
+}: TestingScreenProps) {
+  return (
+    <View style={styles.container}>
+      <ScrollView style={styles.scrollContainer}>
+        <Text testID="state-indicator" style={styles.stateIndicator}>
+          {text}
+        </Text>
+      </ScrollView>
+      <View testID="container" style={styles.innerContainer}>
+        {children}
+      </View>
+      <View style={styles.buttonContainer}>
+        <Touchable
+          testID="extract-button"
+          style={styles.extractButton}
+          onPress={buttonCallback}>
+          <Text style={styles.extractButtonText}>Extract callbacks</Text>
+        </Touchable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContainer: {
+    height: 50,
+    maxHeight: 50,
+  },
+  innerContainer: {
+    flex: 1,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  stateIndicator: {
+    fontSize: 15,
+    alignSelf: 'flex-start',
+  },
+  buttonContainer: {
+    height: 60,
+    maxHeight: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  extractButton: {
+    width: 120,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'royalblue',
+
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  extractButtonText: {
+    color: 'white',
+  },
+});

apps/common-app/src/e2e_screens/gestures/Fling.tsx

@@ -0,0 +1,49 @@
+import { useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { GestureDetector, useFlingGesture } from 'react-native-gesture-handler';
+
+import TestingScreen from '../TestingScreen';
+import { CallbackIDs } from '../utils';
+
+export default function FlingScreen() {
+  const [text, setText] = useState('');
+  const callbacks = useRef(new Set<string>());
+
+  const flingGesture = useFlingGesture({
+    onBegin: () => {
+      callbacks.current.add(CallbackIDs.onBegin);
+    },
+    onActivate: () => {
+      callbacks.current.add(CallbackIDs.onActivate);
+    },
+    onDeactivate: () => {
+      callbacks.current.add(CallbackIDs.onDeactivate);
+    },
+    onFinalize: () => {
+      callbacks.current.add(CallbackIDs.onFinalize);
+    },
+    runOnJS: true,
+  });
+
+  return (
+    <TestingScreen
+      text={text}
+      buttonCallback={() => {
+        setText(`{Fling: ${Array.from(callbacks.current).join('')}}`);
+        callbacks.current.clear();
+      }}>
+      <GestureDetector gesture={flingGesture}>
+        <View style={styles.gestureBox} testID="fling-box" />
+      </GestureDetector>
+    </TestingScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  gestureBox: {
+    width: 120,
+    height: 120,
+    borderRadius: 20,
+    backgroundColor: '#4ecdc4',
+  },
+});

apps/common-app/src/e2e_screens/gestures/LongPress.tsx

@@ -0,0 +1,52 @@
+import { useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  GestureDetector,
+  useLongPressGesture,
+} from 'react-native-gesture-handler';
+
+import TestingScreen from '../TestingScreen';
+import { CallbackIDs } from '../utils';
+
+export default function LongPressScreen() {
+  const [text, setText] = useState('');
+  const callbacks = useRef(new Set<string>());
+
+  const longPressGesture = useLongPressGesture({
+    onBegin: () => {
+      callbacks.current.add(CallbackIDs.onBegin);
+    },
+    onActivate: () => {
+      callbacks.current.add(CallbackIDs.onActivate);
+    },
+    onDeactivate: () => {
+      callbacks.current.add(CallbackIDs.onDeactivate);
+    },
+    onFinalize: () => {
+      callbacks.current.add(CallbackIDs.onFinalize);
+    },
+    runOnJS: true,
+  });
+
+  return (
+    <TestingScreen
+      text={text}
+      buttonCallback={() => {
+        setText(`{LongPress: ${Array.from(callbacks.current).join('')}}`);
+        callbacks.current.clear();
+      }}>
+      <GestureDetector gesture={longPressGesture}>
+        <View style={styles.gestureBox} testID="long-press-box" />
+      </GestureDetector>
+    </TestingScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  gestureBox: {
+    width: 120,
+    height: 120,
+    borderRadius: 20,
+    backgroundColor: '#4ecdc4',
+  },
+});

apps/common-app/src/e2e_screens/gestures/Pan.tsx

@@ -1,101 +1,52 @@
-import { useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import {
-  GestureDetector,
-  ScrollView,
-  usePanGesture,
-} from 'react-native-gesture-handler';
+import { useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
+
+import TestingScreen from '../TestingScreen';
+import { CallbackIDs } from '../utils';
 
 export default function PanScreen() {
   const [text, setText] = useState('');
+  const callbacks = useRef(new Set<string>());
 
   const panGesture = usePanGesture({
     onBegin: () => {
-      setText((prev) => prev + '1');
+      callbacks.current.add(CallbackIDs.onBegin);
     },
     onActivate: () => {
-      setText((prev) => prev + '2');
+      callbacks.current.add(CallbackIDs.onActivate);
     },
     onUpdate: () => {
-      setText((prev) => {
-        // Skip subsequent updates
-        if (prev[prev.length - 1] === '3') {
-          return prev;
-        }
-        return prev + '3';
-      });
+      callbacks.current.add(CallbackIDs.onUpdate);
     },
     onDeactivate: () => {
-      setText((prev) => prev + '4');
+      callbacks.current.add(CallbackIDs.onDeactivate);
     },
     onFinalize: () => {
-      setText((prev) => prev + '5');
+      callbacks.current.add(CallbackIDs.onFinalize);
     },
     runOnJS: true,
   });
 
   return (
-    <View style={styles.container}>
-      <ScrollView style={styles.scrollContainer}>
-        <Text testID="state-indicator" style={styles.stateIndicator}>
-          {text}
-        </Text>
-      </ScrollView>
-      <View testID="container" style={styles.innerContainer}>
-        <GestureDetector gesture={panGesture}>
-          <View style={styles.gestureBox} testID="pan-box" />
-        </GestureDetector>
-      </View>
-      <View style={styles.buttonContainer}>
-        <Pressable
-          testID="reset"
-          style={styles.resetButton}
-          onPress={() => {
-            setText('');
-          }}>
-          <Text>Reset</Text>
-        </Pressable>
-      </View>
-    </View>
+    <TestingScreen
+      text={text}
+      buttonCallback={() => {
+        setText(`{Pan: ${Array.from(callbacks.current).join('')}}`);
+        callbacks.current.clear();
+      }}>
+      <GestureDetector gesture={panGesture}>
+        <View style={styles.gestureBox} testID="pan-box" />
+      </GestureDetector>
+    </TestingScreen>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContainer: {
-    height: 50,
-    maxHeight: 50,
-  },
-  innerContainer: {
-    flex: 1,
-    justifyContent: 'space-around',
-    alignItems: 'center',
-  },
-  stateIndicator: {
-    fontSize: 15,
-    alignSelf: 'flex-start',
-  },
   gestureBox: {
     width: 120,
     height: 120,
     borderRadius: 20,
     backgroundColor: '#4ecdc4',
   },
-  buttonContainer: {
-    height: 60,
-    maxHeight: 60,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  resetButton: {
-    width: 120,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'royalblue',
-
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
 });

apps/common-app/src/e2e_screens/gestures/Pinch.tsx

@@ -0,0 +1,52 @@
+import { useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { GestureDetector, usePinchGesture } from 'react-native-gesture-handler';
+
+import TestingScreen from '../TestingScreen';
+import { CallbackIDs } from '../utils';
+
+export default function PinchScreen() {
+  const [text, setText] = useState('');
+  const callbacks = useRef(new Set<string>());
+
+  const pinchGesture = usePinchGesture({
+    onBegin: () => {
+      callbacks.current.add(CallbackIDs.onBegin);
+    },
+    onActivate: () => {
+      callbacks.current.add(CallbackIDs.onActivate);
+    },
+    onUpdate: () => {
+      callbacks.current.add(CallbackIDs.onUpdate);
+    },
+    onDeactivate: () => {
+      callbacks.current.add(CallbackIDs.onDeactivate);
+    },
+    onFinalize: () => {
+      callbacks.current.add(CallbackIDs.onFinalize);
+    },
+    runOnJS: true,
+  });
+
+  return (
+    <TestingScreen
+      text={text}
+      buttonCallback={() => {
+        setText(`{Pinch: ${Array.from(callbacks.current).join('')}}`);
+        callbacks.current.clear();
+      }}>
+      <GestureDetector gesture={pinchGesture}>
+        <View style={styles.gestureBox} testID="pinch-box" />
+      </GestureDetector>
+    </TestingScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  gestureBox: {
+    width: 120,
+    height: 120,
+    borderRadius: 20,
+    backgroundColor: '#4ecdc4',
+  },
+});