import { describe, expect, it } from 'vitest'
import { fixture, html } from '@open-wc/testing-helpers'
import './UsLabel'
import type { UsLabel } from './UsLabel'

describe('UsLabel', () => {
  it('renders a default label', async () => {
    const el: UsLabel = await fixture(html`<us-label>Default Label</us-label>`)
    const labelDiv = el.shadowRoot?.querySelector('.uslabel')

    expect(el.type).toBe('success')
    expect(el.dataTestId).toBe('label')
    expect(labelDiv).toBeDefined()
    expect(labelDiv!.classList.contains('uslabel')).toBeTruthy()
    expect(labelDiv!.classList.contains('uslabel__success')).toBeTruthy()
  })

  it('renders a warning label', async () => {
    const el = await fixture(html`
      <us-label type="warning">
        Warning Label
      </us-label>
    `)

    expect(el.getAttribute('type')).toBe('warning')
  })

  it('should render the correct slot content', async () => {
    const el = await fixture(html`
      <us-label type="success" size="md" mode="default">
        Test Label
      </us-label>
    `)
    const leadingIconSlot = el.shadowRoot?.querySelector('slot[name="leadingIcon"]')
    const contentSlot = el.shadowRoot?.querySelector('slot:not([name])')
    const trailingIconSlot = el.shadowRoot?.querySelector('slot[name="trailingIcon"]')

    expect(leadingIconSlot).toBeDefined()
    expect(contentSlot).toBeDefined()
    expect(trailingIconSlot).toBeDefined()
  })
})