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: ` - - - - - - - - - - - - - `, + 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: ` + + + + + + + + + `, + }, + 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) }) })