import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import Paginator from '../Paginator'
import { PaginationIterator } from '../types/definitions'

describe('Paginator', () => {
  const spyFn = jest.fn()
  const mockProps = {
    className: 'test-classname',
    list: [1, 2, 3, 4, 5, '...', 13] as PaginationIterator,
    currentPage: 1,
    goTo: spyFn
  }

  it('should render without crashing', () => {
    const props = {
      ...mockProps,
      useDefaultStyles: true
    }
    const { getByText } = render(<Paginator {...props} />)

    expect(getByText('2')).toBeTruthy()
    expect(getByText('3')).toBeTruthy()
    expect(getByText('6')).toBeTruthy()
    expect(getByText('14')).toBeTruthy()

    fireEvent.click(screen.getByText(/14/i))
    expect(spyFn).toHaveBeenCalledTimes(1)

    const el = getByText('...')
    expect(el.style.width).toBe('40px')
    expect(el.style.backgroundColor).toBe('rgb(255, 255, 255)')
  })

  it('should render without default styles', () => {
    const props = {
      ...mockProps,
      useDefaultStyles: false
    }
    const { getByText } = render(<Paginator {...props} />)

    const el = getByText('...')
    expect(el.style.width).toBe('')
    expect(el.style.backgroundColor).toBe('')
  })
})