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

describe('UsSteps', () => {
  let el: UsSteps
  const steps: IStep[] = [
    {
      title: 'Step 1',
      text: 'This is step 1',
    },
    {
      title: '',
      text: 'This is step 2',
    },
  ]

  function getStepsElements(selector): string[] {
    const elems = el.shadowRoot?.querySelectorAll(selector)

    return Array.from(elems!).map(elem => elem.textContent?.trim())
  }

  beforeEach(async () => {
    el = await fixture(html`<us-steps .steps="${steps}"></us-steps>`)
  })

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

  it('should display the step title', () => {
    const [stepOneTitle, stepTwoTitle] = getStepsElements('.step__title')

    expect(stepOneTitle).toBe('Step 1')
    expect(stepTwoTitle).toBe('')
  })

  it('should display the correct step text', () => {
    const [stepOneText, stepTwoText] = getStepsElements('.step__text')

    expect(stepOneText).toBe('This is step 1')
    expect(stepTwoText).toBe('This is step 2')
  })
})