From fb0a7edd6cd62e845c8a9b71c036d65bb522efa1 Mon Sep 17 00:00:00 2001
From: Kacie Bawiec <kacieb@fb.com>
Date: Wed, 3 Mar 2021 15:31:30 -0800
Subject: [PATCH] Add scroll buttons to invertStickyHeaders ScrollView test

Summary:
This diff adds buttons to scroll to top and scroll to end to the invertStickyHeaders ScrollView test. This will allow programmatic scrolling to test sticky header behavior in end-to-end tests.

NOTE: This prop doesn't seem to work at all to invert the sticky header.

NOTE: There is also a bug where on first render, the sticky header does not "stick" correctly. My diff has not changed this and it seems to be a JS issue - I will investigate in another diff.

Changelog:
[General][Added] Added scroll buttons to invertStickyHeaders ScrollView test

Reviewed By: nadiia

Differential Revision: D26735461

fbshipit-source-id: 66db39ab9c9dbc9c62f50c5ff56db67a829f6db8
---
 .../examples/ScrollView/ScrollViewExample.js  | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index f45d30538cf..ab0170176e4 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -197,6 +197,7 @@ exports.examples = ([
     },
   },
   {
+    name: 'invertStickyHeaders',
     title: '<ScrollView> Invert Sticky Headers\n',
     description:
       'If sticky headers should stick at the bottom instead of the top of the ScrollView. This is usually used with inverted ScrollViews.',
@@ -904,13 +905,16 @@ const KeyboardExample = () => {
 
 const InvertStickyHeaders = () => {
   const [invertStickyHeaders, setInvertStickyHeaders] = useState(false);
+  const _scrollView = React.useRef<?React.ElementRef<typeof ScrollView>>(null);
   return (
     <View>
       <ScrollView
+        ref={_scrollView}
         style={[styles.scrollView, {height: 200}]}
         stickyHeaderIndices={[0]}
         invertStickyHeaders={invertStickyHeaders}
-        nestedScrollEnabled>
+        nestedScrollEnabled
+        testID="scroll_sticky_header">
         {<Text>STICKY HEADER</Text>}
         {ITEMS.map(createItemRow)}
       </ScrollView>
@@ -918,6 +922,20 @@ const InvertStickyHeaders = () => {
         onPress={() => setInvertStickyHeaders(!invertStickyHeaders)}
         label={'invertStickyHeaders: ' + invertStickyHeaders.toString()}
       />
+      <Button
+        label="Scroll to top"
+        onPress={() => {
+          nullthrows(_scrollView.current).scrollTo({y: 0});
+        }}
+        testID="scroll_to_top_button"
+      />
+      <Button
+        label="Scroll to bottom"
+        onPress={() => {
+          nullthrows(_scrollView.current).scrollToEnd({animated: true});
+        }}
+        testID="scroll_to_bottom_button"
+      />
     </View>
   );
 };