test(gesture): assert pan duration in the iOS gesture-lab replay (#1901)

* test(gesture): assert pan duration in the iOS gesture-lab replay (#1584)

The only replay exercising the `gesture pan` command class that regressed
in #1562 asserted a counter, which stays green even if the requested
duration collapses — nothing in CI could catch the regression coming back.

Record an observed-duration bucket from a single-pointer Gesture.Pan's
begin/end timestamps in GestureLab.tsx (iOS-only, so Android's raw-touch
transform handling in the same shared component is untouched), render it
as plain text, and assert it with a one-line wait in gesture-lab.ad. No
runner protocol changes needed.

* style: fix oxfmt line-wrap in GestureLab.tsx

* ci(ios): run the pan-duration canary automatically on every PR

gesture-lab.ad (and its new duration assertion) only runs under full:fixture-replays,
which is currently dispatch-only in replays-manual.yml — the PR-triggered ios.yml lane
runs the smoke tier, and replays-nightly.yml no longer carries device replays at all
(#1781 A1). So the #1584 guard could not actually catch a regression automatically.

Split the duration check into its own minimal, isolated replay
(gesture-pan-duration.ad) and run it as a smoke-tier step in ios.yml, so it's cheap
and doesn't depend on gesture-lab.ad's multi-touch commands, which stay full-tier only.

* test: require pan recognition in duration canary

Author: thymikee

.github/workflows/ios.yml

@@ -209,6 +209,17 @@ jobs:
           pnpm gate build
           node --experimental-strip-types scripts/node-test-tmpdir.ts --test test/integration/smoke-ios-simulator-coverage.test.ts test/integration/smoke-ios-simulator.test.ts
 
+      # #1584: isolated, cheap automatic guard for the #1562 class of regression (iOS silently
+      # ignoring a `gesture pan` duration). Split out of gesture-lab.ad, which stays full-tier
+      # (dispatch-only via replays-manual.yml) because its multi-touch commands are a separate,
+      # heavier concern. This is the only automatic lane this assertion runs in today.
+      - name: Run gesture pan-duration smoke replay
+        run: |
+          xcrun simctl install "${{ steps.ios-simulator.outputs.simulator-udid }}" "${{ steps.fixture-app.outputs.app-path }}"
+          pnpm clean:daemon
+          node --experimental-strip-types src/bin.ts test examples/test-app/replays/gesture-pan-duration.ad --udid "${{ steps.ios-simulator.outputs.simulator-udid }}" --retries 2 --artifacts-dir test/artifacts/replays-ios-gesture-pan-duration --report-junit test/artifacts/replays-ios-gesture-pan-duration.junit.xml
+          pnpm clean:daemon
+
       - name: Assert simulator automation preserved host focus
         if: ${{ always() }}
         run: |

examples/test-app/README.md

@@ -251,6 +251,13 @@ two-pointer gesture changes all three semantic states. On Android, these checks
 are intentionally qualitative because recognizers can report non-exact centroid,
 scale, and rotation values for one simultaneous two-finger gesture.
 
+`gesture-pan-duration.ad` is a separate, minimal iOS replay that asserts a single-pointer
+`gesture pan`'s requested duration is actually observed by the app (a bucketed
+`pan duration` status on the Home screen), rather than just that the gesture activated.
+It's split out of `gesture-lab.ad` so it can run as an automatic PR-tier check
+(`.github/workflows/ios.yml`) without depending on `gesture-lab.ad`'s multi-touch commands,
+which stay full-tier only.
+
 To target a specific iOS simulator or an installed Expo development build, run the
 underlying command directly so global flags stay before replay inputs:
 

examples/test-app/replays/gesture-lab.ad

@@ -10,6 +10,7 @@ wait "two-pointer pan activations 0" 5000
 
 gesture pan 110 443 48 0 500
 wait "two-pointer pan activations 0" 5000
+wait text "pan duration >=400ms" 5000
 
 gesture pan 110 443 48 0 500 --pointer-count 2
 wait "two-pointer pan activations 1" 5000

examples/test-app/replays/gesture-pan-duration.ad

@@ -0,0 +1,17 @@
+# Isolated pan-duration canary (#1584), split out of gesture-lab.ad so the smoke tier gets a
+# cheap automatic regression guard for #1562 without depending on gesture-lab.ad's multi-touch
+# commands (pinch/rotate/transform/two-pointer pan), which are a separate, heavier full-tier
+# concern.
+context platform=ios kind=simulator timeout=60000
+
+env APP_TARGET="Agent Device Tester"
+env APP_URL=""
+
+open "${APP_TARGET}" --relaunch --launch-url "${APP_URL}"
+wait "Gesture lab" 30000
+wait "gesture canary ready" 5000
+
+gesture pan 110 443 48 0 500
+wait text "pan duration >=400ms" 5000
+
+close

examples/test-app/src/screens/GestureLab.tsx

@@ -37,6 +37,8 @@ type GestureCounts = {
   twoPointerPan: number;
 };
 
+const panDurationBucketMs = 400;
+
 type AndroidTouchStart = TransformState & {
   angle: number;
   centroidX: number;
@@ -65,8 +67,10 @@ export function GestureLab() {
   const [transform, setTransform] = useState<TransformState>(initialTransform);
   const [counts, setCounts] = useState<GestureCounts>(initialCounts);
   const [dragCompleted, setDragCompleted] = useState(false);
+  const [panDurationStatus, setPanDurationStatus] = useState('pending');
   const transformRef = useRef<TransformState>(initialTransform);
   const gestureStartRef = useRef<TransformState>(initialTransform);
+  const panDurationStartRef = useRef<number | undefined>(undefined);
   const androidTouchStartRef = useRef<AndroidTouchStart | undefined>(undefined);
   const legacyFlingDownRef = useRef(null);
   const legacyFlingLeftRef = useRef(null);
@@ -207,6 +211,33 @@ export function GestureLab() {
     legacyFlingUpRef,
     legacyFlingDownRef,
   ];
+  const panDurationGesture = Gesture.Pan()
+    .minPointers(1)
+    .maxPointers(1)
+    .runOnJS(true)
+    .simultaneousWithExternalGesture(
+      twoPointerPanGesture,
+      legacyPanRef,
+      legacyPinchRef,
+      legacyRotationRef,
+      ...legacyFlingRefs,
+    )
+    .onBegin(() => {
+      panDurationStartRef.current = Date.now();
+    })
+    // `onEnd` only fires after the recognizer reached ACTIVE. `onFinalize` would also run for a
+    // failed or cancelled pan, allowing a long-lived non-gesture to satisfy the duration canary.
+    .onEnd(() => {
+      const start = panDurationStartRef.current;
+      panDurationStartRef.current = undefined;
+      if (start === undefined) return;
+      const durationMs = Date.now() - start;
+      const bucket =
+        durationMs >= panDurationBucketMs
+          ? `>=${panDurationBucketMs}ms`
+          : `<${panDurationBucketMs}ms`;
+      setPanDurationStatus(bucket);
+    });
 
   const androidTransformTarget = (
     <FlingGestureHandler
@@ -286,6 +317,46 @@ export function GestureLab() {
     pinchChanged ? 'yes' : 'no'
   }, rotate changed ${rotateChanged ? 'yes' : 'no'}`;
 
+  const targetView = (
+    <View
+      accessibilityLabel="Gesture test image"
+      onTouchEnd={
+        Platform.OS === 'android' ? () => (androidTouchStartRef.current = undefined) : undefined
+      }
+      onTouchMove={Platform.OS === 'android' ? handleAndroidTouchMove : undefined}
+      onTouchStart={Platform.OS === 'android' ? handleAndroidTouchStart : undefined}
+      style={styles.target}
+      testID="gesture-target"
+    >
+      <Image
+        accessibilityIgnoresInvertColors
+        accessibilityLabel="Gesture test image"
+        resizeMode="cover"
+        source={{ uri: gestureImageUri }}
+        style={[
+          styles.image,
+          {
+            transform: [
+              { translateX: transform.offsetX },
+              { translateY: transform.offsetY },
+              { scale: transform.scale },
+              { rotate: `${rotationDegrees}deg` },
+            ],
+          },
+        ]}
+        testID="gesture-target-image"
+      />
+      {androidTransformTarget}
+      <GestureDetector gesture={twoPointerPanGesture}>
+        <View
+          accessibilityLabel="Exact two-pointer pan target"
+          style={styles.twoPointerTarget}
+          testID="two-pointer-pan-target"
+        />
+      </GestureDetector>
+    </View>
+  );
+
   return (
     <SectionCard
       subtitle={`Image target for pan, pinch, rotate, and fling. ${changeStatusLabel}`}
@@ -318,43 +389,11 @@ export function GestureLab() {
         drag completed {dragCompleted ? 'yes' : 'no'}
       </Text>
 
-      <View
-        accessibilityLabel="Gesture test image"
-        onTouchEnd={
-          Platform.OS === 'android' ? () => (androidTouchStartRef.current = undefined) : undefined
-        }
-        onTouchMove={Platform.OS === 'android' ? handleAndroidTouchMove : undefined}
-        onTouchStart={Platform.OS === 'android' ? handleAndroidTouchStart : undefined}
-        style={styles.target}
-        testID="gesture-target"
-      >
-        <Image
-          accessibilityIgnoresInvertColors
-          accessibilityLabel="Gesture test image"
-          resizeMode="cover"
-          source={{ uri: gestureImageUri }}
-          style={[
-            styles.image,
-            {
-              transform: [
-                { translateX: transform.offsetX },
-                { translateY: transform.offsetY },
-                { scale: transform.scale },
-                { rotate: `${rotationDegrees}deg` },
-              ],
-            },
-          ]}
-          testID="gesture-target-image"
-        />
-        {androidTransformTarget}
-        <GestureDetector gesture={twoPointerPanGesture}>
-          <View
-            accessibilityLabel="Exact two-pointer pan target"
-            style={styles.twoPointerTarget}
-            testID="two-pointer-pan-target"
-          />
-        </GestureDetector>
-      </View>
+      {Platform.OS === 'ios' ? (
+        <GestureDetector gesture={panDurationGesture}>{targetView}</GestureDetector>
+      ) : (
+        targetView
+      )}
 
       <View style={styles.metrics} testID="gesture-metrics">
         <Text style={styles.metric} testID="gesture-canary-ready">
@@ -369,6 +408,9 @@ export function GestureLab() {
         <Text style={styles.metric} testID="gesture-two-pointer-pan-status">
           two-pointer pan activations {counts.twoPointerPan}
         </Text>
+        <Text style={styles.metric} testID="gesture-pan-duration-status">
+          pan duration {panDurationStatus}
+        </Text>
         <Text style={styles.metric} testID="gesture-change-status">
           {changeStatusLabel}
         </Text>