Add deep-link Maestro flows for RNTester lists

Summary:
Add Maestro coverage for FlatList and SectionList viewability behavior using direct RNTester example deep links. Use explicit gestures inside the virtualized lists and wait for the callback output. Add nonvisual, route-specific readiness IDs so successive deep links cannot match the previously mounted list.

Changelog: [Internal]

Differential Revision: D119484760

Author: cortinico

packages/rn-tester/.maestro/flatlist-viewability.yml

@@ -0,0 +1,48 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+- launchApp
+- extendedWaitUntil:
+    visible: 'Components'
+    timeout: 30000
+- openLink: rntester://example/FlatListExample/onViewableItemsChanged-horizontal-noWaitForInteraction
+- extendedWaitUntil:
+    visible:
+      id: 'flat-list-viewability-horizontal-no-wait'
+    timeout: 10000
+- assertVisible:
+    id: 'output'
+    text: '.*Pizza, Burger.*'
+- openLink: rntester://example/FlatListExample/onViewableItemsChanged-horizontal-waitForInteraction
+- extendedWaitUntil:
+    visible:
+      id: 'flat-list-viewability-horizontal-wait'
+    timeout: 10000
+- repeat:
+    times: 3
+    commands:
+      - swipe:
+          start: 90%, 50%
+          end: 10%, 50%
+          speed: fast
+- extendedWaitUntil:
+    visible:
+      id: 'output'
+      text: '.*Cheesecake.*'
+    timeout: 10000
+- openLink: rntester://example/FlatListExample/onViewableItemsChanged-waitForInteraction
+- extendedWaitUntil:
+    visible:
+      id: 'flat-list-viewability-vertical-wait'
+    timeout: 10000
+- repeat:
+    times: 2
+    commands:
+      - swipe:
+          start: 50%, 80%
+          end: 50%, 20%
+          speed: fast
+- extendedWaitUntil:
+    visible:
+      id: 'output'
+      text: '.*Cheesecake, Brownie.*'
+    timeout: 10000

packages/rn-tester/.maestro/sectionlist-viewability.yml

@@ -0,0 +1,62 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+- launchApp
+- extendedWaitUntil:
+    visible: 'Components'
+    timeout: 30000
+- openLink: rntester://example/SectionList/onEndReached
+- extendedWaitUntil:
+    visible:
+      id: 'start_test'
+    timeout: 10000
+- tapOn:
+    id: 'start_test'
+- assertVisible:
+    id: 'output'
+    text: 'onEndReached'
+- openLink: rntester://example/SectionList/onViewableItemsChanged-horizontal-noWaitForInteraction
+- extendedWaitUntil:
+    visible:
+      id: 'section-list-viewability-horizontal-no-wait'
+    timeout: 10000
+- assertVisible:
+    id: 'output'
+    text: '.*Pizza.*'
+- openLink: rntester://example/SectionList/onViewableItemsChanged-horizontal-waitForInteraction
+- extendedWaitUntil:
+    visible:
+      id: 'section-list-viewability-horizontal-wait'
+    timeout: 10000
+- repeat:
+    times: 3
+    commands:
+      - swipe:
+          start: 90%, 50%
+          end: 10%, 50%
+          speed: fast
+- extendedWaitUntil:
+    visible:
+      id: 'output'
+      text: '.*Cheesecake.*'
+    timeout: 10000
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - openLink: rntester://example/SectionList/onViewableItemsChanged-waitForInteraction
+      - extendedWaitUntil:
+          visible:
+            id: 'section-list-viewability-vertical-wait'
+          timeout: 10000
+      - repeat:
+          times: 3
+          commands:
+            - swipe:
+                start: 50%, 80%
+                end: 50%, 20%
+                speed: fast
+      - extendedWaitUntil:
+          visible:
+            id: 'output'
+            text: '.*Cheesecake.*'
+          timeout: 10000

packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js

@@ -61,6 +61,7 @@ const Item = ({item, separators}: ListRenderItemInfo<string>) => {
 
 type Props = Readonly<{
   exampleProps: Partial<React.ElementConfig<typeof FlatList>>,
+  exampleTestID?: ?string,
   onTest?: ?() => void,
   testLabel?: ?string,
   testOutput?: ?string,
@@ -72,7 +73,7 @@ const BaseFlatListExample: component(
   ...props: Props
 ) = ({ref, ...props}: {ref: React.RefSetter<FlatList<string>>, ...Props}) => {
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={props.exampleTestID}>
       {props.testOutput != null ? (
         <View testID="test_container" style={styles.testContainer}>
           <Text style={styles.output} numberOfLines={1} testID="output">

packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js

@@ -32,6 +32,9 @@ export function FlatList_BaseOnViewableItemsChanged(props: {
   waitForInteraction?: ?boolean,
 }): React.Node {
   const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props;
+  const exampleTestID = `flat-list-viewability-${
+    horizontal === true ? 'horizontal' : 'vertical'
+  }-${waitForInteraction === true ? 'wait' : 'no-wait'}`;
   const [output, setOutput] = useState('');
   const onViewableItemsChanged = useCallback(
     (info: {changed: Array<ViewToken>, viewableItems: Array<ViewToken>, ...}) =>
@@ -65,6 +68,7 @@ export function FlatList_BaseOnViewableItemsChanged(props: {
     <BaseFlatListExample
       ref={ref}
       exampleProps={exampleProps}
+      exampleTestID={exampleTestID}
       onTest={onTest}
       testOutput={output}>
       {offScreen === true ? <View style={styles.offScreen} /> : null}

packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js

@@ -30,6 +30,9 @@ export function SectionList_BaseOnViewableItemsChanged(props: {
   waitForInteraction?: ?boolean,
 }): React.Node {
   const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props;
+  const exampleTestID = `section-list-viewability-${
+    horizontal === true ? 'horizontal' : 'vertical'
+  }-${waitForInteraction === true ? 'wait' : 'no-wait'}`;
   const [output, setOutput] = useState('');
   const viewabilityConfig: ViewabilityConfig = {
     ...BASE_VIEWABILITY_CONFIG,
@@ -62,6 +65,7 @@ export function SectionList_BaseOnViewableItemsChanged(props: {
     <SectionListBaseExample
       ref={ref}
       exampleProps={exampleProps}
+      exampleTestID={exampleTestID}
       onTest={onTest}
       testOutput={output}>
       {offScreen === true ? <View style={styles.offScreen} /> : null}

packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js

@@ -67,6 +67,7 @@ const Item = ({item, section, separators}) => {
 type Props = Readonly<{
   // $FlowFixMe[unclear-type]
   exampleProps: Partial<React.ElementConfig<typeof SectionList<any>>>,
+  exampleTestID?: ?string,
   onTest?: ?() => void,
   testLabel?: ?string,
   testOutput?: ?string,
@@ -86,7 +87,7 @@ const SectionListBaseExample: component(
   ...Props,
 }): React.Node => {
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={props.exampleTestID}>
       {props.testOutput != null ? (
         <View testID="test_container" style={styles.testContainer}>
           <Text style={styles.output} numberOfLines={1} testID="output">