Cellule-financiere-transverse-PMO/visua-vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✅ test: added new test

Browse Source
This commit is contained in:
Paul Valerie GOMA 2025-07-21 16:54:35 +02:00
parent 7e7070ad2f
commit f468fff7e4
1 changed files with 128 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
test/VAccordion.spec.ts
View File

@ -1,5 +1,6 @@
import { describe, test, expect } from 'vitest' import { describe, test, expect } from 'vitest'
import { mount } from '@vue/test-utils' import { mount } from '@vue/test-utils'
import { h } from 'vue'
import VAccordion from '../src/components/accordion/VAccordion.vue' import VAccordion from '../src/components/accordion/VAccordion.vue'
import VAccordionChild from '../src/components/accordion/VAccordionChild.vue' import VAccordionChild from '../src/components/accordion/VAccordionChild.vue'
@ -10,22 +11,20 @@ describe('VAccordion', () => {
value: '0', value: '0',
}, },
slots: { slots: {
default: ` default: () => [
<VAccordionChild panel-value="0"> h(VAccordionChild, { panelValue: '0' }, {
<template #header>Un titre d'accordéon 1</template> header: () => 'Un titre d\'accordéon 1',
<template #content><p>Contenu 1</p></template> content: () => h('p', 'Contenu 1'),
</VAccordionChild> }),
<VAccordionChild panel-value="1" disabled> h(VAccordionChild, { panelValue: '1', disabled: true }, {
<template #header>Un titre d'accordéon 2</template> header: () => 'Un titre d\'accordéon 2',
<template #content><p>Contenu 2</p></template> content: () => h('p', 'Contenu 2'),
</VAccordionChild> }),
<VAccordionChild panel-value="2"> h(VAccordionChild, { panelValue: '2' }, {
<template #header>Un titre d'accordéon 3</template> header: () => 'Un titre d\'accordéon 3',
<template #content> content: () => h('p', 'Contenu 3'),
<p>Contenu 3</p> }),
</template> ],
</VAccordionChild>
`,
}, },
global: { global: {
components: { components: {
@ -34,24 +33,121 @@ describe('VAccordion', () => {
}, },
}) })
test('renders three accordion panels', () => { test('renders three accordion panels', () => {
const wrapper = factory() const wrapper = factory()
const panels = wrapper.findAll('.p-accordionpanel') const panels = wrapper.findAll('.p-accordionpanel')
expect(panels).toHaveLength(3) 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('activates the first panel by default', () => { test('toggles an active panel when clicked again', async () => {
const wrapper = factory() const wrapper = mount(VAccordion, {
const firstPanel = wrapper.findAll('.p-accordionpanel')[0] props: {
expect(firstPanel.classes()).toContain('p-accordionpanel-active') value: '0',
expect(firstPanel.attributes('data-p-active')).toBe('true') },
}) slots: {
default: () => [
h(VAccordionChild, { panelValue: '0' }, {
header: () => 'Panneau 1',
content: () => h('p', 'Contenu 1'),
}),
],
},
global: {
components: {
VAccordionChild,
},
},
})
test('disables the second panel', () => { const header = wrapper.find('.p-accordionheader')
const wrapper = factory()
const secondPanel = wrapper.findAll('.p-accordionpanel')[1] // Vérifie que le panneau est actif au départ
expect(secondPanel.classes()).toContain('p-disabled') const panel = wrapper.find('.p-accordionpanel')
expect(secondPanel.attributes('data-p-disabled')).toBe('true') expect(panel.attributes('data-p-active')).toBe('true')
expect(secondPanel.find('button').attributes('disabled')).toBeDefined()
// 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)
}) })
}) })