import React from 'react';
import { fireEvent } from '@testing-library/react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Pagination from '..';
import { noop } from '../../../fp/function';

describe('rendering', () => {
  it('renders pagination numbers', () => {
    const { getByText } = renderWithTheme(
      <Pagination current={1} total={15} onChange={noop} />
    );
    expect(getByText('1')).toBeInTheDocument();
    expect(getByText('2')).toBeInTheDocument();
    expect(getByText('3')).toBeInTheDocument();
    expect(getByText('4')).toBeInTheDocument();
    expect(getByText('5')).toBeInTheDocument();
    expect(getByText('15')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('calls onChange when clicking on pagination number', () => {
    const onChange = jest.fn();
    const { getByText } = renderWithTheme(
      <Pagination current={1} total={15} onChange={onChange} />
    );
    fireEvent.click(getByText('5'));
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith(5);
  });
});