[Tests] Add timer e2e test (#4437)

## Description

Updates `Timer` example and adds an e2e argent flow

## Test plan

`argent flow run timer-test`

Author: j-piasecki

.argent/flows/timer-test.yaml

@@ -0,0 +1,73 @@
+steps:
+  - echo: Launching Expo Example
+  - launch: com.example.ExpoExample
+  - await: { visible: { text: "Empty Example" }, timeout: 15000 }
+  - echo: "On the Home list, search for the timer example"
+  - type: { text: "timer", into: { id: "search-examples" } }
+  - echo: "Tap the example to open it"
+  - tap: { text: "Timer" }
+  - await: { idle: true }
+  - await: { visible: { id: "timer-box" } }
+
+  - 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 }
+  - await: { hidden: { id: "close-console-button" } }
+
+  - echo: "Nothing is measured before the first press"
+  - assert: { visible: { text: "Last press: none" } }
+
+  - echo: "Hold for two seconds - the measured duration is rounded to whole seconds"
+  - long-press: { on: { id: "timer-box" }, duration: 2000 }
+  - await: { visible: { text: "Last press: 2s" } }
+
+  - echo: "Check if console logs are printed in order"
+  - 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 (2s)" } }
+
+  - echo: "Clear console"
+  - tap: { id: "clear-console-button" }
+  - tap: { id: "close-console-button" }
+  - await: { idle: true }
+  - await: { hidden: { id: "close-console-button" } }
+
+  - echo: "A longer hold measures a longer duration"
+  - long-press: { on: { id: "timer-box" }, duration: 4000 }
+  - await: { visible: { text: "Last press: 4s" } }
+
+  - echo: "Check if console logs are printed in order"
+  - tap: { id: "open-console-button" }
+  - await: { idle: true }
+  - await: { visible: { id: "close-console-button" } }
+  - assert: { visible: { text: "5. onBegin" } }
+  - assert: { visible: { text: "6. onActivate" } }
+  - assert: { visible: { text: "7. onDeactivate" } }
+  - assert: { visible: { text: "8. onFinalize (4s)" } }
+
+  - echo: "Clear console"
+  - tap: { id: "clear-console-button" }
+  - tap: { id: "close-console-button" }
+  - await: { idle: true }
+  - await: { hidden: { id: "close-console-button" } }
+
+  - echo: "A tap is too short to activate the gesture, but it is still measured"
+  - tap: { id: "timer-box" }
+  - await: { visible: { text: "Last press: 0s" } }
+
+  - echo: "The tap begins and finalizes without activating"
+  - tap: { id: "open-console-button" }
+  - await: { idle: true }
+  - await: { visible: { id: "close-console-button" } }
+  - assert: { visible: { text: "9. onBegin" } }
+  - assert: { visible: { text: "10. onFinalize (0s)" } }
+  - assert: { hidden: { text: "onActivate" } }
+  - assert: { hidden: { text: "onDeactivate" } }

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, Text, TextInput, View } from 'react-native';
 import {
   GestureDetector,
@@ -14,16 +14,17 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 
-import type { FeedbackHandle } from '../../../common';
-import { COLORS, commonStyles, Feedback } from '../../../common';
+import { COLORS, commonStyles, useIndexedLogger } from '../../../common';
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 export default function TimerExample() {
-  const feedbackRef = useRef<FeedbackHandle>(null);
+  const [lastPress, setLastPress] = useState('none');
   const duration = useSharedValue(0);
   const colorProgress = useSharedValue(0);
+  const log = useIndexedLogger();
   const animatedProps = useAnimatedProps(() => {
     return {
       text: `Duration: ${duration.value.toFixed(2)}s`,
@@ -42,14 +43,25 @@ export default function TimerExample() {
 
   const longPressGesture = useLongPressGesture({
     onBegin: () => {
+      log('onBegin');
       colorProgress.value = withTiming(1, { duration: 150 });
       duration.value = 0;
       duration.value = withTiming(600, {
         duration: 600000,
         easing: Easing.linear,
       });
     },
+    onActivate: () => {
+      log('onActivate');
+    },
+    onDeactivate: () => {
+      log('onDeactivate');
+    },
     onFinalize: () => {
+      // Rounded, so the summary tolerates press timing jitter.
+      const seconds = Math.round(duration.value);
+      log(`onFinalize (${seconds}s)`);
+      scheduleOnRN(setLastPress, `${seconds}s`);
       colorProgress.value = withTiming(0, { duration: 300 });
       cancelAnimation(duration);
     },
@@ -66,12 +78,18 @@ export default function TimerExample() {
           animatedProps={animatedProps}
         />
         <GestureDetector gesture={longPressGesture}>
-          <Animated.View style={[commonStyles.box, animatedBoxStyle]} />
+          <Animated.View
+            testID="timer-box"
+            style={[commonStyles.box, animatedBoxStyle]}
+          />
         </GestureDetector>
         <Text style={commonStyles.instructions}>
           Hold the box to measure press duration
         </Text>
-        <Feedback ref={feedbackRef} />
+        <Text testID="last-press-duration" style={styles.lastPressText}>
+          Last press: {lastPress}
+        </Text>
+        <Text style={commonStyles.caption}>rounded to whole seconds</Text>
       </View>
     </GestureHandlerRootView>
   );
@@ -90,4 +108,10 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontVariant: ['tabular-nums'],
   },
+  lastPressText: {
+    marginTop: 8,
+    fontSize: 16,
+    fontWeight: '600',
+    color: COLORS.NAVY,
+  },
 });