feat : ajout d'un sélecteur "Tout cocher" dans le composant SelectCheckbox

This commit is contained in:
2026-03-19 17:30:52 +01:00
parent 187ef52865
commit 9d9b9c9dc4
3 changed files with 140 additions and 0 deletions

View File

@@ -23,6 +23,8 @@ type SelectCheckboxProps = {
textLabel?: string
rounded?: string
displayTag?: boolean
displaySelectAll?: boolean
selectAllLabel?: string
disabled?: boolean
}
@@ -92,4 +94,85 @@ describe('MalioSelectCheckbox', () => {
expect(wrapper.text()).not.toContain('0/3')
expect(wrapper.text()).toContain('Aucune selection')
})
it('does not show select all checkbox by default', async () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: [], options},
})
await wrapper.get('button').trigger('click')
const checkboxes = wrapper.findAll('input[type="checkbox"]')
expect(checkboxes).toHaveLength(options.length)
})
it('shows select all checkbox when displaySelectAll is true', async () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: [], options, displaySelectAll: true},
})
await wrapper.get('button').trigger('click')
const checkboxes = wrapper.findAll('input[type="checkbox"]')
expect(checkboxes).toHaveLength(options.length + 1)
expect(wrapper.text()).toContain('Tout sélectionner')
})
it('shows custom select all label', async () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: [], options, displaySelectAll: true, selectAllLabel: 'Sélectionner tout'},
})
await wrapper.get('button').trigger('click')
expect(wrapper.text()).toContain('Sélectionner tout')
})
it('emits all values when select all is clicked and none selected', async () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: [], options, displaySelectAll: true},
})
await wrapper.get('button').trigger('click')
const checkboxes = wrapper.findAll('input[type="checkbox"]')
await checkboxes[0].setValue(true)
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['fr', 'be', 'ca']])
})
it('emits empty array when select all is clicked and all selected', async () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: ['fr', 'be', 'ca'], options, displaySelectAll: true},
})
await wrapper.get('button').trigger('click')
const checkboxes = wrapper.findAll('input[type="checkbox"]')
await checkboxes[0].setValue(false)
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
})
it('select all checkbox is checked when all options are selected', async () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: ['fr', 'be', 'ca'], options, displaySelectAll: true},
})
await wrapper.get('button').trigger('click')
const checkboxes = wrapper.findAll('input[type="checkbox"]')
expect((checkboxes[0].element as HTMLInputElement).checked).toBe(true)
})
it('select all checkbox is unchecked when not all options are selected', async () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: ['fr'], options, displaySelectAll: true},
})
await wrapper.get('button').trigger('click')
const checkboxes = wrapper.findAll('input[type="checkbox"]')
expect((checkboxes[0].element as HTMLInputElement).checked).toBe(false)
})
})