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

describe('UCheckbox', () => {
  it('should render correctly', () => {
    const wrapper = mount(UCheckbox)
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UCheckbox sizes', () => {
  it('should have sm classes', async () => {
    const wrapper = mount(UCheckbox, {
      props: {
        size: 'sm',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have md  classes', async () => {
    const wrapper = mount(UCheckbox, {
      props: {
        size: 'md',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UCheckbox variants', () => {
  it('should have radio classes', async () => {
    const wrapper = mount(UCheckbox, {
      props: {
        variant: 'radio',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have default classes', async () => {
    const wrapper = mount(UCheckbox, {
      props: {
        variant: 'default',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have check classes', async () => {
    const wrapper = mount(UCheckbox, {
      props: {
        variant: 'check',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UCheckbox emits', async () => {
  it('should emit change event', async () => {
    const wrapper = mount(UCheckbox, {
      props: {
        'onUpdate:modelValue': (v) => {
          wrapper.setProps({ modelValue: v })
        },
        enabled: true,
      },
    })
    await wrapper.trigger('click')
    expect(wrapper.props().modelValue).toBe(true)
  })
})

describe('UCheckbox disabled', () => {
  it('should have disabled classes', async () => {
    const wrapper = mount(UCheckbox, {
      props: {
        enabled: false,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })
})