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

describe('UTabs', () => {
  it('renders correctly', () => {
    const wrapper = mount(UTabs)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('renders correctly with sm size', () => {
    const wrapper = mount(UTabs, {
      props: {
        size: 'sm',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('renders correctly with md size', () => {
    const wrapper = mount(UTabs, {
      props: {
        size: 'md',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('renders correctly with full width', () => {
    const wrapper = mount(UTabs, {
      props: {
        fullWidth: true,
        tabItems: [
          {
            title: 'Checked in',
            variant: 'underlined',
            active: false,
            badge: '98',
          },
          {
            title: 'Due-in-Guests',
            variant: 'underlined',
            active: false,
          },
          {
            title: 'Checked out',
            variant: 'underlined',
            active: false,
          },
          {
            title: 'Pending',
            variant: 'underlined',
            active: false,
          },
        ],
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('switchActiveState was called by click on UTabItem', async () => {
    const wrapper = mount(UTabs, {
      props: {
        tabItems: [
          {
            title: 'Checked in',
            variant: 'underlined',
            active: false,
            badge: '98',
          },
          {
            title: 'Due-in-Guests',
            variant: 'underlined',
            active: false,
          },
          {
            title: 'Checked out',
            variant: 'underlined',
            active: false,
          },
          {
            title: 'Pending',
            variant: 'underlined',
            active: false,
          },
        ],
      },
    })
    const tabItem = wrapper.findComponent({ name: 'UTabItem' })
    expect(tabItem.exists()).toBe(true)
    await tabItem.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('change')
  })
})