import { describe, test, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import VAccordion from '../src/components/accordion/VAccordion.vue'
import VAccordionChild from '../src/components/accordion/VAccordionChild.vue'

describe('VAccordion', () => {
  const factory = () =>
    mount(VAccordion, {
      props: {
        value: '0',
      },
      slots: {
        default: `
          <VAccordionChild panel-value="0">
            <template #header>Un titre d'accordéon 1</template>
            <template #content><p>Contenu 1</p></template>
          </VAccordionChild>
          <VAccordionChild panel-value="1" disabled>
            <template #header>Un titre d'accordéon 2</template>
            <template #content><p>Contenu 2</p></template>
          </VAccordionChild>
          <VAccordionChild panel-value="2">
            <template #header>Un titre d'accordéon 3</template>
            <template #content>
              <p>Contenu 3</p>
            </template>
          </VAccordionChild>
        `,
      },
      global: {
        components: {
          VAccordionChild,
        },
      },
    })

  test('renders three accordion panels', () => {
    const wrapper = factory()
    const panels = wrapper.findAll('.p-accordionpanel')
    expect(panels).toHaveLength(3)
  })

  test('activates the first panel by default', () => {
    const wrapper = factory()
    const firstPanel = wrapper.findAll('.p-accordionpanel')[0]
    expect(firstPanel.classes()).toContain('p-accordionpanel-active')
    expect(firstPanel.attributes('data-p-active')).toBe('true')
  })

  test('disables the second panel', () => {
    const wrapper = factory()
    const secondPanel = wrapper.findAll('.p-accordionpanel')[1]
    expect(secondPanel.classes()).toContain('p-disabled')
    expect(secondPanel.attributes('data-p-disabled')).toBe('true')
    expect(secondPanel.find('button').attributes('disabled')).toBeDefined()
  })
})