feat(radio) : composant MalioRadioGroup (message unique, reserveMessageSpace)

2026-06-24 16:25:57 +02:00
parent 9207d7bb95
commit 62b23c53b4
2 changed files with 263 additions and 0 deletions
@@ -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<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)
+  })
+})