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

describe('UsBadge', () => {
  let element: UsBadge

  beforeEach(async () => {
    element = await fixture<UsBadge>(
      html`<us-badge>My Badge</us-badge>`,
    )
  })

  it('renders a default badge', () => {
    const badgeDiv = element.shadowRoot?.querySelector('.usbadge')

    expect(element.contrast).toBe('high')
    expect(element.status).toBe('primary')
    expect(element.iconName).toBe('')
    expect(badgeDiv).toBeDefined()
    expect(badgeDiv!.classList.contains('usbadge')).toBeTruthy()
    expect(badgeDiv!.classList.contains('usbadge_high-contrast')).toBeTruthy()
    expect(badgeDiv!.classList.contains('usbadge_primary-status')).toBeTruthy()
  })

  it('renders with a trailing icon when iconName is set', async () => {
    element.iconName = 'star'
    await elementUpdated(element)

    const icon = element.shadowRoot!.querySelector('us-icon')

    expect(icon).toBeDefined()
    expect(icon!.getAttribute('name')).toBe('star')
  })

  it('renders the correct class based on contrast', async () => {
    element.contrast = 'low'
    await elementUpdated(element)

    const badgeDiv = element.shadowRoot!.querySelector('.usbadge_low-contrast')

    expect(badgeDiv).toBeDefined()
  })

  it('renders the correct class based on status', async () => {
    element.status = 'secondary'
    await elementUpdated(element)

    const badgeDiv = element.shadowRoot!.querySelector('.usbadge_secondary-status')

    expect(badgeDiv).toBeDefined()
  })

  it('renders the trailing icon when a slot is provided', async () => {
    element = await fixture(
      html`
        <us-badge>
          My Badge
          <us-icon slot="trailingIcon" name="star"></us-icon>
        </us-badge>
      `,
    )

    const iconSlot = element.shadowRoot!.querySelector('slot[name="trailingIcon"]')! as HTMLSlotElement
    const trailingIcon = iconSlot.assignedNodes()[0] as HTMLElement

    expect(trailingIcon.tagName).toBe('US-ICON')
  })
})