[Tests] Add basic tap e2e test (#4424)

## Description

Updates the Basic tap example and adds an e2e argent flow

## Test plan

`argent flow run basic-tap-test`

Author: j-piasecki

.argent/flows/basic-tap-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 tap example"
+  - type: { text: "tap", into: { id: "search-examples" } }
+  - echo: "Tap the example to open it"
+  - tap: "Basic Tap"
+  - 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: "Tap the box and check if tap count is updated"
+  - await: { visible: "Tap count: 0" }
+  - assert: { visible: "tap-box" }
+  - tap: "tap-box"
+  - assert: { visible: "Tap 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: "Tap count: 1" }
+  - echo: "Tap the box again and check if tap count is updated"
+  - tap: "tap-box"
+  - assert: { visible: "Tap 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: "Long press the box and check if tap count is not updated"
+  - long-press: "tap-box"
+  - assert: { visible: "Tap 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/common.tsx

@@ -14,6 +14,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 
 export interface Example {
   name: string;
@@ -140,6 +141,24 @@ type Props = {
   style: StyleProp<ViewStyle>;
 };
 
+export function useIndexedLogger() {
+  const messageCounter = useRef(0);
+
+  const logMessage = (message: string) => {
+    messageCounter.current += 1;
+    const indexedMessage = `${messageCounter.current}. ${message}`;
+    console.log(indexedMessage);
+  };
+
+  const logMessageWorklet = (message: string) => {
+    'worklet';
+    // Schedule log on the JS thread so the console interceptor can pick it up
+    scheduleOnRN(logMessage, message);
+  };
+
+  return logMessageWorklet;
+}
+
 export class LoremIpsum extends React.Component<Props> {
   static defaultProps = {
     words: 1000,

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

@@ -1,17 +1,22 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { Text, View } from 'react-native';
 import { GestureDetector, useTapGesture } from 'react-native-gesture-handler';
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
   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 TapExample() {
+  const [count, setCount] = useState(0);
   const colorProgress = useSharedValue(0);
+  const log = useIndexedLogger();
+
+  const incrementCount = useCallback(() => setCount((c) => c + 1), []);
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -25,11 +30,20 @@ export default function TapExample() {
 
   const tapGesture = useTapGesture({
     onBegin: () => {
+      log('onBegin');
       colorProgress.value = withTiming(1, {
         duration: 100,
       });
     },
+    onActivate: () => {
+      log('onActivate');
+      scheduleOnRN(incrementCount);
+    },
+    onDeactivate: () => {
+      log('onDeactivate');
+    },
     onFinalize: () => {
+      log('onFinalize');
       colorProgress.value = withTiming(0, {
         duration: 100,
       });
@@ -38,8 +52,12 @@ export default function TapExample() {
 
   return (
     <View style={commonStyles.centerView}>
+      <Text style={commonStyles.header}>Tap count: {count}</Text>
       <GestureDetector gesture={tapGesture}>
-        <Animated.View style={[commonStyles.box, animatedStyle]} />
+        <Animated.View
+          testID="tap-box"
+          style={[commonStyles.box, animatedStyle]}
+        />
       </GestureDetector>
     </View>
   );