microsoft
/
react-native-macos
зеркало из https://github.com/microsoft/react-native-macos.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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
This commit is contained in:
Nick Gerleman 2021-03-10 17:07:24 -08:00 коммит произвёл Facebook GitHub Bot
Родитель 035718ba97
Коммит 4fb9e2f6a3
2 изменённых файлов: 779 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

159
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();
});
});

620
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]}