110 lines
3.9 KiB
TypeScript
110 lines
3.9 KiB
TypeScript
import {describe, expect, it} from 'vitest'
|
|
import {h} from 'vue'
|
|
import {mount} from '@vue/test-utils'
|
|
import type {DefineComponent} from 'vue'
|
|
import RadioGroup from './RadioGroup.vue'
|
|
import RadioButton from './RadioButton.vue'
|
|
|
|
type Opt = {label: string; value: string; disabled?: boolean}
|
|
type RadioGroupProps = {
|
|
modelValue?: string | number | boolean | null
|
|
options?: Opt[]
|
|
label?: string
|
|
name?: string
|
|
inline?: boolean
|
|
disabled?: boolean
|
|
readonly?: boolean
|
|
required?: boolean
|
|
hint?: string
|
|
error?: string
|
|
success?: string
|
|
reserveMessageSpace?: boolean
|
|
groupClass?: string
|
|
inputClass?: string
|
|
labelClass?: string
|
|
}
|
|
|
|
const RadioGroupForTest = RadioGroup as DefineComponent<RadioGroupProps>
|
|
|
|
const options: Opt[] = [
|
|
{label: 'Oui', value: 'oui'},
|
|
{label: 'Non', value: 'non'},
|
|
]
|
|
|
|
const mountGroup = (props: RadioGroupProps = {}) =>
|
|
mount(RadioGroupForTest, {props: {options, ...props}})
|
|
|
|
describe('MalioRadioGroup', () => {
|
|
it('rend une option par entrée et un seul role=radiogroup', () => {
|
|
const wrapper = mountGroup()
|
|
expect(wrapper.findAll('input[type="radio"]')).toHaveLength(2)
|
|
expect(wrapper.findAll('[role="radiogroup"]')).toHaveLength(1)
|
|
})
|
|
|
|
it('partage le même name natif entre les radios', () => {
|
|
const wrapper = mountGroup({name: 'prestation'})
|
|
const names = wrapper.findAll('input').map(i => i.attributes('name'))
|
|
expect(names).toEqual(['prestation', 'prestation'])
|
|
})
|
|
|
|
it('coche selon modelValue', () => {
|
|
const wrapper = mountGroup({modelValue: 'non'})
|
|
const inputs = wrapper.findAll('input')
|
|
expect((inputs[1].element as HTMLInputElement).checked).toBe(true)
|
|
expect((inputs[0].element as HTMLInputElement).checked).toBe(false)
|
|
})
|
|
|
|
it('émet update:modelValue au clic sur une option', async () => {
|
|
const wrapper = mountGroup()
|
|
await wrapper.findAll('input')[1].trigger('change')
|
|
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['non'])
|
|
})
|
|
|
|
it('affiche UN seul message d\'erreur réservant l\'espace', () => {
|
|
const wrapper = mountGroup({error: 'Sélection requise'})
|
|
const msgs = wrapper.findAll('[id$="-describedby"]')
|
|
expect(msgs).toHaveLength(1)
|
|
expect(msgs[0].text()).toBe('Sélection requise')
|
|
expect(msgs[0].classes()).toContain('min-h-[1rem]')
|
|
expect(msgs[0].classes()).toContain('text-m-danger')
|
|
expect(wrapper.find('.radio-message').exists()).toBe(false)
|
|
})
|
|
|
|
it('propage l\'erreur aux radios enfants', () => {
|
|
const wrapper = mountGroup({error: 'Sélection requise'})
|
|
expect(wrapper.findAll('.radio-control.is-error')).toHaveLength(2)
|
|
expect(wrapper.findAll('input').every(i => i.attributes('aria-invalid') === 'true')).toBe(true)
|
|
})
|
|
|
|
it('reserveMessageSpace=false sans message : aucune ligne réservée', () => {
|
|
const wrapper = mountGroup({reserveMessageSpace: false})
|
|
expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
|
|
})
|
|
|
|
it('rend la legend et la lie via aria-labelledby', () => {
|
|
const wrapper = mountGroup({label: 'Prestation'})
|
|
const legendId = wrapper.find('[id$="-label"]').attributes('id')
|
|
expect(wrapper.get('[id$="-label"]').text()).toContain('Prestation')
|
|
expect(wrapper.get('[role="radiogroup"]').attributes('aria-labelledby')).toBe(legendId)
|
|
})
|
|
|
|
it('inline : la zone radios réserve la hauteur d\'un champ', () => {
|
|
const wrapper = mountGroup({inline: true})
|
|
expect(wrapper.get('[role="radiogroup"]').classes()).toContain('min-h-[2.5rem]')
|
|
})
|
|
|
|
it('accepte des radios via le slot par défaut', () => {
|
|
const wrapper = mount(RadioGroupForTest, {
|
|
props: {modelValue: 'b'},
|
|
slots: {
|
|
default: () => [
|
|
h(RadioButton, {value: 'a', label: 'A'}),
|
|
h(RadioButton, {value: 'b', label: 'B'}),
|
|
],
|
|
},
|
|
})
|
|
expect(wrapper.findAll('input')).toHaveLength(2)
|
|
expect((wrapper.findAll('input')[1].element as HTMLInputElement).checked).toBe(true)
|
|
})
|
|
})
|