@cnamts/synapse 1.0.10 → 1.0.12

package/src/components/Amelipro/AmeliproCheckbox/__tests__/AmeliproCheckbox.spec.ts

@@ -0,0 +1,175 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproCheckbox from '../AmeliproCheckbox.vue'
+import type { AmeliproCheckboxItem } from '../types'
+import { AmeliproMessage } from '@/components'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import { type PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+import { attachToApp } from '@tests/helpers/utils'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproCheckbox> = {
+	ariaRequired: {
+		type: Boolean,
+		default: false,
+	},
+	checkbox: {
+		type: Object as PropType<AmeliproCheckboxItem>,
+		required: true,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	errorDefault: {
+		type: Boolean,
+		default: false,
+	},
+	isSwitch: {
+		type: Boolean,
+		default: false,
+	},
+	labelLeft: {
+		type: Boolean,
+		default: false,
+	},
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	requiredErrorMessage: {
+		type: String,
+		default: 'Sélection obligatoire',
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproCheckbox> => ({
+	checkbox: {
+		label: 'Required checkbox label',
+		value: 'required-checkbox-value',
+	},
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproCheckbox> => ({
+	ariaRequired: true,
+	checkbox: {
+		description: 'Modified checkbox description',
+		label: 'Modified checkbox label',
+		value: 'modified-checkbox-value',
+	} as AmeliproCheckboxItem,
+	disabled: true,
+	errorDefault: true,
+	modelValue: true,
+	requiredErrorMessage: 'Modified required error message',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproCheckbox)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproCheckbox', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe.todo('Setting props should update attributes of inner tags')
+
+	describe.todo('Setting props should update props or attributes of inner components')
+
+	describe('Events', () => {
+		let wrapper: VueWrapper<InstanceType<typeof AmeliproCheckbox>>
+		const inputWrapper = () => wrapper.find('[role="checkbox"]')
+
+		beforeEach(() => {
+			wrapper = mount(AmeliproCheckbox, {
+				attachTo: attachToApp(),
+				props: {
+					...requiredPropValues(),
+					checkbox: {
+						label: 'Exemple',
+						value: 'Valeur de la checkbox',
+					},
+				},
+			})
+		})
+
+		it('should test the input wrapper', () => {
+			expect(inputWrapper().attributes()).toMatchObject({
+				'aria-checked': 'false',
+				'aria-disabled': 'false',
+				'class': expect.stringContaining('amelipro-checkbox-input'),
+				'id': testHelper.default('uniqueId'),
+				'role': 'checkbox',
+				'tabindex': '0',
+			})
+		})
+
+		// TODO: Le contenu de emitted() semble buggé (non conforme à la doc)
+		it.skip('should react to input event', async () => {
+			expect(wrapper.emitted('input')).toBeUndefined()
+			await inputWrapper().trigger('input')
+			expect(wrapper.emitted('input')).toEqual([[true, 'Valeur de la checkbox']])
+		})
+	})
+
+	describe('errors', () => {
+		let wrapper: VueWrapper<InstanceType<typeof AmeliproCheckbox>>
+
+		beforeEach(() => {
+			wrapper = shallowMount(AmeliproCheckbox, {
+				props: {
+					...requiredPropValues(),
+					checkbox: {
+						description: 'The checkbox description',
+						label: 'the checkbox label',
+						value: 'the-checkbox-value',
+					} as AmeliproCheckboxItem,
+				},
+			})
+		})
+
+		it.skip('should display error message', async () => {
+			let componentWrapper = wrapper.findComponent(AmeliproMessage)
+			expect(componentWrapper.exists()).toBe(false)
+
+			await wrapper.setProps({ ariaRequired: true })
+			await wrapper.find('[role="checkbox"]').trigger('click')
+			await wrapper.find('[role="checkbox"]').trigger('click')
+			componentWrapper = wrapper.findComponent(AmeliproMessage)
+
+			expect(wrapper.find('[role="checkbox"]').attributes('aria-describedby')).toBe('the-id-error The checkbox description')
+			expect(componentWrapper.exists()).toBe(true)
+			expect(componentWrapper.find('.mb-0').text()).toBe('Sélection obligatoire')
+		})
+
+		it('should update label color classes', async () => {
+			const elementWrapper = wrapper.find('.checkbox-label')
+			expect(elementWrapper.exists()).toBe(true)
+			expect(elementWrapper.attributes('class')).toContain('text-ap-grey-darken-1')
+
+			await wrapper.setProps({ disabled: true })
+			expect(elementWrapper.exists()).toBe(true)
+			expect(elementWrapper.attributes('class')).toContain('text-ap-grey')
+
+			await wrapper.setProps({ disabled: false, ariaRequired: true })
+			await wrapper.find('[role="checkbox"]').trigger('click')
+			await wrapper.find('[role="checkbox"]').trigger('click')
+			expect(elementWrapper.exists()).toBe(true)
+			expect(elementWrapper.attributes('class')).toContain('checkbox-label text-ap-error')
+		})
+	})
+})

package/src/components/Amelipro/AmeliproCheckbox/__tests__/__snapshots__/AmeliproCheckbox.spec.ts.snap

@@ -0,0 +1,88 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproCheckbox > Snapshots > renders the component with all properties filled in 1`] = `
+<div id="modified-unique-id-container">
+  <div class="
+    align-center
+    amelipro-checkbox
+    d-flex
+  ">
+    <div
+      aria-checked="true"
+      aria-describedby="Modified checkbox description"
+      aria-disabled="true"
+      aria-required="true"
+      class="
+        align-center
+        amelipro-checkbox-input
+        d-inline-flex
+        flex-row
+        mr-0
+        text-body-1
+      "
+      id="modified-unique-id"
+      role="checkbox"
+      tabindex="-1"
+    >
+      <span
+        class="
+          checkbox-label
+          text-ap-grey
+        "
+        id="modified-unique-id-label-text"
+      >
+        Modified checkbox label
+        <span
+          aria-hidden="true"
+          class="d-inline-flex"
+        >
+          &nbsp;*
+        </span>
+        <span class="d-sr-only">
+          &nbsp;Champ obligatoire
+        </span>
+      </span>
+    </div>
+  </div>
+  <!-- v-if -->
+</div>
+`;
+
+exports[`AmeliproCheckbox > Snapshots > renders the component with only required properties filled in 1`] = `
+<div id="required-unique-id-container">
+  <div class="
+    align-center
+    amelipro-checkbox
+    d-flex
+  ">
+    <div
+      aria-checked="false"
+      aria-disabled="false"
+      class="
+        align-center
+        amelipro-checkbox-input
+        d-inline-flex
+        flex-row
+        mr-0
+        text-body-1
+      "
+      id="required-unique-id"
+      role="checkbox"
+      tabindex="0"
+    >
+      <span
+        class="
+          checkbox-label
+          text-ap-grey-darken-1
+        "
+        id="required-unique-id-label-text"
+      >
+        Required checkbox label
+        <!-- v-if -->
+        <!-- v-if -->
+      </span>
+    </div>
+  </div>
+  <!-- v-if -->
+</div>
+`;

package/src/components/Amelipro/AmeliproCheckboxGroup/__tests__/AmeliproCheckboxGroup.spec.ts

@@ -0,0 +1,423 @@
+import { DOMWrapper, type VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproCheckboxGroup from '../AmeliproCheckboxGroup.vue'
+import type { AmeliproCheckboxGroupItem } from '../types'
+import { AmeliproMessage } from '@/components'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+import { attachToApp } from '@tests/helpers/utils'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproCheckboxGroup> = {
+	ariaRequired: {
+		type: Boolean,
+		default: false,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	fullHorizontal: {
+		type: Boolean,
+		default: false,
+	},
+	groupLabel: {
+		type: String,
+		required: true,
+	},
+	hiddenLabel: {
+		type: Boolean,
+		default: false,
+	},
+	horizontal: {
+		type: Boolean,
+		default: false,
+	},
+	horizontalLabel: {
+		type: Boolean,
+		default: false,
+	},
+	modelValue: {
+		type: Array as PropType<AmeliproCheckboxGroupItem[]>,
+		required: true,
+	},
+	multipleRequired: {
+		type: Boolean,
+		default: false,
+	},
+	multipleRequiredErrorMessage: {
+		type: String,
+		default: 'Vous devez cocher au moins deux options',
+	},
+	pills: {
+		type: Boolean,
+		default: false,
+	},
+	requiredErrorMessage: {
+		type: String,
+		default: 'Sélection obligatoire',
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproCheckboxGroup> => ({
+	groupLabel: 'required-group-label',
+	modelValue: [{
+		isChecked: true,
+		label: 'Required item label',
+		value: 'required-item-value',
+	}],
+	multipleRequired: false,
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproCheckboxGroup> => ({
+	ariaRequired: true,
+	disabled: true,
+	fullHorizontal: true,
+	groupLabel: 'Modified group label',
+	horizontal: true,
+	horizontalLabel: true,
+	modelValue: [
+		{
+			description: 'Modified item description 1',
+			disabled: false,
+			isChecked: false,
+			label: 'Modified item label 1',
+			value: 'modified-item-value-1',
+		},
+		{
+			description: 'Modified item description 2',
+			disabled: false,
+			isChecked: true,
+			label: 'Modified item label 2',
+			value: 'modified-item-value-2',
+		},
+		{
+			description: 'Modified item description 3',
+			disabled: false,
+			isChecked: true,
+			label: 'Modified item label 3',
+			value: 'modified-item-value-3',
+		},
+	],
+	multipleRequired: true,
+	multipleRequiredErrorMessage: 'Modified multiple required error message',
+	pills: true,
+	requiredErrorMessage: 'Modified required error message',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproCheckboxGroup)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproCheckboxGroup', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		describe('Checkbox group', () => {
+			let vueWrapper: VueWrapper<InstanceType<typeof AmeliproCheckboxGroup>>
+
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproCheckboxGroup, { props: requiredPropValues() })
+			})
+
+			it('should have the default classes', () => {
+				expect(vueWrapper.find('.amelipro-checkbox-group').attributes('class'))
+					.toBe('amelipro-checkbox-group d-flex flex-column classic')
+			})
+
+			it('prop fullHorizontal sets attribute class', async () => {
+				await vueWrapper.setProps({ fullHorizontal: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group').attributes('class'))
+					.toBe('amelipro-checkbox-group d-flex flex-column flex-md-row align-md-start classic')
+			})
+
+			it('prop horizontalLabel sets attribute class', async () => {
+				await vueWrapper.setProps({ horizontalLabel: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group').attributes('class'))
+					.toBe('amelipro-checkbox-group d-flex flex-column flex-md-row align-md-start classic')
+			})
+
+			it('prop pills sets attribute class', async () => {
+				await vueWrapper.setProps({ pills: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group').attributes('class'))
+					.toBe('amelipro-checkbox-group d-flex flex-column pills')
+			})
+		})
+
+		describe('Checkbox group wrapper', () => {
+			let vueWrapper: VueWrapper<InstanceType<typeof AmeliproCheckboxGroup>>
+
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproCheckboxGroup, { props: requiredPropValues() })
+			})
+
+			it('should have the default class', () => {
+				expect(vueWrapper.find('.amelipro-checkbox-group__wrapper').attributes('class'))
+					.toBe('amelipro-checkbox-group__wrapper')
+			})
+
+			it('should update class when pills is true', async () => {
+				await vueWrapper.setProps({ pills: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__wrapper').attributes('class'))
+					.toBe('amelipro-checkbox-group__wrapper mt-2')
+			})
+
+			it('should update class when fullHorizontal is true', async () => {
+				await vueWrapper.setProps({ fullHorizontal: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__wrapper').attributes('class'))
+					.toBe('amelipro-checkbox-group__wrapper mt-1 mt-md-0')
+			})
+
+			it('should update class when fullHorizontal and pills are true', async () => {
+				await vueWrapper.setProps({ fullHorizontal: true, pills: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__wrapper').attributes('class'))
+					.toBe('amelipro-checkbox-group__wrapper mt-2')
+			})
+
+			it('should update class when horizontal is true', async () => {
+				await vueWrapper.setProps({ horizontal: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__wrapper').attributes('class'))
+					.toBe('amelipro-checkbox-group__wrapper')
+			})
+
+			it('should update class when horizontal and pills are true', async () => {
+				await vueWrapper.setProps({ horizontal: true, pills: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__wrapper').attributes('class'))
+					.toBe('amelipro-checkbox-group__wrapper mt-2')
+			})
+		})
+
+		describe('Checkbox group list', () => {
+			let vueWrapper: VueWrapper<InstanceType<typeof AmeliproCheckboxGroup>>
+
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproCheckboxGroup, { props: requiredPropValues() })
+			})
+
+			it('should have the default class', () => {
+				expect(vueWrapper.find('.amelipro-checkbox-group__list').attributes('class'))
+					.toBe('d-flex flex-wrap list-style-none amelipro-checkbox-group__list flex-column')
+			})
+
+			it('should update class when pills is true', async () => {
+				await vueWrapper.setProps({ pills: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__list').attributes('class'))
+					.toBe('d-flex flex-wrap list-style-none amelipro-checkbox-group__list')
+			})
+
+			it('should update class when fullHorizontal is true', async () => {
+				await vueWrapper.setProps({ fullHorizontal: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__list').attributes('class'))
+					.toBe('d-flex flex-wrap list-style-none amelipro-checkbox-group__list flex-column flex-md-row align-md-center')
+			})
+
+			it('should update class when fullHorizontal and pills are true', async () => {
+				await vueWrapper.setProps({ fullHorizontal: true, pills: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__list').attributes('class'))
+					.toBe('d-flex flex-wrap list-style-none amelipro-checkbox-group__list flex-md-row align-md-center')
+			})
+
+			it('should update class when horizontal is true', async () => {
+				await vueWrapper.setProps({ horizontal: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__list').attributes('class'))
+					.toBe('d-flex flex-wrap list-style-none amelipro-checkbox-group__list flex-column flex-md-row align-md-center')
+			})
+
+			it('should update class when horizontal and pills are true', async () => {
+				await vueWrapper.setProps({ horizontal: true, pills: true })
+				expect(vueWrapper.find('.amelipro-checkbox-group__list').attributes('class'))
+					.toBe('d-flex flex-wrap list-style-none amelipro-checkbox-group__list flex-md-row align-md-center')
+			})
+		})
+	})
+
+	describe('classes', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproCheckboxGroup>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproCheckboxGroup, {
+				props: {
+					...requiredPropValues(),
+					modelValue: modifiedPropValues().modelValue,
+				},
+			})
+		})
+
+		it('should update checkbox label classes', async () => {
+			const labelWrappers = vueWrapper.findAll('.amelipro-checkbox-group__item-input .checkbox-label')
+			expect(labelWrappers.at(0)?.attributes('class')).toContain('text-ap-grey-darken-1')
+
+			await vueWrapper.setProps({ disabled: true })
+			expect(labelWrappers.at(0)?.attributes('class')).toContain('text-ap-grey')
+
+			await vueWrapper.setProps({ disabled: false, ariaRequired: true })
+			await vueWrapper.findAll('.amelipro-checkbox-group__item-input').at(1)?.trigger('click')
+			await vueWrapper.findAll('.amelipro-checkbox-group__item-input').at(2)?.trigger('click')
+			expect(labelWrappers.at(1)?.attributes('class')).toContain('checkbox-label text-ap-red amelipro-checkbox-group__item-label-span-error')
+		})
+
+		it('should update checkbox label classes with pills version', async () => {
+			await vueWrapper.setProps({ pills: true })
+			const labelWrappers = vueWrapper.findAll('.amelipro-checkbox-group__item-input .checkbox-label')
+			expect(labelWrappers.at(0)?.attributes('class')).toContain('text-ap-blue-darken-1')
+
+			await vueWrapper.setProps({ disabled: true })
+			expect(labelWrappers.at(0)?.attributes('class')).toContain('text-ap-grey-darken-1')
+
+			await vueWrapper.setProps({ disabled: false, ariaRequired: true })
+			await vueWrapper.findAll('.amelipro-checkbox-group__item-input').at(1)?.trigger('click')
+			await vueWrapper.findAll('.amelipro-checkbox-group__item-input').at(2)?.trigger('click')
+			expect(labelWrappers.at(0)?.attributes('class')).toContain('checkbox-label text-ap-red amelipro-checkbox-group__item-label-span-error')
+		})
+	})
+
+	describe.todo('Setting props should update props or attributes of inner components')
+
+	// TODO: n'a pas le comportement attendu, probablement à cause de slotSubItem (ne réagit pas aux changements de props ?)
+	describe.skip('Slots', () => {
+		const vueWrapper = mount(AmeliproCheckboxGroup, {
+			attachTo: attachToApp(),
+			props: requiredPropValues(),
+			slots: {
+				'subItem-0': '<p>subItem 0</p>',
+				'subItem-1': '<p>subItem 1</p>',
+			},
+			// stubs: { AmeliproMessage },
+		})
+		const inputWrappers = () => vueWrapper.findAll('.amelipro-checkbox-group__item__label input')
+
+		it('should test slots and aria-controls', async () => {
+			const subItemsWrapper = (index: number) => vueWrapper.find(`#test-id-subitem-${index}`)
+
+			// Default state
+			expect(subItemsWrapper(0).exists()).toBe(false)
+			expect(inputWrappers().at(0)?.attributes('aria-controls')).toBe('uniqueId-subitem-0')
+
+			// test case for item with slot but fullHorizontal or Horizontal is true
+			await vueWrapper.setProps({ fullHorizontal: true })
+			// => slotSubItem = false => no sub-items, no aria-controls
+			expect(subItemsWrapper(0).exists()).toBe(false)
+			// expect(inputWrappers().at(0)?.attributes('aria-controls')).toBeUndefined(); // => Ne retourne pas la valeur attendue
+
+			// test case for checked item with slot
+			await vueWrapper.setProps({ fullHorizontal: false })
+			expect(subItemsWrapper(0).exists()).toBe(true)
+			expect(inputWrappers().at(0)?.attributes('aria-controls')).toBe('test-id-subitem-0')
+			// test case for item which is not checked
+			expect(subItemsWrapper(1).exists()).toBe(false)
+			expect(inputWrappers().at(1)?.attributes('aria-controls')).toBe('test-id-subitem-1')
+			// test case for item without slot
+			expect(subItemsWrapper(2).exists()).toBe(false)
+			expect(inputWrappers().at(2)?.attributes('aria-controls')).toBeUndefined()
+		})
+	})
+
+	// TODO: n'a pas le comportement attendu, probablement à cause de slotSubItem (ne réagit pas aux changements de props ?)
+	describe.skip('attributes', () => {
+		const vueWrapper = shallowMount(AmeliproCheckboxGroup, {
+			props: modifiedPropValues(),
+			slots: {
+				'subItem-0': '<p>subItem 0</p>',
+				'subItem-1': '<p>subItem 1</p>',
+			},
+		})
+		const inputWrappers = () => vueWrapper.findAll('.amelipro-checkbox-group__item__label input')
+
+		it('should test aria-expanded value', () => {
+			// test case for item slot opened
+			expect(inputWrappers().at(0)?.attributes('aria-expanded')).toBe('true')
+			// test case for item slot closed
+			expect(inputWrappers().at(1)?.attributes('aria-expanded')).toBe('false')
+			// test case for item without slot
+			expect(inputWrappers().at(2)?.attributes('aria-expanded')).toBe(undefined)
+		})
+	})
+
+	// skip this because there is an error "Cannot read property 'addApp' of null" we don't know where is this property 'addApp'
+	// we tested with console.log and it seems to work well but the error is still here
+	describe.skip('errors', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproCheckboxGroup>>
+		let inputWrappers: DOMWrapper<HTMLInputElement>[]
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproCheckboxGroup, {
+				props: modifiedPropValues(),
+				slots: {
+					'subItem-0': '<p>subItem 0</p>',
+					'subItem-1': '<p>subItem 1</p>',
+				},
+			})
+
+			inputWrappers = vueWrapper.findAll('.amelipro-checkbox-group__item__label input')
+		})
+
+		it('should display error message (single)', async () => {
+			let componentWrapper = vueWrapper.findComponent(AmeliproMessage)
+			expect(componentWrapper.exists()).toBe(false)
+
+			await vueWrapper.setProps({ ariaRequired: true })
+
+			inputWrappers.at(1)?.trigger('input')
+			inputWrappers.at(2)?.trigger('input')
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.emitted('change:selected')).toStrictEqual([
+				[[{
+					description: 'the item description 3',
+					disabled: false,
+					isChecked: true,
+					label: 'the item label 3',
+					value: 'the-item-value-3',
+				}]],
+				[[]],
+			])
+			componentWrapper = vueWrapper.findComponent(AmeliproMessage)
+
+			expect(inputWrappers.at(0)?.attributes('aria-describedby')).toBe('the-group-id-error the item description 1')
+			expect(inputWrappers.at(1)?.attributes('aria-describedby')).toBe('the-group-id-error the item description 2')
+			expect(inputWrappers.at(2)?.attributes('aria-describedby')).toBe('the-group-id-error the item description 3')
+			expect(componentWrapper.exists()).toBe(true)
+			expect(componentWrapper.find('.mb-0').text()).toBe('Sélection obligatoire')
+		})
+
+		it('should display error message (multiple)', async () => {
+			let componentWrapper = vueWrapper.findComponent(AmeliproMessage)
+			expect(componentWrapper.exists()).toBe(false)
+
+			await vueWrapper.setProps({ multipleRequired: true })
+
+			inputWrappers.at(1)?.trigger('input')
+			await vueWrapper.vm.$nextTick()
+
+			expect(vueWrapper.emitted('change:selected')).toStrictEqual([[{
+				description: 'the item description 3',
+				disabled: false,
+				isChecked: true,
+				label: 'the item label 3',
+				value: 'the-item-value-3',
+			}]])
+			componentWrapper = vueWrapper.findComponent(AmeliproMessage)
+
+			expect(inputWrappers.at(0)?.attributes('aria-describedby')).toBe('the-group-id-error the item description 1')
+			expect(inputWrappers.at(1)?.attributes('aria-describedby')).toBe('the-group-id-error the item description 2')
+			expect(inputWrappers.at(2)?.attributes('aria-describedby')).toBe('the-group-id-error the item description 3')
+			expect(componentWrapper.exists()).toBe(true)
+			expect(componentWrapper.find('.mb-0').text()).toBe('Vous devez cocher au moins deux options')
+		})
+	})
+})