import React from 'react';
import ReactTestRenderer from 'react-test-renderer';
import * as selectors from '../store/calendar.selectors';
import CalendarList from 'app/modules/calendar/components/calendarList';
import { createCalendarEvents } from 'app/testUtils/mocks/calendar.mock';
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom';
import configureStore from 'redux-mock-store';

jest.mock('../store/calendar.selectors');

describe('CalendarList component tests', () => {
  const mockedSelectors = selectors as jest.Mocked<typeof selectors>;
  const mockStore = configureStore();
  const events = createCalendarEvents();

  beforeEach(() => {
    mockedSelectors.createCalendarIsLoadingSelector.mockImplementation(() => () => false);
  });

  it('CalendarList renders correctly with parameters', () => {
    mockedSelectors.selectSortedEvents.mockImplementation(() => ({
      upcomingEvents: [ events[0], events[1] ],
      pastEvents: [ events[2], events[3], events[4] ],
    }));

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

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

  it('CalendarList renders correctly with empty array of events', () => {
    mockedSelectors.selectSortedEvents.mockImplementation(() => ({
      upcomingEvents: [],
      pastEvents: [],
    }));

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

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