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