From 4fb9e2f6a39bdbf79459ca424c98023ab3091078 Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@microsoft.com>
Date: Wed, 10 Mar 2021 17:07:24 -0800
Subject: [PATCH] Add tests describing current sticky header realization
 behavior (#31075)

Summary:
See https://github.com/react-native-community/discussions-and-proposals/pull/335 for extra context.

A VirtualizedList may have sticky headers, forwarded on to ScrollView. These sticky headers are exempt from virtualization once realized for the first time. This change documents the behavior of keeping sticky header cells realized after scrolling away.

This scenario performs the same behavior as creating an internal "realization window" for sticky headers with a single cell window size. Generalizing the concept of realization windows should be shaped to support the existing sticky header scenario.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Internal] [Added] - Add tests describing current sticky header realization behavior

Pull Request resolved: https://github.com/facebook/react-native/pull/31075

Reviewed By: lunaleaps

Differential Revision: D26767582

Pulled By: appden

fbshipit-source-id: 0d151bd6046fcb5384c646205aafa1ca7edf6c77
---
 .../Lists/__tests__/VirtualizedList-test.js   | 159 +++++
 .../VirtualizedList-test.js.snap              | 620 ++++++++++++++++++
 2 files changed, 779 insertions(+)

diff --git a/Libraries/Lists/__tests__/VirtualizedList-test.js b/Libraries/Lists/__tests__/VirtualizedList-test.js
index 271fad276fe..260a592fe4f 100644
--- a/Libraries/Lists/__tests__/VirtualizedList-test.js
+++ b/Libraries/Lists/__tests__/VirtualizedList-test.js
@@ -504,4 +504,163 @@ describe('VirtualizedList', () => {
       'scrollToIndex out of range: requested index 3 is out of 0 to 2',
     );
   });
