import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { singleToplistData } from 'gatsby-core-theme/tests/factories/modules/toplist.factory';
import List from './index';
import Row from '../../../../../components/molecules/toplist/row/variant-one';

const module = singleToplistData;

describe('List test component', () => {
  test('render', () => {
    const { container } = render(
      <List
        CustomRow={Row}
        hasLoadMoreButton="1"
        initItemsCount="2"
        loadItemsCount="2"
        toplist={module.items[0]}
        removeInactiveItems={false}
      />
    );

    expect(container.getElementsByClassName('show').length).toBe(2);
    const loadMoreButton = container.querySelector('.loadMore button');
    fireEvent.click(loadMoreButton);

    expect(container.getElementsByClassName('show').length).toBe(4);
  });

  test('render with inactive items', () => {
    const { container } = render(
      <List
        CustomRow={Row}
        hasLoadMoreButton="1"
        initItemsCount="2"
        loadItemsCount="2"
        toplist={module.items[0]}
        removeInactiveItems
      />
    );

    expect(container.getElementsByClassName('show').length).toBe(0);
  });
});
afterEach(() => {
  cleanup();
});
