import React from 'react';
import ReactTestRenderer from 'react-test-renderer';
import DocumentsList from 'app/modules/documents/components/documentsList';
import { selectDocumentsIsMoreStatus, selectDocumentsViewList } from '../store/documents.selectors';
import { createDocuments } from 'app/testUtils/mocks/document.mock';
import { DocumentWithCategory } from '../store/documents.types';
import { OutputSelector } from 'reselect';
import { StoreState } from 'app/common/store/store.types';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom';
import Button from 'app/shared/components/button/button';

jest.mock('../store/documents.selectors', () => ({
  selectDocumentBookmarks: jest.fn(() => [0, 1, 2]),
  selectDocumentsIsMoreStatus: jest.fn(() => true),
  selectDocumentsLoadingStatus: jest.fn(() => false),
  selectDocumentsViewList: jest.fn(() => []),
  selectDocumentBookmarksLoadingStatus: jest.fn(() => false),
}));

describe('DocumentsList component tests', () => {
  const mockStore = configureStore();
  let store;

  beforeEach(() => {
    store = mockStore({});
  });

  it('renders correctly', () => {
    (selectDocumentsViewList as jest.MockedFunction<OutputSelector<StoreState, DocumentWithCategory[], jest.Mock>>)
      .mockImplementation(() => createDocuments());

    const tree = ReactTestRenderer
      .create(<Provider store={store}>
        <MemoryRouter>
          <DocumentsList />
        </MemoryRouter>
      </Provider>).toJSON();

    expect(tree).toMatchSnapshot();
  });

  it('renders load more button if there are more documents to load', () => {
    (selectDocumentsIsMoreStatus as jest.MockedFunction<OutputSelector<StoreState, boolean, jest.Mock>>)
      .mockImplementation(() => true);

    const wrapper = ReactTestRenderer
      .create(<Provider store={store}>
        <MemoryRouter>
          <DocumentsList />
        </MemoryRouter>
      </Provider>);

    const instance = wrapper.root;

    expect(instance.findAllByType(Button).length).toBe(1);
  });

  it('does not render load more button if there are no more documents to load', () => {
    (selectDocumentsIsMoreStatus as jest.MockedFunction<OutputSelector<StoreState, boolean, jest.Mock>>)
      .mockImplementation(() => false);

    const wrapper = ReactTestRenderer
      .create(<Provider store={store}>
        <MemoryRouter>
          <DocumentsList />
        </MemoryRouter>
      </Provider>);

    const instance = wrapper.root;

    expect(instance.findAllByType(Button).length).toBe(0);
  });
});