mirror of
https://github.com/status-im/react-native.git
synced 2025-02-28 17:10:50 +00:00
3e7aa5f14e
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
81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
/**
|
|
* 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();
|
|
});
|
|
});
|