import { UPagination } from './UPagination'
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'

describe('UPagination', () => {
  it('should render correctly', () => {
    const wrapper = mount(UPagination, {
      props: {
        modelValue: '2',
        pagesCount: '10',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with default type', () => {
    const wrapper = mount(UPagination, {
      props: {
        type: 'default',
        pagesCount: '10',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with miniaml type', () => {
    const wrapper = mount(UPagination, {
      props: {
        type: 'minimal',
        pagesCount: '10',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with square shape', () => {
    const wrapper = mount(UPagination, {
      props: {
        shape: 'square',
        pagesCount: '10',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with circle shape', () => {
    const wrapper = mount(UPagination, {
      props: {
        shape: 'circle',
        pagesCount: '10',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with left align', () => {
    const wrapper = mount(UPagination, {
      props: {
        align: 'left',
        pagesCount: '10',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with right align', () => {
    const wrapper = mount(UPagination, {
      props: {
        align: 'right',
        pagesCount: '10',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with center align', () => {
    const wrapper = mount(UPagination, {
      props: {
        align: 'center',
        pagesCount: '10',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  //    ? по тестам с эмитами

  it('should call goToNextPage when next button is clicked', async () => {
    const wrapper = mount(UPagination, {
      props: {
        pagesCount: '10',
        modelValue: '2',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })
    const nextButton = wrapper.find('.next')
    expect(nextButton.exists()).toBe(true)
    await nextButton.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
    expect(wrapper.emitted()).toHaveProperty('change')
    expect(wrapper.props('modelValue')).toBe('3')
  })

  it('should call goToPreviousPage when next button is clicked', async () => {
    const wrapper = mount(UPagination, {
      props: {
        pagesCount: '10',
        modelValue: '2',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })
    const prevButton = wrapper.find('.previous')
    expect(prevButton.exists()).toBe(true)
    await prevButton.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
    expect(wrapper.emitted()).toHaveProperty('change')
    expect(wrapper.props('modelValue')).toBe('1')
  })
})