diff --git a/app/components/malio/radio/RadioGroup.test.ts b/app/components/malio/radio/RadioGroup.test.ts new file mode 100644 index 0000000..69f586a --- /dev/null +++ b/app/components/malio/radio/RadioGroup.test.ts @@ -0,0 +1,109 @@ +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 + +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) + }) +}) diff --git a/app/components/malio/radio/RadioGroup.vue b/app/components/malio/radio/RadioGroup.vue new file mode 100644 index 0000000..b8e4552 --- /dev/null +++ b/app/components/malio/radio/RadioGroup.vue @@ -0,0 +1,154 @@ + + +