@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/NirField/NirField.vue

@@ -5,6 +5,7 @@
 	import { locales } from './locales'
 	import { useValidation } from '@/composables/unifyValidation/useValidation'
 	import { useNirValidation, type NirValidationProps } from './useNirValidation'
+	import { useValidatable } from '@/composables/validation/useValidatable'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: string | undefined | null
@@ -12,6 +13,7 @@
 		numberLabel?: string
 		keyLabel?: string
 		displayKey?: boolean
+		helpText?: string
 		nirTooltip?: string
 		keyTooltip?: string
 		nirTooltipPosition?: 'prepend' | 'append'
@@ -40,6 +42,7 @@
 		numberLabel: 'Numéro de sécurité sociale',
 		keyLabel: 'Clé de validation',
 		displayKey: true,
+		helpText: '',
 		nirTooltip: undefined,
 		keyRules: () => [],
 		keyTooltip: undefined,
@@ -52,7 +55,7 @@
 		customNumberWarningRules: () => [],
 		customKeyWarningRules: () => [],
 		customRulesPrecedence: false,
-		showSuccessMessages: true,
+		showSuccessMessages: false,
 		width: '100%',
 		bgColor: 'white',
 		disabled: false,
@@ -71,9 +74,17 @@
 		persistentPlaceholder: false,
 		disableErrorHandling: false,
 		numberRules: () => [],
+		useVuetifyValidation: false,
 		nirType: 'simple',
 		withoutFieldset: false,
 		customLocale: () => locales,
+		errorMessages: null,
+		warningMessages: null,
+		successMessages: null,
+		hasError: false,
+		hasWarning: false,
+		hasSuccess: false,
+		maxErrors: 1,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -173,35 +184,6 @@
 		}
 	})
 
-	// Synchronisation avec modelValue
-	watch(modelValueRef, (newValue) => {
-		// Ignorer les mises à jour internes pour éviter les boucles infinies
-		if (isInternalUpdate.value) return
-
-		if (newValue === undefined || newValue === null) {
-			numberValue.value = ''
-			keyValue.value = ''
-			return
-		}
-		if (newValue.length === 15) {
-			const number = newValue.slice(0, -2)
-			const key = newValue.slice(-2)
-			numberValue.value = number
-			keyValue.value = key
-		}
-		if (newValue.length === 14) {
-			const number = newValue.slice(0, -1)
-			const key = newValue.slice(-1)
-			numberValue.value = number
-			keyValue.value = key
-		}
-		if (newValue.length <= 13) {
-			const number = newValue
-			numberValue.value = number
-			keyValue.value = ''
-		}
-	}, { immediate: true })
-
 	// Émission de la valeur
 	const emitValue = () => {
 		const number = unmaskedNumberValue.value
@@ -228,6 +210,7 @@
 		keyValidation,
 		validateFields,
 		hasFieldErrors,
+		clearValidation,
 	} = useNirValidation(
 		numberValue,
 		keyValue,
@@ -255,12 +238,59 @@
 		toRef(props, 'useVuetifyValidation'),
 		toRef(props, 'numberRules'),
 		toRef(props, 'keyRules'),
+		toRef(props, 'errorMessages'),
+		toRef(props, 'warningMessages'),
+		toRef(props, 'successMessages'),
+		toRef(props, 'hasError'),
+		toRef(props, 'hasWarning'),
+		toRef(props, 'hasSuccess'),
+		toRef(props, 'maxErrors'),
 	)
 
+	// Synchronisation avec modelValue — placé après useNirValidation pour éviter le TDZ sur clearValidation
+	watch(modelValueRef, (newValue) => {
+		if (isInternalUpdate.value) return
+
+		if (newValue === undefined || newValue === null) {
+			numberValue.value = ''
+			keyValue.value = ''
+			clearValidation()
+			return
+		}
+		if (newValue.length === 15) {
+			const number = newValue.slice(0, -2)
+			const key = newValue.slice(-2)
+			numberValue.value = number
+			keyValue.value = key
+		}
+		if (newValue.length === 14) {
+			const number = newValue.slice(0, -1)
+			const key = newValue.slice(-1)
+			numberValue.value = number
+			keyValue.value = key
+		}
+		if (newValue.length <= 13) {
+			const number = newValue
+			numberValue.value = number
+			keyValue.value = ''
+		}
+	}, { immediate: true })
+
 	const validateOnSubmit = () => {
 		return validateFields(true)
 	}
 
