fix: add load more functionallity to virtualized list (#1490)

src/components/List/List.tsx

@@ -2,26 +2,26 @@
 
 import isEqual from 'lodash/isEqual';
 import isObject from 'lodash/isObject';
-import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
 import type {
     DraggableProvided,
     DraggableRubric,
     DraggableStateSnapshot,
     DropResult,
     DroppableProvided,
 } from 'react-beautiful-dnd';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
 import type {Size} from 'react-virtualized-auto-sizer';
-import {VariableSizeList} from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import type {VariableSizeListProps} from 'react-window';
+import {VariableSizeList} from 'react-window';
 
-import {SelectLoadingIndicator} from '../Select/components/SelectList/SelectLoadingIndicator';
 import {TextInput} from '../controls';
 import {MobileContext} from '../mobile';
 import {useDirection} from '../theme';
 import {block} from '../utils/cn';
 import {getUniqId} from '../utils/common';
 
+import {ListLoadingIndicator} from './ListLoadingIndicator';
 import {ListItem, SimpleContainer, defaultRenderItem} from './components';
 import {listNavigationIgnoredKeys} from './constants';
 import type {ListItemData, ListItemProps, ListProps} from './types';
@@ -97,7 +97,7 @@
     };
 
     refFilter = React.createRef<HTMLInputElement>();
     refContainer = React.createRef<any>();
     blurTimer: ReturnType<typeof setTimeout> | null = null;
     loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: false} as unknown as ListItemData<
         T & {value: string}
@@ -215,11 +215,11 @@
                 break;
             }
             case 'PageDown': {
                 this.handleKeyMove(event, pageSize!);
                 break;
             }
             case 'PageUp': {
                 this.handleKeyMove(event, -pageSize!);
                 break;
             }
             case 'Home': {
@@ -260,9 +260,7 @@
         const {onLoadMore} = this.props;
 
         if (isObject(item) && 'value' in item && item.value === this.loadingItem.value) {
-            return (
-                <SelectLoadingIndicator onIntersect={itemIndex === 0 ? undefined : onLoadMore} />
-            );
+            return <ListLoadingIndicator onIntersect={itemIndex === 0 ? undefined : onLoadMore} />;
         }
 
         return this.props.renderItem
@@ -421,7 +419,7 @@
 
     private renderVirtualizedContainer() {
         // Otherwise, react-window will not update the list items
-        const items = [...this.getItems()];
+        const items = [...this.getItemsWithLoading()];
 
         if (this.props.sortable) {
             return (

src/components/List/ListLoadingIndicator.tsx

@@ -5,14 +5,14 @@ import {Loader} from '../Loader';
 import {block} from '../utils/cn';
 
 const b = block('list');
-export const SelectLoadingIndicator = (props: {onIntersect?: () => void}) => {
+export const ListLoadingIndicator = (props: {onIntersect?: () => void}) => {
     const ref = React.useRef<HTMLDivElement | null>(null);
 
     useIntersection({element: ref.current, onIntersect: props?.onIntersect});
 
     return (
         <div ref={ref} className={b('loading-indicator')}>
-            <Loader />
+            <Loader qa={'list-loader'} />
         </div>
     );
 };

src/components/List/__tests__/List.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import _ from 'react-virtualized-auto-sizer';
+
+import {setupIntersectionObserverMock} from '../../../../test-utils/setupIntersectionObserverMock';
+import {cleanup, render, screen} from '../../../../test-utils/utils';
+import {List} from '../List';
+import type {ListProps} from '../types';
+
+function setup(props: Partial<ListProps<string>> = {}) {
+    const baseProps: ListProps<string> = {
+        items: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'],
+        itemsHeight: 150,
+        itemHeight: 28,
+        filterable: false,
+    };
+
+    return render(
+        <div>
+            <List<string> {...baseProps} {...props} />
+        </div>,
+    );
+}
+
+const mockOnLoadMorFn = jest.fn();
+
+beforeAll(() => {
+    setupIntersectionObserverMock();
+});
+
+afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+});
+
+describe('base List', () => {
+    it('should render loading indicator', () => {
+        setup({virtualized: false, onLoadMore: mockOnLoadMorFn, loading: true});
+
+        const loader = screen.getByTestId('list-loader');
+        expect(loader).toBeInTheDocument();
+    });
+    it('should call onLoadMore callback when loading indicator is visible', () => {
+        setup({virtualized: false, onLoadMore: mockOnLoadMorFn, loading: true});
+
+        const loader = screen.getByTestId('list-loader');
+
+        expect(loader).toBeVisible();
+        expect(mockOnLoadMorFn).toHaveBeenCalled();
+    });
+});
+
+describe('virtualized List', () => {
+    it('should render loading indicator', () => {
+        setup({virtualized: true, onLoadMore: mockOnLoadMorFn, loading: true});
+
+        const loader = screen.getByTestId('list-loader');
+        expect(loader).toBeInTheDocument();
+    });
+
+    it('should call onLoadMore callback when loading indicator is visible', () => {
+        setup({virtualized: true, onLoadMore: mockOnLoadMorFn, loading: true});
+
+        const loader = screen.getByTestId('list-loader');
+        expect(loader).toBeVisible();
+        expect(mockOnLoadMorFn).toHaveBeenCalled();
+    });
+});

test-utils/setup-tests.ts

@@ -14,3 +14,13 @@ global.ResizeObserver = class implements ResizeObserver {
     observe(_target: Element, _options?: ResizeObserverOptions) {}
     unobserve(_target: Element) {}
 };
+
+// mock AutoSizer to properly test functionality related to virtualization
+// 400 x 400 is a random size and might be changed if needed
+jest.mock(
+    'react-virtualized-auto-sizer',
+    () =>
+        //@ts-ignore
+        ({children}) =>
+            children({height: 400, width: 400}),
+);

test-utils/setupIntersectionObserverMock.ts

@@ -0,0 +1,50 @@
+export function setupIntersectionObserverMock({
+    root = null,
+    rootMargin = '',
+    thresholds = [],
+    disconnect = () => null,
+    observe = () => null,
+    takeRecords = () => [
+        {
+            boundingClientRect: {} as DOMRectReadOnly,
+            intersectionRatio: 1,
+            intersectionRect: {} as DOMRectReadOnly,
+            isIntersecting: true,
+            rootBounds: null,
+            target: {} as Element,
+            time: 1,
+        },
+    ],
+    unobserve = () => null,
+} = {}): void {
+    class MockIntersectionObserver implements IntersectionObserver {
+        readonly root: Element | null = root;
+        readonly rootMargin: string = rootMargin;
+        readonly thresholds: ReadonlyArray<number> = thresholds;
+        disconnect: () => void = disconnect;
+        observe: (target: Element) => void = observe;
+        takeRecords: () => IntersectionObserverEntry[] = takeRecords;
+        unobserve: (target: Element) => void = unobserve;
+
+        constructor(
+            callback: (
+                entries: IntersectionObserverEntry[],
+                observer: IntersectionObserver,
+            ) => void,
+        ) {
+            callback(takeRecords(), this);
+        }
+    }
+
+    Object.defineProperty(window, 'IntersectionObserver', {
+        writable: true,
+        configurable: true,
+        value: MockIntersectionObserver,
+    });
+
+    Object.defineProperty(global, 'IntersectionObserver', {
+        writable: true,
+        configurable: true,
+        value: MockIntersectionObserver,
+    });
+}