react-native/Libraries/Lists/__tests__/VirtualizedList-test.js

81 lines
2.3 KiB
JavaScript
Raw Normal View History

Fix bug - FlatList component did not render more items when content was filtered Summary: **Bug Description** The FlatList component receives content items via the data prop, and renders an initial number of items on the app's view. When a user scrolls to the end of the list, the component will append and render more available items at the end of the list. There was a bug where when the content was filtered, there were more available items but the component did not append/render them. This is due to the current appending/rendering logic in VirtualizedList, which does not account for data changes as a condition for updating/rendering. VirtualizedList is a dependency of FlatList, so this issue affects FlatList as well. **Approach to Fixing Bug** (i) Reproduce bug on iOS view of FlatList. (ii) For VirtualizedList component: # Isolate onEndReached function that appends more data to component UI. # Isolate _onContentSizeChange function that is called when list content changes. # Write snapshot tests using jest, based off existing test for FlatList. # Refactor logic to append more data to list into _maybeCallOnEndReached function. # Call _maybeCallOnEndReached in both _onContentSizeChange and _onScroll. (iii) Run snapshot tests and observe jest output. (iv) Bring up iOS view of FlatList and check that component now renders more items when content is filtered. Many thanks to sahrens for guidance in developing this code! Reviewed By: sahrens Differential Revision: D4877388 fbshipit-source-id: c10c9eef1912f491450a62b81a9bc41f7f784203
2017-04-18 01:10:39 +00:00
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*/
'use strict';
jest.disableAutomock();
const React = require('React');
const ReactTestRenderer = require('react-test-renderer');
const VirtualizedList = require('VirtualizedList');
describe('VirtualizedList', () => {
it('renders simple list', () => {
const component = ReactTestRenderer.create(
<VirtualizedList
data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
renderItem={({item}) => <item value={item.key} />}
/>
);
expect(component).toMatchSnapshot();
});
it('renders empty list', () => {
const component = ReactTestRenderer.create(
<VirtualizedList
data={[]}
renderItem={({item}) => <item value={item.key} />}
/>
);
expect(component).toMatchSnapshot();
});
it('renders null list', () => {
const component = ReactTestRenderer.create(
<VirtualizedList
data={undefined}
renderItem={({item}) => <item value={item.key} />}
/>
);
expect(component).toMatchSnapshot();
});
it('renders all the bells and whistles', () => {
const component = ReactTestRenderer.create(
<VirtualizedList
ItemSeparatorComponent={() => <separator />}
ListFooterComponent={() => <footer />}
ListHeaderComponent={() => <header />}
data={new Array(5).fill().map((_, ii) => ({id: String(ii)}))}
keyExtractor={(item, index) => item.id}
getItemLayout={({index}) => ({length: 50, offset: index * 50})}
numColumns={2}
refreshing={false}
onRefresh={jest.fn()}
renderItem={({item}) => <item value={item.id} />}
/>
);
expect(component).toMatchSnapshot();
});
it('test getItem functionality where data is not an Array', () => {
const component = ReactTestRenderer.create(
<VirtualizedList
data={new Map([['id_0', {key: 'item_0'}]])}
getItem={(data, index) => data.get('id_' + index)}
getItemCount={(data: Map) => data.size}
renderItem={({item}) => <item value={item.key} />}
/>
);
expect(component).toMatchSnapshot();
});
});