+
+  it('forwards correct stickyHeaderIndices when all in initial render window', () => {
+    const items = Array(10)
+      .fill()
+      .map((_, i) => (i % 3 === 0 ? {key: i, sticky: true} : {key: i}));
+    const stickyIndices = items
+      .filter(item => item.sticky)
+      .map(item => item.key);
+
+    const ITEM_HEIGHT = 10;
+
+    const component = ReactTestRenderer.create(
+      <VirtualizedList
+        data={items}
+        stickyHeaderIndices={stickyIndices}
+        initialNumToRender={10}
+        renderItem={({item}) => <item value={item.key} sticky={item.sticky} />}
+        getItem={(data, index) => data[index]}
+        getItemCount={data => data.length}
+        getItemLayout={(_, index) => ({
+          length: ITEM_HEIGHT,
+          offset: ITEM_HEIGHT * index,
+          index,
+        })}
+      />,
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('forwards correct stickyHeaderIndices when partially in initial render window', () => {
+    const items = Array(10)
+      .fill()
+      .map((_, i) => (i % 3 === 0 ? {key: i, sticky: true} : {key: i}));
+    const stickyIndices = items
+      .filter(item => item.sticky)
+      .map(item => item.key);
+
+    const ITEM_HEIGHT = 10;
+
+    const component = ReactTestRenderer.create(
+      <VirtualizedList
+        data={items}
+        stickyHeaderIndices={stickyIndices}
+        initialNumToRender={5}
+        renderItem={({item}) => <item value={item.key} sticky={item.sticky} />}
+        getItem={(data, index) => data[index]}
+        getItemCount={data => data.length}
+        getItemLayout={(_, index) => ({
+          length: ITEM_HEIGHT,
+          offset: ITEM_HEIGHT * index,
+          index,
+        })}
+      />,
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('realizes sticky headers in viewport on batched render', () => {
+    const items = Array(10)
+      .fill()
+      .map((_, i) => (i % 3 === 0 ? {key: i, sticky: true} : {key: i}));
+    const stickyIndices = items
+      .filter(item => item.sticky)
+      .map(item => item.key);
+
+    const ITEM_HEIGHT = 10;
+
+    const virtualizedListProps = {
+      data: items,
+      stickyHeaderIndices: stickyIndices,
+      initialNumToRender: 1,
+      windowSize: 1,
+      renderItem: ({item}) => <item value={item.key} sticky={item.sticky} />,
+      getItem: (data, index) => data[index],
+      getItemCount: data => data.length,
+      getItemLayout: (_, index) => ({
+        length: ITEM_HEIGHT,
+        offset: ITEM_HEIGHT * index,
+        index,
+      }),
+    };
+
+    let component;
+
+    ReactTestRenderer.act(() => {
+      component = ReactTestRenderer.create(
+        <VirtualizedList key={'A'} {...virtualizedListProps} />,
+      );
+    });
+
+    ReactTestRenderer.act(() => {
+      component
+        .getInstance()
+        ._onLayout({nativeEvent: {layout: {width: 10, height: 50}}});
+      component.getInstance()._onContentSizeChange(10, 100);
+      jest.runAllTimers();
+    });
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('keeps sticky headers realized after scrolled out of viewport', () => {
+    const items = Array(20)
+      .fill()
+      .map((_, i) =>
+        i % 3 === 0 ? {key: i, sticky: true} : {key: i, sticky: false},
+      );
+    const stickyIndices = items
+      .filter(item => item.sticky)
+      .map(item => item.key);
+
+    const ITEM_HEIGHT = 10;
+
+    const virtualizedListProps = {
+      data: items,
+      stickyHeaderIndices: stickyIndices,
+      initialNumToRender: 1,
+      windowSize: 1,
+      renderItem: ({item}) => <item value={item.key} sticky={item.sticky} />,
+      getItem: (data, index) => data[index],
+      getItemCount: data => data.length,
+      getItemLayout: (_, index) => ({
+        length: ITEM_HEIGHT,
+        offset: ITEM_HEIGHT * index,
+        index,
+      }),
+    };
+
+    let component;
+
+    ReactTestRenderer.act(() => {
+      component = ReactTestRenderer.create(
+        <VirtualizedList key={'A'} {...virtualizedListProps} />,
+      );
+    });
+
+    ReactTestRenderer.act(() => {
+      component
+        .getInstance()
+        ._onLayout({nativeEvent: {layout: {width: 10, height: 50}}});
+      component.getInstance()._onContentSizeChange(10, 200);
+      jest.runAllTimers();
+    });
+
+    ReactTestRenderer.act(() => {
+      component.getInstance()._onScroll({
+        nativeEvent: {
+          contentOffset: {x: 0, y: 150},
+          contentSize: {width: 10, height: 200},
+          layoutMeasurement: {width: 10, height: 50},
+        },
+      });
+      jest.runAllTimers();
+    });
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
index c666835c3fd..1acb634d611 100644
--- a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
+++ b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
@@ -1,5 +1,269 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VirtualizedList forwards correct stickyHeaderIndices when all in initial render window 1`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "key": 0,
+        "sticky": true,
+      },
+      Object {
+        "key": 1,
+      },
+      Object {
+        "key": 2,
+      },
+      Object {
+        "key": 3,
+        "sticky": true,
+      },
+      Object {
+        "key": 4,
+      },
+      Object {
+        "key": 5,
+      },
+      Object {
+        "key": 6,
+        "sticky": true,
+      },
+      Object {
+        "key": 7,
+      },
+      Object {
+        "key": 8,
+      },
+      Object {
+        "key": 9,
+        "sticky": true,
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollBegin={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={
+    Array [
+      0,
+      3,
+      6,
+      9,
+    ]
+  }
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={0}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={1}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={2}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={3}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={4}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={5}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={6}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={7}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={8}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={9}
+      />
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedList forwards correct stickyHeaderIndices when partially in initial render window 1`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "key": 0,
+        "sticky": true,
+      },
+      Object {
+        "key": 1,
+      },
+      Object {
+        "key": 2,
+      },
+      Object {
+        "key": 3,
+        "sticky": true,
+      },
+      Object {
+        "key": 4,
+      },
+      Object {
+        "key": 5,
+      },
+      Object {
+        "key": 6,
+        "sticky": true,
+      },
+      Object {
+        "key": 7,
+      },
+      Object {
+        "key": 8,
+      },
+      Object {
+        "key": 9,
+        "sticky": true,
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={false}
+  initialNumToRender={5}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollBegin={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={
+    Array [
+      0,
+      3,
+    ]
+  }
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={0}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={1}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={2}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={3}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={4}
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "height": 50,
+        }
+      }
+    />
+  </View>
+</RCTScrollView>
+`;
+
 exports[`VirtualizedList handles nested lists 1`] = `
 <RCTScrollView
   data={
@@ -409,6 +673,362 @@ exports[`VirtualizedList handles separators correctly 3`] = `
 </RCTScrollView>
 `;
 
+exports[`VirtualizedList keeps sticky headers realized after scrolled out of viewport 1`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "key": 0,
+        "sticky": true,
+      },
+      Object {
+        "key": 1,
+        "sticky": false,
+      },
+      Object {
+        "key": 2,
+        "sticky": false,
+      },
+      Object {
+        "key": 3,
+        "sticky": true,
+      },
+      Object {
+        "key": 4,
+        "sticky": false,
+      },
+      Object {
+        "key": 5,
+        "sticky": false,
+      },
+      Object {
+        "key": 6,
+        "sticky": true,
+      },
+      Object {
+        "key": 7,
+        "sticky": false,
+      },
+      Object {
+        "key": 8,
+        "sticky": false,
+      },
+      Object {
+        "key": 9,
+        "sticky": true,
+      },
+      Object {
+        "key": 10,
+        "sticky": false,
+      },
+      Object {
+        "key": 11,
+        "sticky": false,
+      },
+      Object {
+        "key": 12,
+        "sticky": true,
+      },
+      Object {
+        "key": 13,
+        "sticky": false,
+      },
+      Object {
+        "key": 14,
+        "sticky": false,
+      },
+      Object {
+        "key": 15,
+        "sticky": true,
+      },
+      Object {
+        "key": 16,
+        "sticky": false,
+      },
+      Object {
+        "key": 17,
+        "sticky": false,
+      },
+      Object {
+        "key": 18,
+        "sticky": true,
+      },
+      Object {
+        "key": 19,
+        "sticky": false,
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={false}
+  initialNumToRender={1}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollBegin={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={
+    Array [
+      0,
+      2,
+      4,
+      7,
+      10,
+      13,
+    ]
+  }
+  updateCellsBatchingPeriod={50}
+  windowSize={1}
+>
+  <View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={0}
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "height": 50,
+        }
+      }
+    />
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={6}
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "height": 20,
+        }
+      }
+    />
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={9}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={false}
+        value={10}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={false}
+        value={11}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={12}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={false}
+        value={13}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={false}
+        value={14}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={15}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={false}
+        value={16}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={false}
+        value={17}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={18}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={false}
+        value={19}
+      />
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedList realizes sticky headers in viewport on batched render 1`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "key": 0,
+        "sticky": true,
+      },
+      Object {
+        "key": 1,
+      },
+      Object {
+        "key": 2,
+      },
+      Object {
+        "key": 3,
+        "sticky": true,
+      },
+      Object {
+        "key": 4,
+      },
+      Object {
+        "key": 5,
+      },
+      Object {
+        "key": 6,
+        "sticky": true,
+      },
+      Object {
+        "key": 7,
+      },
+      Object {
+        "key": 8,
+      },
+      Object {
+        "key": 9,
+        "sticky": true,
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={false}
+  initialNumToRender={1}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollBegin={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={
+    Array [
+      0,
+      3,
+    ]
+  }
+  updateCellsBatchingPeriod={50}
+  windowSize={1}
+>
+  <View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={0}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={1}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={2}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        sticky={true}
+        value={3}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <item
+        value={4}
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "height": 50,
+        }
+      }
+    />
+  </View>
+</RCTScrollView>
+`;
+
 exports[`VirtualizedList renders all the bells and whistles 1`] = `
 <RCTScrollView
   ItemSeparatorComponent={[Function]}