Skip to content

Commit 5e1c4d4

Browse files
NickGerlemanfacebook-github-bot
NickGerleman
authored and
facebook-github-bot
committed
Add VirtualizedList tests for handling non-zero initialScrollIndex before 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
1 parent 5745c1d commit 5e1c4d4

File tree

3 files changed

+678
-0
lines changed

3 files changed

+678
-0
lines changed

‎Libraries/Lists/__tests__/VirtualizedList-test.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1113,6 +1113,80 @@ it('does not adjust render area until content area layed out', () => {
11131113
expect(component).toMatchSnapshot();
11141114
});
11151115

1116+
it('does not move render area when initialScrollIndex is > 0 and offset not yet known', () => {
1117+
const items = generateItems(20);
1118+
const ITEM_HEIGHT = 10;
1119+
1120+
let component;
1121+
1122+
ReactTestRenderer.act(() => {
1123+
component = ReactTestRenderer.create(
1124+
<VirtualizedList
1125+
initialNumToRender={5}
1126+
initialScrollIndex={1}
1127+
windowSize={10}
1128+
{...baseItemProps(items)}
1129+
{...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
1130+
/>,
1131+
);
1132+
});
1133+
1134+
ReactTestRenderer.act(() => {
1135+
simulateLayout(component, {
1136+
viewport: {width: 10, height: 50},
1137+
content: {width: 10, height: 100},
1138+
});
1139+
performAllBatches();
1140+
});
1141+
1142+
// 5 cells should be present starting at index 1, since we have not seen a
1143+
// scroll event yet for current position.
1144+
expect(component).toMatchSnapshot();
1145+
});
1146+
1147+
it('clamps render area when items removed for initialScrollIndex > 0 and scroller position not yet known', () => {
1148+
const items = generateItems(20);
1149+
const lessItems = generateItems(15);
1150+
const ITEM_HEIGHT = 10;
1151+
1152+
let component;
1153+
1154+
ReactTestRenderer.act(() => {
1155+
component = ReactTestRenderer.create(
1156+
<VirtualizedList
1157+
initialNumToRender={5}
1158+
initialScrollIndex={14}
1159+
windowSize={10}
1160+
{...baseItemProps(items)}
1161+
{...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
1162+
/>,
1163+
);
1164+
});
1165+
1166+
ReactTestRenderer.act(() => {
1167+
component.update(
1168+
<VirtualizedList
1169+
initialNumToRender={5}
1170+
initialScrollIndex={14}
1171+
windowSize={10}
1172+
{...baseItemProps(lessItems)}
1173+
{...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
1174+
/>,
1175+
);
1176+
});
1177+
1178+
ReactTestRenderer.act(() => {
1179+
simulateLayout(component, {
1180+
viewport: {width: 10, height: 50},
1181+
content: {width: 10, height: 100},
1182+
});
1183+
performAllBatches();
1184+
});
1185+
1186+
// The initial render range should be adjusted to not overflow the list
1187+
expect(component).toMatchSnapshot();
1188+
});
1189+
11161190
it('adjusts render area with non-zero initialScrollIndex', () => {
11171191
const items = generateItems(20);
11181192
const ITEM_HEIGHT = 10;

‎Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1829,6 +1829,163 @@ exports[`adjusts render area with non-zero initialScrollIndex 1`] = `
18291829
</RCTScrollView>
18301830
`;
18311831

1832+
exports[`clamps render area when items removed for initialScrollIndex > 0 and scroller position not yet known 1`] = `
1833+
<RCTScrollView
1834+
data={
1835+
Array [
1836+
Object {
1837+
"key": 0,
1838+
},
1839+
Object {
1840+
"key": 1,
1841+
},
1842+
Object {
1843+
"key": 2,
1844+
},
1845+
Object {
1846+
"key": 3,
1847+
},
1848+
Object {
1849+
"key": 4,
1850+
},
1851+
Object {
1852+
"key": 5,
1853+
},
1854+
Object {
1855+
"key": 6,
1856+
},
1857+
Object {
1858+
"key": 7,
1859+
},
1860+
Object {
1861+
"key": 8,
1862+
},
1863+
Object {
1864+
"key": 9,
1865+
},
1866+
Object {
1867+
"key": 10,
1868+
},
1869+
Object {
1870+
"key": 11,
1871+
},
1872+
Object {
1873+
"key": 12,
1874+
},
1875+
Object {
1876+
"key": 13,
1877+
},
1878+
Object {
1879+
"key": 14,
1880+
},
1881+
]
1882+
}
1883+
getItem={[Function]}
1884+
getItemCount={[Function]}
1885+
getItemLayout={[Function]}
1886+
initialNumToRender={5}
1887+
initialScrollIndex={14}
1888+
onContentSizeChange={[Function]}
1889+
onLayout={[Function]}
1890+
onMomentumScrollBegin={[Function]}
1891+
onMomentumScrollEnd={[Function]}
1892+
onScroll={[Function]}
1893+
onScrollBeginDrag={[Function]}
1894+
onScrollEndDrag={[Function]}
1895+
renderItem={[Function]}
1896+
scrollEventThrottle={50}
1897+
stickyHeaderIndices={Array []}
1898+
windowSize={10}
1899+
>
1900+
<View>
1901+
<View
1902+
style={
1903+
Object {
1904+
"height": 40,
1905+
}
1906+
}
1907+
/>
1908+
<View
1909+
style={null}
1910+
>
1911+
<MockCellItem
1912+
value={4}
1913+
/>
1914+
</View>
1915+
<View
1916+
style={null}
1917+
>
1918+
<MockCellItem
1919+
value={5}
1920+
/>
1921+
</View>
1922+
<View
1923+
style={null}
1924+
>
1925+
<MockCellItem
1926+
value={6}
1927+
/>
1928+
</View>
1929+
<View
1930+
style={null}
1931+
>
1932+
<MockCellItem
1933+
value={7}
1934+
/>
1935+
</View>
1936+
<View
1937+
style={null}
1938+
>
1939+
<MockCellItem
1940+
value={8}
1941+
/>
1942+
</View>
1943+
<View
1944+
style={null}
1945+
>
1946+
<MockCellItem
1947+
value={9}
1948+
/>
1949+
</View>
1950+
<View
1951+
style={null}
1952+
>
1953+
<MockCellItem
1954+
value={10}
1955+
/>
1956+
</View>
1957+
<View
1958+
style={null}
1959+
>
1960+
<MockCellItem
1961+
value={11}
1962+
/>
1963+
</View>
1964+
<View
1965+
style={null}
1966+
>
1967+
<MockCellItem
1968+
value={12}
1969+
/>
1970+
</View>
1971+
<View
1972+
style={null}
1973+
>
1974+
<MockCellItem
1975+
value={13}
1976+
/>
1977+
</View>
1978+
<View
1979+
style={null}
1980+
>
1981+
<MockCellItem
1982+
value={14}
1983+
/>
1984+
</View>
1985+
</View>
1986+
</RCTScrollView>
1987+
`;
1988+
18321989
exports[`constrains batch render region when an item is removed 1`] = `
18331990
<RCTScrollView
18341991
data={
@@ -2207,6 +2364,143 @@ exports[`does not adjust render area until content area layed out 1`] = `
22072364
</RCTScrollView>
22082365
`;
22092366

2367+
exports[`does not move render area when initialScrollIndex is > 0 and offset not yet known 1`] = `
2368+
<RCTScrollView
2369+
data={
2370+
Array [
2371+
Object {
2372+
"key": 0,
2373+
},
2374+
Object {
2375+
"key": 1,
2376+
},
2377+
Object {
2378+
"key": 2,
2379+
},
2380+
Object {
2381+
"key": 3,
2382+
},
2383+
Object {
2384+
"key": 4,
2385+
},
2386+
Object {
2387+
"key": 5,
2388+
},
2389+
Object {
2390+
"key": 6,
2391+
},
2392+
Object {
2393+
"key": 7,
2394+
},
2395+
Object {
2396+
"key": 8,
2397+
},
2398+
Object {
2399+
"key": 9,
2400+
},
2401+
Object {
2402+
"key": 10,
2403+
},
2404+
Object {
2405+
"key": 11,
2406+
},
2407+
Object {
2408+
"key": 12,
2409+
},
2410+
Object {
2411+
"key": 13,
2412+
},
2413+
Object {
2414+
"key": 14,
2415+
},
2416+
Object {
2417+
"key": 15,
2418+
},
2419+
Object {
2420+
"key": 16,
2421+
},
2422+
Object {
2423+
"key": 17,
2424+
},
2425+
Object {
2426+
"key": 18,
2427+
},
2428+
Object {
2429+
"key": 19,
2430+
},
2431+
]
2432+
}
2433+
getItem={[Function]}
2434+
getItemCount={[Function]}
2435+
getItemLayout={[Function]}
2436+
initialNumToRender={5}
2437+
initialScrollIndex={1}
2438+
onContentSizeChange={[Function]}
2439+
onLayout={[Function]}
2440+
onMomentumScrollBegin={[Function]}
2441+
onMomentumScrollEnd={[Function]}
2442+
onScroll={[Function]}
2443+
onScrollBeginDrag={[Function]}
2444+
onScrollEndDrag={[Function]}
2445+
renderItem={[Function]}
2446+
scrollEventThrottle={50}
2447+
stickyHeaderIndices={Array []}
2448+
windowSize={10}
2449+
>
2450+
<View>
2451+
<View
2452+
style={
2453+
Object {
2454+
"height": 10,
2455+
}
2456+
}
2457+
/>
2458+
<View
2459+
style={null}
2460+
>
2461+
<MockCellItem
2462+
value={1}
2463+
/>
2464+
</View>
2465+
<View
2466+
style={null}
2467+
>
2468+
<MockCellItem
2469+
value={2}
2470+
/>
2471+
</View>
2472+
<View
2473+
style={null}
2474+
>
2475+
<MockCellItem
2476+
value={3}
2477+
/>
2478+
</View>
2479+
<View
2480+
style={null}
2481+
>
2482+
<MockCellItem
2483+
value={4}
2484+
/>
2485+
</View>
2486+
<View
2487+
style={null}
2488+
>
2489+
<MockCellItem
2490+
value={5}
2491+
/>
2492+
</View>
2493+
<View
2494+
style={
2495+
Object {
2496+
"height": 140,
2497+
}
2498+
}
2499+
/>
2500+
</View>
2501+
</RCTScrollView>
2502+
`;
2503+
22102504
exports[`does not over-render when there is less than initialNumToRender cells 1`] = `
22112505
<RCTScrollView
22122506
data={

0 commit comments

Comments
 (0)