import { EarningsPoolPage } from './earningsPool.page';
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';

jest.mock('../store/earnings.selectors', () => ({
  selectCurrentTcePeriod: jest.fn(() => 'September 2021'),
  selectEarningsXlsData: jest.fn(() => []),
  selectEarningsXlsName: jest.fn(() => 'Xlsx'),
  selectNumberOfEarningsVessels: jest.fn(() => 13),
}));

jest.mock('app/modules/earnings/store/tceChart.selectors', () => ({
  selectTceChartData: jest.fn(() => ({
    maxValue: 13000,
    selectedId: 1,
    barSeries: [
      {
        id: 0,
        date: 'date 1',
        label: 'label 1',
        subLabel: 'subLabel 1',
        value: 200,
        popover: {
          tce: 200,
          title: 'title 1',
          benchmark: 300,
          mode: 'year',
        },
      },
      {
        id: 1,
        date: 'date 2',
        label: 'label 2',
        subLabel: 'subLabel 2',
        value: 400,
        popover: {
          tce: 400,
          title: 'title 1',
          benchmark: 500,
          mode: 'spot',
        },
      },
    ],
    linesSeries: [
      {
        id: 0,
        date: 'date 1',
        benchmarkMode: 'year',
        label: 'label 1',
        value: 300,
        popover: {
          tce: 200,
          title: 'title 1',
          benchmark: 300,
          mode: 'year',
        },
      },
      {
        id: 1,
        date: 'date 2',
        label: 'label 2',
        benchmarkMode: 'spot',
        value: 500,
        popover: {
          tce: 400,
          title: 'title 1',
          benchmark: 500,
          mode: 'spot',
        },
      },
    ],
    currentPage: 1,
  })),
}));

jest.mock('app/shared/store/ui/uiSelectors', () => ({
  getScreenWidth: jest.fn(() => 1400),
}));

jest.mock('app/common/store', () => ({
  history: jest.fn(() => {}),
}));

describe('EarningsPool page tests', () => {
  const mockStore = configureStore();
  const store = mockStore({});

  it('renders earningsPool page correctly', () => {
    const renderer = new ShallowRenderer();
    renderer.render(<Provider store={store}>
      <EarningsPoolPage />
    </Provider>);
    const result = renderer.getRenderOutput();
    expect(result).toMatchSnapshot();
  });
});