[Tests] Add shared value e2e test

## Description

Updates `Shared value` example and adds an e2e argent flow

## Test plan

`argent flow run shared-value-test`

Author: j-piasecki

.argent/flows/shared-value-test.yaml

@@ -0,0 +1,59 @@
+steps:
+  - echo: Launching Expo Example
+  - launch: com.example.ExpoExample
+  - await: { visible: { text: "Empty Example" }, timeout: 15000 }
+  - echo: "On the Home list, search for the shared value example"
+  - type: { text: "shared", into: { id: "search-examples" } }
+  - echo: "Tap the example to open it"
+  - tap: { text: "Shared Value" }
+  - await: { visible: { id: "shared-value-box" } }
+  - await: { idle: true }
+
+  - echo: "Clear console"
+  - await: { visible: { id: "open-console-button" } }
+  - tap: { id: "open-console-button" }
+  - await: { visible: { id: "clear-console-button" } }
+  - tap: { id: "clear-console-button" }
+  - tap: { id: "close-console-button" }
+  - await: { idle: true }
+
+  - echo: "The gesture starts configured for a single tap, so one tap activates it"
+  - tap: { id: "shared-value-box" }
+  - tap: { id: "open-console-button" }
+  - await: { idle: true }
+  - await: { visible: { id: "close-console-button" } }
+  - assert: { visible: { text: "1. onBegin" } }
+  - assert: { visible: { text: "2. onActivate" } }
+  - assert: { visible: { text: "3. onDeactivate" } }
+  - assert: { visible: { text: "4. onFinalize" } }
+
+  - echo: "Clear console"
+  - tap: { id: "clear-console-button" }
+  - tap: { id: "close-console-button" }
+  - await: { idle: true }
+
+  - echo: "Raise the shared value, then check that a single tap no longer activates"
+  - tap: { id: "increment-taps-button" }
+  - tap: { id: "shared-value-box" }
+  - tap: { id: "open-console-button" }
+  - await: { idle: true }
+  - await: { visible: { id: "close-console-button" } }
+  - assert: { visible: { text: "5. Required taps: 2" } }
+  - assert: { visible: { text: "6. onBegin" } }
+  - assert: { visible: { text: "7. onFinalize" } }
+  - assert: { hidden: { text: "onActivate" } }
+
+  - echo: "Clear console"
+  - tap: { id: "clear-console-button" }
+  - tap: { id: "close-console-button" }
+  - await: { idle: true }
+
+  - echo: "A double tap matches the new configuration and activates the gesture"
+  - tap: { on: { id: "shared-value-box" }, times: 2 }
+  - tap: { id: "open-console-button" }
+  - await: { idle: true }
+  - await: { visible: { id: "close-console-button" } }
+  - assert: { visible: { text: "8. onBegin" } }
+  - assert: { visible: { text: "9. onActivate" } }
+  - assert: { visible: { text: "10. onDeactivate" } }
+  - assert: { visible: { text: "11. onFinalize" } }

apps/common-app/src/new_api/showcase/shared_value/index.tsx

@@ -12,18 +12,29 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { COLORS, commonStyles } from '../../../common';
+import { COLORS, commonStyles, useIndexedLogger } from '../../../common';
 
 export default function SharedValueConfigExample() {
   const numberOfTaps = useSharedValue(1);
   const flashProgress = useSharedValue(0);
+  const log = useIndexedLogger();
 
   const tap = useTapGesture({
     numberOfTaps,
+    onBegin: () => {
+      log('onBegin');
+    },
     onActivate: () => {
+      log('onActivate');
       flashProgress.value = 1;
       flashProgress.value = withTiming(0, { duration: 400 });
     },
+    onDeactivate: () => {
+      log('onDeactivate');
+    },
+    onFinalize: () => {
+      log('onFinalize');
+    },
   });
 
   const boxStyle = useAnimatedStyle(() => ({
@@ -36,16 +47,30 @@ export default function SharedValueConfigExample() {
 
   return (
     <View style={styles.container}>
+      <Text style={commonStyles.instructions}>
+        The button raises the number of taps the gesture requires. The gesture
+        reads it from a shared value, so the screen never re-renders. Open the
+        console to follow the gesture callbacks.
+      </Text>
+
       <GestureDetector gesture={tap}>
-        <Animated.View style={[commonStyles.box, boxStyle]} />
+        <Animated.View
+          testID="shared-value-box"
+          style={[commonStyles.box, boxStyle]}
+        />
       </GestureDetector>
 
       <Touchable
+        testID="increment-taps-button"
         style={styles.button}
         activeOpacity={0.6}
         animationDuration={{ in: 80, out: 200 }}
         onPress={() => {
-          numberOfTaps.value += 1;
+          // Reading `numberOfTaps.value` back right after the write still gives
+          // the old value, so the new one has to be kept in a local.
+          const requiredTaps = numberOfTaps.value + 1;
+          numberOfTaps.value = requiredTaps;
+          log(`Required taps: ${requiredTaps}`);
         }}>
         <Text style={styles.buttonLabel}>Increment required taps</Text>
       </Touchable>