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 { 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: `
<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>
`,
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: `
<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', () => {
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)
})
})