Skip to content

Commit

Permalink
Add VirtualizedList tests for handling non-zero initialScrollIndex be…
Browse files Browse the repository at this point in the history 
…fore scroll metrics

Summary:
This adds a a couple of tests to run existing behavior where VirtualizedList avoids batched renders until it has seen scroll metrics when the list is not initialized to the zero position.

Changelog:
[Internal][Added] - Add VirtualizedList tests for handling non-zero initialScrollIndex before scroll metrics

Reviewed By: yungsters

Differential Revision: D39247250

fbshipit-source-id: 530f58f9c7421949c388048c376fc5b0ab7835d9
  • Loading branch information
@NickGerleman @facebook-github-bot
NickGerleman authored and facebook-github-bot committed Sep 9, 2022
1 parent 5745c1d commit 5e1c4d4
Show file tree
Hide file tree
Showing 3 changed files with 678 additions and 0 deletions.
74 changes: 74 additions & 0 deletions Libraries/Lists/__tests__/VirtualizedList-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1113,6 +1113,80 @@ it('does not adjust render area until content area layed out', () => {
expect(component).toMatchSnapshot();
});

it('does not move render area when initialScrollIndex is > 0 and offset not yet known', () => {
const items = generateItems(20);
const ITEM_HEIGHT = 10;

let component;

ReactTestRenderer.act(() => {
component = ReactTestRenderer.create(
<VirtualizedList
initialNumToRender={5}
initialScrollIndex={1}
windowSize={10}
{...baseItemProps(items)}
{...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
/>,
);
});

ReactTestRenderer.act(() => {
simulateLayout(component, {
viewport: {width: 10, height: 50},
content: {width: 10, height: 100},
});
performAllBatches();
});

// 5 cells should be present starting at index 1, since we have not seen a
// scroll event yet for current position.
expect(component).toMatchSnapshot();
});

it('clamps render area when items removed for initialScrollIndex > 0 and scroller position not yet known', () => {
const items = generateItems(20);
const lessItems = generateItems(15);
const ITEM_HEIGHT = 10;

let component;

ReactTestRenderer.act(() => {
component = ReactTestRenderer.create(
<VirtualizedList
initialNumToRender={5}
initialScrollIndex={14}
windowSize={10}
{...baseItemProps(items)}
{...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
/>,
);
});

ReactTestRenderer.act(() => {
component.update(
<VirtualizedList
initialNumToRender={5}
initialScrollIndex={14}
windowSize={10}
{...baseItemProps(lessItems)}
{...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
/>,
);
});

ReactTestRenderer.act(() => {
simulateLayout(component, {
viewport: {width: 10, height: 50},
content: {width: 10, height: 100},
});
performAllBatches();
});

// The initial render range should be adjusted to not overflow the list
expect(component).toMatchSnapshot();
});

it('adjusts render area with non-zero initialScrollIndex', () => {
const items = generateItems(20);
const ITEM_HEIGHT = 10;
Expand Down
294 changes: 294 additions & 0 deletions Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1829,6 +1829,163 @@ exports[`adjusts render area with non-zero initialScrollIndex 1`] = `
</RCTScrollView>
`;

exports[`clamps render area when items removed for initialScrollIndex > 0 and scroller position not yet known 1`] = `
<RCTScrollView
data={
Array [
Object {
"key": 0,
},
Object {
"key": 1,
},
Object {
"key": 2,
},
Object {
"key": 3,
},
Object {
"key": 4,
},
Object {
"key": 5,
},
Object {
"key": 6,
},
Object {
"key": 7,
},
Object {
"key": 8,
},
Object {
"key": 9,
},
Object {
"key": 10,
},
Object {
"key": 11,
},
Object {
"key": 12,
},
Object {
"key": 13,
},
Object {
"key": 14,
},
]
}
getItem={[Function]}
getItemCount={[Function]}
getItemLayout={[Function]}
initialNumToRender={5}
initialScrollIndex={14}
onContentSizeChange={[Function]}
onLayout={[Function]}
onMomentumScrollBegin={[Function]}
onMomentumScrollEnd={[Function]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
renderItem={[Function]}
scrollEventThrottle={50}
stickyHeaderIndices={Array []}
windowSize={10}
>
<View>
<View
style={
Object {
"height": 40,
}
}
/>
<View
style={null}
>
<MockCellItem
value={4}
/>
</View>
<View
style={null}
>
<MockCellItem
value={5}
/>
</View>
<View
style={null}
>
<MockCellItem
value={6}
/>
</View>
<View
style={null}
>
<MockCellItem
value={7}
/>
</View>
<View
style={null}
>
<MockCellItem
value={8}
/>
</View>
<View
style={null}
>
<MockCellItem
value={9}
/>
</View>
<View
style={null}
>
<MockCellItem
value={10}
/>
</View>
<View
style={null}
>
<MockCellItem
value={11}
/>
</View>
<View
style={null}
>
<MockCellItem
value={12}
/>
</View>
<View
style={null}
>
<MockCellItem
value={13}
/>
</View>
<View
style={null}
>
<MockCellItem
value={14}
/>
</View>
</View>
</RCTScrollView>
`;

exports[`constrains batch render region when an item is removed 1`] = `
<RCTScrollView
data={
Expand Down Expand Up @@ -2207,6 +2364,143 @@ exports[`does not adjust render area until content area layed out 1`] = `
</RCTScrollView>
`;

exports[`does not move render area when initialScrollIndex is > 0 and offset not yet known 1`] = `
<RCTScrollView
data={
Array [
Object {
"key": 0,
},
Object {
"key": 1,
},
Object {
"key": 2,
},
Object {
"key": 3,
},
Object {
"key": 4,
},
Object {
"key": 5,
},
Object {
"key": 6,
},
Object {
"key": 7,
},
Object {
"key": 8,
},
Object {
"key": 9,
},
Object {
"key": 10,
},
Object {
"key": 11,
},
Object {
"key": 12,
},
Object {
"key": 13,
},
Object {
"key": 14,
},
Object {
"key": 15,
},
Object {
"key": 16,
},
Object {
"key": 17,
},
Object {
"key": 18,
},
Object {
"key": 19,
},
]
}
getItem={[Function]}
getItemCount={[Function]}
getItemLayout={[Function]}
initialNumToRender={5}
initialScrollIndex={1}
onContentSizeChange={[Function]}
onLayout={[Function]}
onMomentumScrollBegin={[Function]}
onMomentumScrollEnd={[Function]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
renderItem={[Function]}
scrollEventThrottle={50}
stickyHeaderIndices={Array []}
windowSize={10}
>
<View>
<View
style={
Object {
"height": 10,
}
}
/>
<View
style={null}
>
<MockCellItem
value={1}
/>
</View>
<View
style={null}
>
<MockCellItem
value={2}
/>
</View>
<View
style={null}
>
<MockCellItem
value={3}
/>
</View>
<View
style={null}
>
<MockCellItem
value={4}
/>
</View>
<View
style={null}
>
<MockCellItem
value={5}
/>
</View>
<View
style={
Object {
"height": 140,
}
}
/>
</View>
</RCTScrollView>
`;

exports[`does not over-render when there is less than initialNumToRender cells 1`] = `
<RCTScrollView
data={
Expand Down
Loading

0 comments on commit 5e1c4d4

Please sign in to comment.