From e1357339f5dff137bd36cc2f027601fc88ffc629 Mon Sep 17 00:00:00 2001
From: Christoph Purrer <chpurrer@meta.com>
Date: Tue, 27 Oct 2026 18:01:18 -0700
Subject: [PATCH] Scroll SectionList viewability E2E to its target
 deterministically

Summary:
Replace the Maestro swipe in `sectionlist-viewability.yml` with taps on a new example button that calls `scrollToLocation` centered on Cheesecake plus `recordInteraction`. Maestro stops swiping at the first offset it deems fully visible, which React Native can measure as less than 100% coverage, so the output assertion times out.

Changelog: [Internal]

Differential Revision: D127948384
---
 .../.maestro/sectionlist-viewability.yml      | 34 ++++++++++---------
 .../SectionList-BaseOnViewableItemsChanged.js | 22 ++++++++++--
 ...msChanged-horizontal-waitForInteraction.js |  2 ++
 ...ViewableItemsChanged-waitForInteraction.js |  8 ++++-
 4 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/packages/rn-tester/.maestro/sectionlist-viewability.yml b/packages/rn-tester/.maestro/sectionlist-viewability.yml
index f676165500f6..52898cb16bcc 100644
--- a/packages/rn-tester/.maestro/sectionlist-viewability.yml
+++ b/packages/rn-tester/.maestro/sectionlist-viewability.yml
@@ -28,15 +28,16 @@ appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebo
     visible:
       id: 'section-list-viewability-horizontal-wait'
     timeout: 30000
-# The example requires 100% item visibility before reporting viewability.
-# Target Cheesecake, the item asserted in the output below.
-- scrollUntilVisible:
-    element:
+# Tap twice: the first scroll uses estimated layout and measures Cheesecake,
+# the second centers it exactly now that its metrics are known.
+- tapOn:
+    id: 'start_test'
+- extendedWaitUntil:
+    visible:
       id: 'Cheesecake'
-    direction: RIGHT
-    speed: 60
-    visibilityPercentage: 100
-    timeout: 120000
+    timeout: 30000
+- tapOn:
+    id: 'start_test'
 - extendedWaitUntil:
     visible:
       id: 'output'
@@ -52,14 +53,15 @@ appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebo
           visible:
             id: 'section-list-viewability-vertical-wait'
           timeout: 30000
-      - scrollUntilVisible:
-          element:
-            text: 'Brownie'
-          direction: DOWN
-          speed: 60
-          visibilityPercentage: 50
-          centerElement: true
-          timeout: 60000
+      # Same two-tap deterministic scroll as the horizontal step above.
+      - tapOn:
+          id: 'start_test'
+      - extendedWaitUntil:
+          visible:
+            id: 'Cheesecake'
+          timeout: 30000
+      - tapOn:
+          id: 'start_test'
       - extendedWaitUntil:
           visible:
             id: 'output'
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js b/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
index 69e459970f3e..e4e61698ac0d 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
@@ -25,8 +25,15 @@ export function SectionList_BaseOnViewableItemsChanged(props: {
   horizontal?: ?boolean,
   useScrollRefScroll?: ?boolean,
   waitForInteraction?: ?boolean,
+  scrollToLocationOnTest?: ?{sectionIndex: number, itemIndex: number},
 }): React.Node {
-  const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props;
+  const {
+    offScreen,
+    horizontal,
+    useScrollRefScroll,
+    waitForInteraction,
+    scrollToLocationOnTest,
+  } = props;
   const exampleTestID = `section-list-viewability-${
     horizontal === true ? 'horizontal' : 'vertical'
   }-${waitForInteraction === true ? 'wait' : 'no-wait'}`;
@@ -56,7 +63,18 @@ export function SectionList_BaseOnViewableItemsChanged(props: {
       ? () => {
           ref?.current?.getScrollResponder()?.scrollToEnd();
         }
-      : null;
+      : scrollToLocationOnTest != null
+        ? () => {
+            // Programmatic scrolls don't trigger `onScrollBeginDrag`, so latch
+            // `waitForInteraction` explicitly before scrolling.
+            ref?.current?.recordInteraction();
+            ref?.current?.scrollToLocation({
+              ...scrollToLocationOnTest,
+              viewPosition: 0.5,
+              animated: false,
+            });
+          }
+        : null;
 
   return (
     <SectionListBaseExample
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.js
index a3ad84252c13..724c26414bdd 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.js
@@ -22,6 +22,8 @@ export default {
       <SectionList_BaseOnViewableItemsChanged
         horizontal={true}
         waitForInteraction={true}
+        // Desserts section, Cheesecake item (see SectionListBaseExample DATA).
+        scrollToLocationOnTest={{sectionIndex: 3, itemIndex: 0}}
       />
     );
   },
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js
index ca5e6e2923a3..3b7f8fe1ae75 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js
@@ -17,6 +17,12 @@ export default {
   description: 'E2E Test:\nonViewableItemsChanged-waitForInteraction',
   hidden: true,
   render: function (): React.MixedElement {
-    return <SectionList_BaseOnViewableItemsChanged waitForInteraction={true} />;
+    return (
+      <SectionList_BaseOnViewableItemsChanged
+        waitForInteraction={true}
+        // Desserts section, Cheesecake item (see SectionListBaseExample DATA).
+        scrollToLocationOnTest={{sectionIndex: 3, itemIndex: 0}}
+      />
+    );
   },
 };