+	useValidatable(validateOnSubmit, clearValidation)
+
+	const hasMessages = computed(() => {
+		if (props.disableErrorHandling) return false
+		return hasFieldErrors.value
+			|| numberValidation.hasWarning.value
+			|| keyValidation.hasWarning.value
+			|| (numberValidation.hasSuccess.value && props.showSuccessMessages)
+			|| (keyValidation.hasSuccess.value && props.showSuccessMessages)
+	})
+
 	// Propriétés calculées pour les attributs ARIA et les états d'erreur
 	const ariaRequired = computed(() => props.required ? 'true' : undefined)
 	const ariaInvalidNumber = computed(() => hasFieldErrors.value ? 'true' : undefined)
@@ -339,12 +369,14 @@
 
 	defineExpose({
 		validateOnSubmit,
+		clearValidation,
 		numberMask,
 		keyMask,
 		numberValidation,
 		keyValidation,
 	} satisfies {
 		validateOnSubmit: () => Promise<boolean>
+		clearValidation: () => void
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 		numberMask: { mask: string, preProcess: (value: string) => string, tokens: Record<string, any> }
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -390,7 +422,7 @@
 				:hide-spin-buttons="props.hideSpinButtons"
 				:placeholder="props.placeholder"
 				:readonly="props.readonly"
-				:clearable="props.clearable"
+				:is-clearable="props.clearable"
 				:counter="props.counter"
 				:hint="props.numberHint || locales.numberHint"
 				:persistent-hint="props.persistentHint"
@@ -428,7 +460,7 @@
 				:hide-spin-buttons="props.hideSpinButtons"
 				:placeholder="props.placeholder"
 				:readonly="props.readonly"
-				:clearable="props.clearable"
+				:is-clearable="props.clearable"
 				:counter="props.counter"
 				:hint="props.keyHint || locales.keyHint"
 				:persistent-hint="props.persistentHint"
@@ -448,6 +480,13 @@
 				@input="handleKeyInput"
 			/>
 		</div>
+		<div
+			v-if="helpText && !hasMessages && !hideDetails"
+			class="sy-nir-help-text"
+			style="flex: 1 0 100%;"
+		>
+			{{ helpText }}
+		</div>
 		<div
 			class="sy-messages"
 			style="flex: 1 0 100%;"
@@ -513,6 +552,13 @@
 				/>
 			</div>
 		</div>
+		<div
+			v-if="helpText && hasMessages && !hideDetails"
+			class="sy-nir-help-text"
+			style="flex: 1 0 100%;"
+		>
+			{{ helpText }}
+		</div>
 	</component>
 </template>
 
@@ -566,6 +612,17 @@
 	width: 100%;
 }
 
+/* La zone de détails interne des champs ne sert qu'au hint au focus : on ne réserve
+   pas d'espace vide sous l'input (helpText/messages NirField gérés à part), pour coller
+   le helpText au champ comme SySelect. Elle grandit naturellement si un hint s'affiche au focus. */
+.nir-field :deep(.v-input__details) {
+	min-height: 0 !important;
+}
+
+.nir-field :deep(.v-input__details .v-messages) {
+	min-height: 0;
+}
+
 .key-field {
 	min-width: 110px;
 	flex-wrap: wrap;
@@ -592,18 +649,27 @@
 	padding-bottom: 6px;
 }
 
+.sy-nir-help-text {
+	font-size: var(--v-fontSize-liensEtLibelles);
+	font-weight: 400;
+	letter-spacing: 0.0333em;
+	line-height: 16px;
+	padding-inline: 16px;
+	color: rgba(var(--v-theme-onSurface), var(--v-medium-emphasis-opacity));
+}
+
 .sy-number-errors,
 .sy-key-errors {
-	color: rgb(var(--v-theme-textError));
+	color: rgb(var(--v-theme-error));
 }
 
 .sy-number-warnings,
 .sy-key-warnings {
-	color: rgb(var(--v-theme-textWarning));
+	color: rgb(var(--v-theme-onWarningVariant));
 }
 
 .sy-number-success,
 .sy-key-success {
-	color: rgb(var(--v-theme-textSuccess));
+	color: rgb(var(--v-theme-onSuccessVariant));
 }
 </style>

package/src/components/NirField/tests/NirField.spec.ts

@@ -397,28 +397,15 @@ describe('NirField.vue', () => {
 		})
 
 		it('respects showSuccessMessages prop', async () => {
-			// Par défaut, showSuccessMessages = true
+			// Par défaut, showSuccessMessages = false
 			await wrapper.setProps({ showSuccessMessages: true })
-
-			// On ne peut pas tester facilement le DOM de VMessages dans ce contexte jsdom avec Vuetify
-			// On vérifie donc que la prop showSuccessMessages est bien transmise aux éléments enfants
-			// internes si applicable, ou que le comportement conditionnel est correctement câblé.
-			// La prop showSuccessMessages est utilisée dans v-show="numberValidation.hasSuccess.value && showSuccessMessages"
-
-			// Pour tester que Vue applique bien la condition, on vérifie l'état de notre wrapper
 			expect(wrapper.props('showSuccessMessages')).toBe(true)
 
-			// Avec showSuccessMessages = false
 			await wrapper.setProps({ showSuccessMessages: false })
 			await wrapper.vm.$nextTick()
 			await flushPromises()
 
 			expect(wrapper.props('showSuccessMessages')).toBe(false)
-
-			// On vérifie également que l'attribut est passé aux sous-composants s'ils l'utilisent
-			const textFields = wrapper.findAllComponents({ name: 'SyTextField' })
-			// SyTextField a showSuccessMessages false en dur dans NirField
-			expect(textFields[0]?.props('showSuccessMessages')).toBe(false)
 		})
 
 		it('respects disableErrorHandling prop', async () => {
@@ -452,6 +439,23 @@ describe('NirField.vue', () => {
 			expect(textFields[1]?.props('appendTooltip')).toBe(keyTooltip)
 		})
 
+		it('affiche les hints internes (numberHint/keyHint) quand persistentHint est true', async () => {
+			const w = mount(NirField, {
+				props: {
+					label: 'Identifiant',
+					numberHint: 'Indice numéro',
+					keyHint: 'Indice clé',
+					persistentHint: true,
+				},
+			})
+			activeWrappers.push(w)
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			expect(w.text()).toContain('Indice numéro')
+			expect(w.text()).toContain('Indice clé')
+		})
+
 		it('renders asterisks correctly when displayAsterisk is true AND required is true', async () => {
 			// L'astérisque n'est affiché que si required = true ET displayAsterisk = true
 			await wrapper.setProps({ required: true, displayAsterisk: true, numberLabel: 'Numéro', keyLabel: 'Clé' })
@@ -622,4 +626,121 @@ describe('NirField.vue', () => {
 			focusSpy.mockRestore()
 		})
 	})
+
+	describe('helpText', () => {
+		it('affiche le helpText quand aucun message de validation', async () => {
+			const w = mount(NirField, { props: { label: 'Identifiant', helpText: 'Saisissez le NIR' } })
+			activeWrappers.push(w)
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			const help = w.find('.sy-nir-help-text')
+			expect(help.exists()).toBe(true)
+			expect(help.text()).toBe('Saisissez le NIR')
+		})
+
+		it('n\'affiche pas le helpText quand hideDetails est true', async () => {
+			const w = mount(NirField, { props: { label: 'Identifiant', helpText: 'Saisissez le NIR', hideDetails: true } })
+			activeWrappers.push(w)
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			expect(w.find('.sy-nir-help-text').exists()).toBe(false)
+		})
+
+		it('affiche toujours le helpText lorsqu\'une erreur est présente', async () => {
+			const w = mount(NirField, { props: { label: 'Identifiant', helpText: 'Saisissez le NIR', required: true } })
+			activeWrappers.push(w)
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			// Déclenche l'erreur "requis" (champ vide)
+			await w.vm.validateOnSubmit()
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			const help = w.find('.sy-nir-help-text')
+			expect(help.exists()).toBe(true)
+			expect(help.text()).toBe('Saisissez le NIR')
+		})
+	})
+
+	describe('clearable', () => {
+		it('affiche le bouton clear quand clearable et qu\'il y a une valeur', async () => {
+			const w = mount(NirField, { props: { label: 'Identifiant', clearable: true } })
+			activeWrappers.push(w)
+			await w.find('.number-field input').setValue('2940375120005')
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			expect(w.find('.number-field .sy-text-field__clear').exists()).toBe(true)
+		})
+
+		it('n\'affiche pas le bouton clear quand clearable est false', async () => {
+			const w = mount(NirField, { props: { label: 'Identifiant', clearable: false } })
+			activeWrappers.push(w)
+			await w.find('.number-field input').setValue('2940375120005')
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			expect(w.find('.number-field .sy-text-field__clear').exists()).toBe(false)
+		})
+
+		it('vide le champ au clic sur le bouton clear', async () => {
+			const w = mount(NirField, { props: { label: 'Identifiant', clearable: true } })
+			activeWrappers.push(w)
+			const numberInput = w.find('.number-field input')
+			await numberInput.setValue('2940375120005')
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			await w.find('.number-field .sy-text-field__clear').trigger('click')
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			expect((numberInput.element as HTMLInputElement).value).toBe('')
+		})
+	})
+
+	describe('validation Vuetify (numberRules / keyRules)', () => {
+		const numberRules = [(v: string) => (!!v && v.replace(/\s/g, '').length === 13) || 'Le numéro doit contenir 13 chiffres']
+		const keyRules = [(v: string) => (!!v && v.replace(/\s/g, '').length === 2) || 'La clé doit contenir 2 chiffres']
+
+		it('applique numberRules : un NIR partiel est invalide', async () => {
+			const w = mount(NirField, { props: { label: 'Identifiant', useVuetifyValidation: true, numberRules, keyRules } })
+			activeWrappers.push(w)
+			await w.find('.number-field input').setValue('12345')
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			const isValid = await w.vm.validateOnSubmit()
+			await flushPromises()
+			expect(isValid).toBe(false)
+		})
+
+		it('applique keyRules : une clé vide invalide même si le numéro est complet', async () => {
+			const w = mount(NirField, { props: { label: 'Identifiant', useVuetifyValidation: true, numberRules, keyRules } })
+			activeWrappers.push(w)
+			await w.find('.number-field input').setValue('2940375120005')
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			const isValid = await w.vm.validateOnSubmit()
+			await flushPromises()
+			expect(isValid).toBe(false)
+		})
+
+		it('valide quand le numéro (13 chiffres) et la clé (2 chiffres) respectent les règles', async () => {
+			const w = mount(NirField, { props: { label: 'Identifiant', useVuetifyValidation: true, numberRules, keyRules } })
+			activeWrappers.push(w)
+			await w.find('.number-field input').setValue('2940375120005')
+			await w.find('.key-field input').setValue('05')
+			await w.vm.$nextTick()
+			await flushPromises()
+
+			const isValid = await w.vm.validateOnSubmit()
+			await flushPromises()
+			expect(isValid).toBe(true)
+		})
+	})
 })

package/src/components/NirField/tests/NirField.visual.cy.ts

@@ -0,0 +1,28 @@
+import NirField from '../NirField.vue'
+
+describe('NirField - Visual regression tests', () => {
+	it('displays the NIR field by default', () => {
+		cy.mountWithVuetify(NirField)
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('nir-field-default', cy.get('.v-application'))
+	})
+
+	it('displays the NIR field with key display', () => {
+		cy.mountWithVuetify(NirField, {
+			props: { displayKey: true },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('nir-field-with-key', cy.get('.v-application'))
+	})
+
+	it('displays the NIR field in complex mode', () => {
+		cy.mountWithVuetify(NirField, {
+			props: { nirType: 'complexe' },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('nir-field-complex', cy.get('.v-application'))
+	})
+})

package/src/components/NirField/tests/useNirValidation.spec.ts

@@ -446,4 +446,172 @@ describe('useNirValidation via NirField component', () => {
 		const isValid = await wrapper.vm.validateOnSubmit()
 		expect(isValid).toBe(true)
 	})
+
+	it('ne devrait afficher aucune erreur ni état quand disableErrorHandling est vrai', async () => {
+		wrapper = await createWrapper({ required: true, disableErrorHandling: true })
+
+		await wrapper.find('.number-field input').trigger('focus')
+		await wrapper.find('.number-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(wrapper.vm.numberValidation.errors.value).toEqual([])
+		expect(wrapper.vm.numberValidation.hasError.value).toBe(false)
+
+		await wrapper.find('.key-field input').trigger('focus')
+		await wrapper.find('.key-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(wrapper.vm.keyValidation.errors.value).toEqual([])
+		expect(wrapper.vm.keyValidation.hasError.value).toBe(false)
+	})
+
+	it('devrait valider à chaque changement de valeur quand isValidateOnBlur est faux', async () => {
+		wrapper = await createWrapper({ required: true, isValidateOnBlur: false })
+
+		const numberInput = wrapper.find('.number-field input')
+
+		// Saisie d'une valeur invalide sans blur
+		await numberInput.setValue('123')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// L'erreur doit apparaître immédiatement, sans blur
+		expect(wrapper.vm.numberValidation.errors.value).toContain(locales.errorInvalidNumber)
+
+		// Correction vers une valeur valide
+		await numberInput.setValue('2940375120005')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(wrapper.vm.numberValidation.errors.value).toEqual([])
+	})
+
+	it('devrait afficher les errorMessages injectés depuis le parent', async () => {
+		const injectedError = 'Erreur injectée depuis le parent'
+		wrapper = await createWrapper({ errorMessages: [injectedError] })
+
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// L'état d'erreur doit refléter le message injecté sans déclencher de validation
+		expect(wrapper.vm.numberValidation.hasError.value).toBe(true)
+		expect(wrapper.vm.numberValidation.errors.value).toContain(injectedError)
+	})
+
+	it('devrait réinitialiser la validation quand modelValue passe à null ou undefined', async () => {
+		// Partir d'un NIR invalide pour avoir une erreur
+		wrapper = await createWrapper({ required: true, modelValue: '199012345678' })
+
+		await wrapper.vm.validateOnSubmit()
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(wrapper.vm.numberValidation.errors.value.length).toBeGreaterThan(0)
+
+		// Remettre modelValue à undefined simule un reset depuis le parent
+		await wrapper.setProps({ modelValue: undefined })
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(wrapper.vm.numberValidation.errors.value).toEqual([])
+		expect(wrapper.vm.keyValidation.errors.value).toEqual([])
+	})
+
+	it('devrait afficher les warningMessages injectés depuis le parent', async () => {
+		const injectedWarning = 'Avertissement injecté depuis le parent'
+		wrapper = await createWrapper({ warningMessages: [injectedWarning] })
+
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(wrapper.vm.numberValidation.hasWarning.value).toBe(true)
+		expect(wrapper.vm.numberValidation.warnings.value).toContain(injectedWarning)
+	})
+
+	it('devrait afficher les successMessages injectés depuis le parent', async () => {
+		const injectedSuccess = 'Succès injecté depuis le parent'
+		wrapper = await createWrapper({ successMessages: [injectedSuccess], showSuccessMessages: true })
+
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(wrapper.vm.numberValidation.hasSuccess.value).toBe(true)
+		expect(wrapper.vm.numberValidation.successes.value).toContain(injectedSuccess)
+	})
+
+	it('devrait refléter l\'état d\'avertissement forcé via la prop hasWarning', async () => {
+		wrapper = await createWrapper({ hasWarning: true })
+
+		expect(wrapper.vm.numberValidation.hasWarning.value).toBe(true)
+	})
+
+	it('devrait refléter l\'état de succès forcé via la prop hasSuccess', async () => {
+		wrapper = await createWrapper({ hasSuccess: true })
+
+		expect(wrapper.vm.numberValidation.hasSuccess.value).toBe(true)
+	})
+
+	it('devrait retourner false sur validateOnSubmit quand le champ est requis et vide', async () => {
+		wrapper = await createWrapper({ required: true })
+
+		const isValid = await wrapper.vm.validateOnSubmit()
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(isValid).toBe(false)
+		expect(wrapper.vm.numberValidation.hasError.value).toBe(true)
+	})
+
+	it('devrait retourner false sur validateOnSubmit quand le NIR est invalide', async () => {
+		wrapper = await createWrapper({ required: true })
+		await wrapper.find('.number-field input').setValue('1234567890123') // 13 chiffres mais NIR invalide
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		const isValid = await wrapper.vm.validateOnSubmit()
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(isValid).toBe(false)
+	})
+
+	it('devrait plafonner le nombre d\'erreurs affichées via maxErrors', async () => {
+		const failingRules = [
+			{ type: 'custom', options: { validate: () => false, message: 'Erreur custom 1' } },
+			{ type: 'custom', options: { validate: () => false, message: 'Erreur custom 2' } },
+		]
+
+		const limited = await createWrapper({ customNumberRules: failingRules, maxErrors: 1, modelValue: '199012345678' })
+		await limited.vm.validateOnSubmit()
+		await limited.vm.$nextTick()
+		await flushPromises()
+		expect(limited.vm.numberValidation.errors.value.length).toBe(1)
+
+		const extended = await createWrapper({ customNumberRules: failingRules, maxErrors: 5, modelValue: '199012345678' })
+		await extended.vm.validateOnSubmit()
+		await extended.vm.$nextTick()
+		await flushPromises()
+		expect(extended.vm.numberValidation.errors.value.length).toBeGreaterThan(1)
+	})
+
+	it('ne devrait pas bloquer la soumission à cause d\'un avertissement (warning non bloquant)', async () => {
+		const warningMessage = 'Avertissement non bloquant'
+		// NIR complet et valide (13 chiffres) + clé valide, avec une règle d'avertissement qui se déclenche
+		wrapper = await createWrapper({
+			modelValue: '294037512000591',
+			customNumberWarningRules: [{ type: 'custom', options: { validate: () => warningMessage, message: warningMessage } }],
+		})
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		const isValid = await wrapper.vm.validateOnSubmit()
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		expect(wrapper.vm.numberValidation.hasWarning.value).toBe(true)
+		expect(wrapper.vm.numberValidation.hasError.value).toBe(false)
+		expect(isValid).toBe(true)
+	})
 })