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

describe('usFilter', () => {
  let usFilter: UsFilter

  const filterWrapper = () => {
    const wrapper = usFilter.shadowRoot?.querySelector('.filter-wrapper')
    return wrapper
  }

  beforeEach(async () => {
    usFilter = await fixture(html`<us-filter></us-filter>`)
  })

  it('should be defined', async () => {
    expect(usFilter).toBeDefined()
    expect(usFilter.tagName).toBe('US-FILTER')
  })

  it('should be correct initial properties', () => {
    expect(usFilter.widgetView).toBe('vertical')
    expect(usFilter.checkboxControl).toBeFalsy()
    expect(usFilter.checkboxControlIndeterminate).toBeFalsy()
    expect(usFilter.checkboxControlChecked).toBeFalsy()
    expect(usFilter.title).toBe('')
    expect(usFilter.infoTooltip).toBeFalsy()
    expect(usFilter.titleClear).toBe('')
  })

  it('should be displayed checkbox if "checkboxControl" property passed', async () => {
    usFilter.checkboxControl = true

    await elementUpdated(usFilter)

    expect(filterWrapper()?.querySelector('us-checkbox')?.tagName).toBe('US-CHECKBOX')
  })

  it('should be displayed title if "title" property passed', async () => {
    usFilter.title = 'test'

    await elementUpdated(usFilter)

    expect(filterWrapper()?.querySelector('.title')?.textContent).toBe('test')
  })

  it('should be displayed tooltip-icon if "infoTooltip" property passed', async () => {
    usFilter.infoTooltip = true
    usFilter.title = 'test'

    await elementUpdated(usFilter)

    expect(filterWrapper()?.querySelector('us-tooltip')?.tagName).toBe('US-TOOLTIP')
  })

  it('should be displayed title if "titleClear" property passed', async () => {
    usFilter.title = 'test'
    usFilter.titleClear = 'clear'

    await elementUpdated(usFilter)

    expect(filterWrapper()?.querySelector('.filter-header__right')?.querySelector('button')?.textContent).toBe('clear')
  })
})