feat : ajout d'un sélecteur "Tout cocher" dans le composant SelectCheckbox
This commit is contained in:
@@ -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)
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user