diff --git a/test/VAccordion.spec.ts b/test/VAccordion.spec.ts
index aa6c1dc..bdcf631 100644
--- a/test/VAccordion.spec.ts
+++ b/test/VAccordion.spec.ts
@@ -1,5 +1,6 @@
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'
@@ -10,22 +11,20 @@ describe('VAccordion', () => {
value: '0',
},
slots: {
- default: `
-
- Un titre d'accordéon 1
- Contenu 1
-
-
- Un titre d'accordéon 2
- Contenu 2
-
-
- Un titre d'accordéon 3
-
- Contenu 3
-
-
- `,
+ 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: {
@@ -34,24 +33,121 @@ describe('VAccordion', () => {
},
})
- test('renders three accordion panels', () => {
- const wrapper = factory()
- const panels = wrapper.findAll('.p-accordionpanel')
- expect(panels).toHaveLength(3)
+ 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: `
+
+ Panel 1
+ Contenu 1
+
+
+ Panel 2
+ Contenu 2
+
+ `,
+ },
+ 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('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('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,
+ },
+ },
+ })
- 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()
+ 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)
})
})