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

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

  it('should render correctly when progress is passed', () => {
    const wrapper = mount(UProgressBar, {
      props: {
        progress: 50,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly when label is none', () => {
    const wrapper = mount(UProgressBar, {
      props: {
        label: 'none',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly when label is right', () => {
    const wrapper = mount(UProgressBar, {
      props: {
        label: 'right',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly when label is bottom', () => {
    const wrapper = mount(UProgressBar, {
      props: {
        label: 'bottom',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly when label is top floating', () => {
    const wrapper = mount(UProgressBar, {
      props: {
        progress: 50,
        label: 'top floating',
      },
    })
    expect(wrapper.findComponent({ name: 'UTooltip' }).exists()).toBe(true)
    expect(wrapper.findComponent({ name: 'UTooltip' }).html()).toMatchSnapshot()
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly when label is bottom floating', () => {
    const wrapper = mount(UProgressBar, {
      props: {
        progress: 50,
        label: 'bottom floating',
      },
    })
    expect(wrapper.findComponent({ name: 'UTooltip' }).exists()).toBe(true)
    expect(wrapper.findComponent({ name: 'UTooltip' }).html()).toMatchSnapshot()
    expect(wrapper.html()).toMatchSnapshot()
  })
})