visua-vue/test/VAccordion.spec.ts

import { describe, test, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import { h } from 'vue'
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: () => [
          h(VAccordionChild, { panelValue: '0' }, {
            header: () => 'Un titre d\'accordéon 1',
            content: () => h('p', 'Contenu 1'),
          }),
          h(VAccordionChild, { panelValue: '1', disabled: true }, {
            header: () => 'Un titre d\'accordéon 2',
            content: () => h('p', 'Contenu 2'),
          }),
          h(VAccordionChild, { panelValue: '2' }, {
            header: () => 'Un titre d\'accordéon 3',
            content: () => h('p', 'Contenu 3'),
          }),
        ],
      },
      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()
    })

    test('does not emit update:value when a disabled panel is clicked', async () => {
      const wrapper = mount(VAccordion, {
        props: {
          value: null,
        },
        slots: {
          default: () => [
            h(VAccordionChild, { panelValue: '0', disabled: true }, {
              header: () => 'Panneau désactivé',
              content: () => h('p', 'Contenu'),
            }),
          ],
        },
        global: {
          components: {
            VAccordionChild,
          },
        },
      })

      const header = wrapper.find('.p-accordionheader')
      expect(header.attributes('disabled')).toBeDefined()
      await header.trigger('click')
      expect(wrapper.emitted('update:value')).toBeFalsy()
    })

    test('emits update:value when a panel is clicked', async () => {
      const wrapper = mount(VAccordion, {
        props: {
          value: null,
        },
        slots: {
          default: `
            <VAccordionChild panel-value="0">
              <template #header>Panel 1</template>
              <template #content><p>Contenu 1</p></template>
            </VAccordionChild>
            <VAccordionChild panel-value="1">
              <template #header>Panel 2</template>
              <template #content><p>Contenu 2</p></template>
            </VAccordionChild>
          `,
        },
        global: {
          components: {
            VAccordionChild,
          },
        },
      })

    const headers = wrapper.findAll('.p-accordionheader')
    await headers[1].trigger('click')

    // Checks that the event has been issued with the correct value
    expect(wrapper.emitted('update:value')).toBeTruthy()
    expect(wrapper.emitted('update:value')![0]).toEqual(['1'])
  })

  test('toggles an active panel when clicked again', async () => {
    const wrapper = mount(VAccordion, {
      props: {
        value: '0',
      },
      slots: {
        default: () => [
          h(VAccordionChild, { panelValue: '0' }, {
            header: () => 'Panneau 1',
            content: () => h('p', 'Contenu 1'),
          }),
        ],
      },
      global: {
        components: {
          VAccordionChild,
        },
      },
    })

    const header = wrapper.find('.p-accordionheader')

    // Vérifie que le panneau est actif au départ
    const panel = wrapper.find('.p-accordionpanel')
    expect(panel.attributes('data-p-active')).toBe('true')

    // Clique une première fois pour le refermer
    await header.trigger('click')

    // Vérifie que le panneau est maintenant inactif
    expect(panel.attributes('data-p-active')).toBe('false')

    // Vérifie que l'événement a bien été émis avec `null` ou une valeur vide
    const emitted = wrapper.emitted('update:value')
    expect(emitted).toBeTruthy()
    const lastEmission = emitted![emitted!.length - 1]
    expect(lastEmission[0]).toBe(null)
  })
})