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

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

  beforeEach(async () => {
    element = await fixture<UsTrend>(
      html`<us-trend>+12</us-trend>`,
    )
  })

  it('renders a default trend', () => {
    const trendDiv = element.shadowRoot?.querySelector('.ustrend')

    expect(element.trend).toBe('up')
    expect(trendDiv).toBeDefined()
    expect(trendDiv!.classList.contains('ustrend')).toBeTruthy()
    expect(trendDiv!.classList.contains('ustrend_up')).toBeTruthy()
  })

  it('renders the "up" trend icon when the "trend" property is set to "up"', async () => {
    element.trend = 'up'
    await elementUpdated(element)

    const iconElement = element.shadowRoot?.querySelector('.ustrend__icon')

    expect(iconElement?.getAttribute('name')).toBe('arrow-trend-up')
  })

  it('renders the "down" trend icon when the "trend" property is set to "down"', async () => {
    element.trend = 'down'
    await elementUpdated(element)

    const iconElement = element.shadowRoot?.querySelector('.ustrend__icon')

    expect(iconElement?.getAttribute('name')).toBe('arrow-trend-down')
  })

  it('sets the "ustrend_up" class when the "trend" property is set to "up"', async () => {
    element.trend = 'up'
    await elementUpdated(element)

    const divElement = element.shadowRoot?.querySelector('.ustrend')

    expect(divElement?.classList.contains('ustrend_up')).toBeTruthy()
  })

  it('sets the "ustrend_down" class when the "trend" property is set to "down"', async () => {
    element.trend = 'down'
    await elementUpdated(element)

    const divElement = element.shadowRoot?.querySelector('.ustrend')

    expect(divElement?.classList.contains('ustrend_down')).toBeTruthy()
  })
})