[Tests] Add basic long press e2e test (#4425)

## Description

Updates the basic long press example and adds an e2e argent flow test

## Test plan

`argent flow run basic-long-press-test`

Author: j-piasecki

.argent/flows/basic-long-press-test.yaml

@@ -0,0 +1,51 @@
+steps:
+  - echo: Launching Expo Example
+  - launch: com.example.ExpoExample
+  - await: { visible: { text: "Empty Example" }, timeout: 15000 }
+  - echo: "On the Home list, search for long press example"
+  - type: { text: "long", into: { id: "search-examples" } }
+  - echo: "Tap the example to open it"
+  - tap: "Basic LongPress"
+  - echo: "Clear console"
+  - await: { visible: "open-console-button" }
+  - await: { idle: true }
+  - tap: "open-console-button"
+  - await: { visible: "clear-console-button" }
+  - tap: "clear-console-button"
+  - tap: "close-console-button"
+  - await: { idle: true }
+  - echo: "Long press the box and check if long press count is updated"
+  - await: { visible: "Long press count: 0" }
+  - assert: { visible: "long-press-box" }
+  - long-press: "long-press-box"
+  - assert: { visible: "Long press count: 1" }
+  - echo: "Check if console logs are printed in order"
+  - tap: "open-console-button"
+  - await: { idle: true }
+  - await: { visible: "close-console-button" }
+  - assert: { visible: "1. onBegin" }
+  - assert: { visible: "2. onActivate" }
+  - assert: { visible: "3. onDeactivate" }
+  - assert: { visible: "4. onFinalize" }
+  - tap: "close-console-button"
+  - await: { idle: true }
+  - await: { visible: "Long press count: 1" }
+  - echo: "Long press the box again and check if long press count is updated"
+  - long-press: "long-press-box"
+  - assert: { visible: "Long press count: 2" }
+  - echo: "Clear console"
+  - await: { visible: "open-console-button" }
+  - tap: "open-console-button"
+  - await: { visible: "clear-console-button" }
+  - tap: "clear-console-button"
+  - tap: "close-console-button"
+  - await: { idle: true }
+  - echo: "Tap the box and check if long press count is not updated"
+  - tap: "long-press-box"
+  - assert: { visible: "Long press count: 2" }
+  - echo: "Check if console logs are printed in order"
+  - tap: "open-console-button"
+  - await: { idle: true }
+  - await: { visible: "close-console-button" }
+  - assert: { visible: "9. onBegin" }
+  - assert: { visible: "10. onFinalize" }

apps/common-app/src/new_api/simple/longPress/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { Text, View } from 'react-native';
 import {
   GestureDetector,
   useLongPressGesture,
@@ -10,12 +10,17 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 
-import { COLORS, commonStyles } from '../../../common';
+import { COLORS, commonStyles, useIndexedLogger } from '../../../common';
 
 export default function LongPressExample() {
-  const colorProgress = useSharedValue(0);
+  const log = useIndexedLogger();
+  const [count, setCount] = useState(0);
+
+  const incrementCount = useCallback(() => setCount((c) => c + 1), []);
 
+  const colorProgress = useSharedValue(0);
   const finalise_color = useSharedValue(COLORS.PURPLE);
 
   const animatedStyle = useAnimatedStyle(() => {
@@ -30,16 +35,26 @@ export default function LongPressExample() {
 
   const longPressGesture = useLongPressGesture({
     onBegin: () => {
+      log('onBegin');
       colorProgress.value = withTiming(1, {
         duration: 100,
       });
     },
     onActivate: () => {
+      log('onActivate');
+      scheduleOnRN(incrementCount);
       colorProgress.value = withTiming(2, {
         duration: 100,
       });
     },
+    onDeactivate: () => {
+      log('onDeactivate');
+      colorProgress.value = withTiming(1, {
+        duration: 100,
+      });
+    },
     onFinalize: (e) => {
+      log('onFinalize');
       finalise_color.value = e.canceled ? COLORS.RED : COLORS.GREEN;
       colorProgress.value = 1;
       colorProgress.value = withTiming(
@@ -56,8 +71,12 @@ export default function LongPressExample() {
 
   return (
     <View style={commonStyles.centerView}>
+      <Text style={commonStyles.header}>Long press count: {count}</Text>
       <GestureDetector gesture={longPressGesture}>
-        <Animated.View style={[commonStyles.box, animatedStyle]} />
+        <Animated.View
+          testID="long-press-box"
+          style={[commonStyles.box, animatedStyle]}
+        />
       </GestureDetector>
     </View>
   );