import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { ThemeProvider } from 'styled-components'

import { Pagination } from './pagination'
import { theme } from './theme.js'

describe('<Pagination />', () => {
  it('renders pagination', () => {
    const { asFragment } = render(
      <ThemeProvider theme={theme}>
        <Pagination count={10} />
      </ThemeProvider>
    )

    expect(screen.getByRole('navigation')).toBeInTheDocument()
    expect(asFragment()).toMatchSnapshot()
  })

  it('updates current page when clicked and calls onChange', async () => {
    const onChange = jest.fn()
    const clickEvent = expect.objectContaining({ type: 'click' })
    render(
      <ThemeProvider theme={theme}>
        <Pagination count={10} onChange={onChange} />
      </ThemeProvider>
    )

    fireEvent.click(screen.getByRole('button', { name: 'Go to next page' }))
    await waitFor(() => {
      expect(screen.getByRole('button', { name: 'page 2', current: true }))
    })
    expect(onChange).toHaveBeenLastCalledWith(clickEvent, 2)

    fireEvent.click(screen.getByRole('button', { name: 'Go to previous page' }))
    await waitFor(() => {
      expect(screen.getByRole('button', { name: 'page 1', current: true }))
    })
    expect(onChange).toHaveBeenLastCalledWith(clickEvent, 1)

    fireEvent.click(screen.getByRole('button', { name: 'Go to page 3' }))
    await waitFor(() => {
      expect(screen.getByRole('button', { name: 'page 3', current: true }))
    })
    expect(onChange).toHaveBeenLastCalledWith(clickEvent, 3)
  })
})