kevin
11d60e687b
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | #366 | Création d'un composant de type Select checkbox | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #11 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>
96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
import {describe, expect, it} from 'vitest'
|
|
import {mount} from '@vue/test-utils'
|
|
import type {DefineComponent} from 'vue'
|
|
import SelectCheckbox from './SelectCheckbox.vue'
|
|
|
|
type Option = {
|
|
label: string
|
|
value: string | number
|
|
}
|
|
|
|
type SelectCheckboxProps = {
|
|
modelValue: Array<string | number>
|
|
options?: Option[]
|
|
emptyOptionLabel?: string
|
|
label?: string
|
|
hint?: string
|
|
error?: string
|
|
success?: string
|
|
minWidth?: string
|
|
maxWidth?: string
|
|
textField?: string
|
|
textValue?: string
|
|
textLabel?: string
|
|
rounded?: string
|
|
displayTag?: boolean
|
|
disabled?: boolean
|
|
}
|
|
|
|
const SelectCheckboxForTest = SelectCheckbox as DefineComponent<SelectCheckboxProps>
|
|
|
|
const options: Option[] = [
|
|
{label: 'France', value: 'fr'},
|
|
{label: 'Belgique', value: 'be'},
|
|
{label: 'Canada', value: 'ca'},
|
|
]
|
|
|
|
describe('MalioSelectCheckbox', () => {
|
|
it('renders checkbox inputs for options', 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('emits an array with the toggled option value', async () => {
|
|
const wrapper = mount(SelectCheckboxForTest, {
|
|
props: {modelValue: ['fr'], options},
|
|
})
|
|
|
|
await wrapper.get('button').trigger('click')
|
|
const checkboxInputs = wrapper.findAll('input[type="checkbox"]')
|
|
await checkboxInputs[1].setValue(true)
|
|
|
|
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['fr', 'be']])
|
|
})
|
|
|
|
it('shows the selected count over the total count in the trigger', () => {
|
|
const wrapper = mount(SelectCheckboxForTest, {
|
|
props: {modelValue: ['fr', 'ca'], options},
|
|
})
|
|
|
|
expect(wrapper.text()).toContain('2/3')
|
|
})
|
|
|
|
it('shows 0 over the total count when nothing is selected', () => {
|
|
const wrapper = mount(SelectCheckboxForTest, {
|
|
props: {modelValue: [], options},
|
|
})
|
|
|
|
expect(wrapper.text()).toContain('0/3')
|
|
})
|
|
|
|
it('hides the summary when displayTag is enabled and options are selected', () => {
|
|
const wrapper = mount(SelectCheckboxForTest, {
|
|
props: {modelValue: ['fr', 'ca'], options, displayTag: true},
|
|
})
|
|
|
|
expect(wrapper.text()).not.toContain('2/3')
|
|
expect(wrapper.text()).toContain('France')
|
|
expect(wrapper.text()).toContain('Canada')
|
|
})
|
|
|
|
it('hides the summary when displayTag is enabled and nothing is selected', () => {
|
|
const wrapper = mount(SelectCheckboxForTest, {
|
|
props: {modelValue: [], options, displayTag: true, emptyOptionLabel: 'Aucune selection'},
|
|
})
|
|
|
|
expect(wrapper.text()).not.toContain('0/3')
|
|
expect(wrapper.text()).toContain('Aucune selection')
|
|
})
|
|
})
|