VirtualizedSectionList-test.js

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 *
 * @format
 * @emails oncall+react_native
 */
'use strict';

const React = require('react');
const ReactTestRenderer = require('react-test-renderer');

const VirtualizedSectionList = require('../VirtualizedSectionList');

describe('VirtualizedSectionList', () => {
  it('renders simple list', () => {
    const component = ReactTestRenderer.create(
      <VirtualizedSectionList
        sections={[
          {title: 's1', data: [{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]},
        ]}
        renderItem={({item}) => <item value={item.key} />}
        getItem={(data, key) => data[key]}
        getItemCount={data => data.length}
      />,
    );
    expect(component).toMatchSnapshot();
  });

  it('renders empty list', () => {
    const component = ReactTestRenderer.create(
      <VirtualizedSectionList
        sections={[]}
        renderItem={({item}) => <item value={item.key} />}
        getItem={(data, key) => data[key]}
        getItemCount={data => data.length}
      />,
    );
    expect(component).toMatchSnapshot();
  });

  it('renders null list', () => {
    const component = ReactTestRenderer.create(
      <VirtualizedSectionList
        sections={undefined}
        renderItem={({item}) => <item value={item.key} />}
        getItem={(data, key) => data[key]}
        getItemCount={data => 0}
      />,
    );
    expect(component).toMatchSnapshot();
  });

  it('renders empty list with empty component', () => {
    const component = ReactTestRenderer.create(
      <VirtualizedSectionList
        sections={[]}
        ListEmptyComponent={() => <empty />}
        ListFooterComponent={() => <footer />}
        ListHeaderComponent={() => <header />}
        getItem={(data, key) => data[key]}
        getItemCount={data => data.length}
        renderItem={({item}) => <item value={item.key} />}
      />,
    );
    expect(component).toMatchSnapshot();
  });

  it('renders list with empty component', () => {
    const component = ReactTestRenderer.create(
      <VirtualizedSectionList
        sections={[{title: 's1', data: [{key: 'hello'}]}]}
        ListEmptyComponent={() => <empty />}
        getItem={(data, key) => data[key]}
        getItemCount={data => data.length}
        renderItem={({item}) => <item value={item.key} />}
      />,
    );
    expect(component).toMatchSnapshot();
  });

  it('renders all the bells and whistles', () => {
    const component = ReactTestRenderer.create(
      <VirtualizedSectionList
        ItemSeparatorComponent={() => <separator />}
        ListEmptyComponent={() => <empty />}
        ListFooterComponent={() => <footer />}
        ListHeaderComponent={() => <header />}
        sections={[
          {
            title: 's1',
            data: new Array(5).fill().map((_, ii) => ({id: String(ii)})),
          },
        ]}
        getItem={(data, key) => data[key]}
        getItemCount={data => data.length}
        getItemLayout={({index}) => ({length: 50, offset: index * 50})}
        inverted={true}
        keyExtractor={(item, index) => item.id}
        onRefresh={jest.fn()}
        refreshing={false}
        renderItem={({item}) => <item value={item.id} />}
      />,
    );
    expect(component).toMatchSnapshot();
  });

  it('handles separators correctly', () => {
    const infos = [];
    const component = ReactTestRenderer.create(
      <VirtualizedSectionList
        ItemSeparatorComponent={props => <separator {...props} />}
        sections={[
          {title: 's0', data: [{key: 'i0'}, {key: 'i1'}, {key: 'i2'}]},
        ]}
        renderItem={info => {
          infos.push(info);
          return <item title={info.item.key} />;
        }}
        getItem={(data, key) => data[key]}
        getItemCount={data => data.length}
      />,
    );
    expect(component).toMatchSnapshot();
    infos[1].separators.highlight();
    expect(component).toMatchSnapshot();
    infos[2].separators.updateProps('leading', {press: true});
    expect(component).toMatchSnapshot();
    infos[1].separators.unhighlight();
  });

  it('handles nested lists', () => {
    const component = ReactTestRenderer.create(
      <VirtualizedSectionList
        sections={[{title: 'outer', data: [{key: 'outer0'}, {key: 'outer1'}]}]}
        renderItem={outerInfo => (
          <VirtualizedSectionList
            sections={[
              {
                title: 'inner',
                data: [
                  {key: outerInfo.item.key + ':inner0'},
                  {key: outerInfo.item.key + ':inner1'},
                ],
              },
            ]}
            horizontal={outerInfo.item.key === 'outer1'}
            renderItem={innerInfo => {
              return <item title={innerInfo.item.key} />;
            }}
            getItem={(data, key) => data[key]}
            getItemCount={data => data.length}
          />
        )}
        getItem={(data, key) => data[key]}
        getItemCount={data => data.length}
      />,
    );
    expect(component).toMatchSnapshot();
  });

  describe('scrollToLocation', () => {
    const ITEM_HEIGHT = 100;

    const createVirtualizedSectionList = props => {
      const component = ReactTestRenderer.create(
        <VirtualizedSectionList
          sections={[
            {title: 's1', data: [{key: 'i1.1'}, {key: 'i1.2'}, {key: 'i1.3'}]},
            {title: 's2', data: [{key: 'i2.1'}, {key: 'i2.2'}, {key: 'i2.3'}]},
          ]}
          renderItem={({item}) => <item value={item.key} />}
          getItem={(data, key) => data[key]}
          getItemCount={data => data.length}
          getItemLayout={(data, index) => ({
            length: ITEM_HEIGHT,
            offset: ITEM_HEIGHT * index,
            index,
          })}
          {...props}
        />,
      );
      const instance = component.getInstance();
      const spy = jest.fn();
      instance._listRef.scrollToIndex = spy;
      return {
        instance,
        spy,
      };
    };

    it('when sticky stickySectionHeadersEnabled={true}, header height is added to the developer-provided viewOffset', () => {
      const {instance, spy} = createVirtualizedSectionList({
        stickySectionHeadersEnabled: true,
      });

      const viewOffset = 25;

      instance.scrollToLocation({
        sectionIndex: 0,
        itemIndex: 1,
        viewOffset,
      });
      expect(spy).toHaveBeenCalledWith({
        index: 1,
        itemIndex: 1,
        sectionIndex: 0,
        viewOffset: viewOffset + ITEM_HEIGHT,
      });
    });

    it.each([
      [
        // prevents #18098
        {sectionIndex: 0, itemIndex: 0},
        {
          index: 0,
          itemIndex: 0,
          sectionIndex: 0,
          viewOffset: 0,
        },
      ],
      [
        {sectionIndex: 2, itemIndex: 1},
        {
          index: 11,
          itemIndex: 1,
          sectionIndex: 2,
          viewOffset: 0,
        },
      ],
      [
        {
          sectionIndex: 0,
          itemIndex: 1,
          viewOffset: 25,
        },
        {
          index: 1,
          itemIndex: 1,
          sectionIndex: 0,
          viewOffset: 25,
        },
      ],
    ])(
      'given sectionIndex, itemIndex and viewOffset, scrollToIndex is called with correct params',
      (scrollToLocationParams, expected) => {
        const {instance, spy} = createVirtualizedSectionList();

        instance.scrollToLocation(scrollToLocationParams);
        expect(spy).toHaveBeenCalledWith(expected);
      },
    );
  });
});