Scroll SectionList viewability E2E to its target deterministically

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'

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

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}}
       />
     );
   },

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}}
+      />
+    );
   },
 };