@cnamts/synapse 1.0.25 → 1.0.27

package/src/composables/tests/useFormFieldErrorHandling.spec.ts

@@ -0,0 +1,234 @@
+import { describe, it, expect, vi } from 'vitest'
+import { ref, nextTick, defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
+import { useFormFieldErrorHandling } from '../useFormFieldErrorHandling'
+
+function withSetup<T>(
+	composable: () => T,
+): { result: T, unmount: () => void } {
+	let result!: T
+	const Component = defineComponent({
+		setup() {
+			result = composable()
+			return {}
+		},
+		template: '<div />',
+	})
+	const wrapper = mount(Component)
+	return { result, unmount: () => wrapper.unmount() }
+}
+
+describe('useFormFieldErrorHandling', () => {
+	describe('initialisation', () => {
+		it('retourne les champs attendus', () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling({}, modelValue))
+
+			expect(result).toHaveProperty('validateField')
+			expect(result).toHaveProperty('validateOnSubmit')
+			expect(result).toHaveProperty('checkErrorOnBlur')
+			expect(result).toHaveProperty('hasError')
+			expect(result).toHaveProperty('hasWarning')
+			expect(result).toHaveProperty('hasSuccess')
+			expect(result).toHaveProperty('errors')
+			expect(result).toHaveProperty('warnings')
+			expect(result).toHaveProperty('successes')
+			unmount()
+		})
+
+		it('synchronise errorMessages externes immédiatement', () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ errorMessages: ['Erreur externe'] },
+				modelValue,
+			))
+			expect(result.errors.value).toContain('Erreur externe')
+			unmount()
+		})
+
+		it('synchronise warningMessages externes immédiatement', () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ warningMessages: ['Attention'] },
+				modelValue,
+			))
+			expect(result.warnings.value).toContain('Attention')
+			unmount()
+		})
+
+		it('synchronise successMessages externes immédiatement', () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ successMessages: ['OK'] },
+				modelValue,
+			))
+			expect(result.successes.value).toContain('OK')
+			unmount()
+		})
+	})
+
+	describe('validateField', () => {
+		it('retourne true pour une valeur null non requise', async () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling({}, modelValue))
+			const res = await result.validateField(null)
+			expect(res).toBe(true)
+			unmount()
+		})
+
+		it('retourne true pour un tableau vide non requis', async () => {
+			const modelValue = ref<unknown>([])
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling({}, modelValue))
+			const res = await result.validateField([])
+			expect(res).toBe(true)
+			unmount()
+		})
+
+		it('retourne true et vide la validation si disableErrorHandling', async () => {
+			const modelValue = ref<unknown>('test')
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ disableErrorHandling: true },
+				modelValue,
+			))
+			const res = await result.validateField('test')
+			expect(res).toBe(true)
+			expect(result.hasError.value).toBe(false)
+			unmount()
+		})
+
+		it('échoue si required et valeur null', async () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ required: true, label: 'Nom' },
+				modelValue,
+			))
+			const res = await result.validateField(null)
+			expect(res).toBe(false)
+			unmount()
+		})
+
+		it('réussit si required et valeur non nulle', async () => {
+			const modelValue = ref<unknown>('Alice')
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ required: true, label: 'Nom' },
+				modelValue,
+			))
+			const res = await result.validateField('Alice')
+			expect(res).toBe(true)
+			unmount()
+		})
+	})
+
+	describe('validateOnSubmit', () => {
+		it('valide la valeur courante du modelValue', async () => {
+			const modelValue = ref<unknown>('valeur')
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ required: true },
+				modelValue,
+			))
+			const res = await result.validateOnSubmit()
+			expect(res).toBe(true)
+			unmount()
+		})
+
+		it('échoue si modelValue est null et required', async () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ required: true, label: 'Champ' },
+				modelValue,
+			))
+			const res = await result.validateOnSubmit()
+			expect(res).toBe(false)
+			unmount()
+		})
+	})
+
+	describe('checkErrorOnBlur', () => {
+		it('appelle emitUpdate si fourni', async () => {
+			const modelValue = ref<unknown>('test')
+			const emitUpdate = vi.fn()
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling({}, modelValue, emitUpdate))
+			result.checkErrorOnBlur()
+			await nextTick()
+			expect(emitUpdate).toHaveBeenCalledOnce()
+			unmount()
+		})
+
+		it('ne plante pas si emitUpdate n\'est pas fourni', () => {
+			const modelValue = ref<unknown>('test')
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling({}, modelValue))
+			expect(() => result.checkErrorOnBlur()).not.toThrow()
+			unmount()
+		})
+	})
+
+	describe('hasError / hasWarning / hasSuccess', () => {
+		it('hasError reflète le prop hasError externe', () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ hasError: true },
+				modelValue,
+			))
+			expect(result.hasError.value).toBe(true)
+			unmount()
+		})
+
+		it('hasWarning reflète le prop hasWarning externe', () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ hasWarning: true },
+				modelValue,
+			))
+			expect(result.hasWarning.value).toBe(true)
+			unmount()
+		})
+
+		it('hasSuccess prop externe est indépendant de hasError externe', async () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ hasError: true, hasSuccess: true },
+				modelValue,
+			))
+			expect(result.hasSuccess.value).toBe(true)
+			unmount()
+		})
+
+		it('disableErrorHandling vide les erreurs de validation', async () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ disableErrorHandling: true },
+				modelValue,
+			))
+			await nextTick()
+			expect(result.hasError.value).toBe(false)
+			unmount()
+		})
+	})
+
+	describe('watcher modelValue', () => {
+		it('re-valide automatiquement quand modelValue change (isValidateOnBlur=false)', async () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ required: true, label: 'Test', isValidateOnBlur: false },
+				modelValue,
+			))
+			modelValue.value = 'nouvelle valeur'
+			await nextTick()
+			await nextTick()
+			expect(result.errors.value.length).toBe(0)
+			unmount()
+		})
+
+		it('ne re-valide pas automatiquement si isValidateOnBlur=true', async () => {
+			const modelValue = ref<unknown>(null)
+			const { result, unmount } = withSetup(() => useFormFieldErrorHandling(
+				{ required: true, isValidateOnBlur: true },
+				modelValue,
+			))
+			modelValue.value = 'test'
+			await nextTick()
+			expect(result.errors.value.length).toBe(0)
+			unmount()
+		})
+	})
+})

package/src/composables/unifyValidation/documentationValidationProps.ts

@@ -59,7 +59,7 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 			},
 		},
 		showSuccessMessages: {
-			description: 'Affiche les messages de succès lorsque la validation est réussie.',
+			description: 'Affiche les messages de succès lorsque la validation est réussie. Si la prop est à `false` cela cache uniquement les messages texte, l\'état visuel reste actif.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
@@ -107,7 +107,7 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 			},
 		},
 		customRules: {
-			description: 'Les règles de validation personnalisées à appliquer au champ.',
+			description: 'Les règles de validation personnalisées d\'erreur (bloquantes) à appliquer au champ. Elles sont évaluées à partir de la valeur du champ.',
 			control: 'object',
 			table: {
 				type: {
@@ -127,7 +127,7 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 			},
 		},
 		customWarningRules: {
-			description: 'Les règles de validation personnalisées pour les avertissements à appliquer au champ.',
+			description: 'Les règles de validation personnalisées d\'avertissement (non bloquantes) à appliquer au champ. Elles sont évaluées à partir de la valeur du champ.',
 			control: 'object',
 			table: {
 				type: {
@@ -137,17 +137,17 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 	type: ${builtInRuleType},
 	options: {
 		validate: (value: unknown) => boolean | string,
-		message: string,
+		warningMessage: string,
 		[key: string]: unknown
 	}
 }
-					`,
+						`,
 				},
 				category: 'props',
 			},
 		},
 		customSuccessRules: {
-			description: 'Les règles de validation personnalisées pour les succès à appliquer au champ.',
+			description: 'Les règles de validation personnalisées de succès à appliquer au champ. Elles sont évaluées à partir de la valeur du champ.',
 			control: 'object',
 			table: {
 				type: {
@@ -157,17 +157,17 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 	type: ${builtInRuleType},
 	options: {
 		validate: (value: unknown) => boolean | string,
-		message: string,
+		successMessage: string,
 		[key: string]: unknown
 	}
 }
-					`,
+						`,
 				},
 				category: 'props',
 			},
 		},
 		errorMessages: {
-			description: 'Permet de forcer des messages d\'erreur spécifiques.',
+			description: 'Permet d\'injecter des messages d\'erreur depuis le parent. Aucun calcul de validation n\'est exécuté.',
 			control: 'object',
 			table: {
 				type: { summary: 'array<string>' },
@@ -175,7 +175,7 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 			},
 		},
 		warningMessages: {
-			description: 'Permet de forcer des messages d\'avertissement spécifiques.',
+			description: 'Permet d\'injecter des messages d\'avertissement depuis le parent. Aucun calcul de validation n\'est exécuté.',
 			control: 'object',
 			table: {
 				type: { summary: 'array<string>' },
@@ -183,7 +183,7 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 			},
 		},
 		successMessages: {
-			description: 'Permet de forcer des messages de succès spécifiques.',
+			description: 'Permet d\'injecter des messages de succès depuis le parent. Aucun calcul de validation n\'est exécuté.',
 			control: 'object',
 			table: {
 				type: { summary: 'array<string>' },
@@ -231,5 +231,5 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 				category: 'props',
 			},
 		},
-	}
+	} as const
 }

package/src/composables/unifyValidation/tests/documentationValidationProps.spec.ts

@@ -0,0 +1,177 @@
+import { describe, it, expect } from 'vitest'
+import { getValidationDocumentation } from '../documentationValidationProps'
+
+const EXPECTED_KEYS = [
+	'readonly',
+	'disabled',
+	'required',
+	'isValidateOnBlur',
+	'showSuccessMessages',
+	'disableErrorHandling',
+	'useVuetifyValidation',
+	'label',
+	'rules',
+	'customRules',
+	'customWarningRules',
+	'customSuccessRules',
+	'errorMessages',
+	'warningMessages',
+	'successMessages',
+	'hasError',
+	'hasWarning',
+	'hasSuccess',
+	'hideDetails',
+	'maxErrors',
+] as const
+
+describe('getValidationDocumentation', () => {
+	describe('structure retournée', () => {
+		it('retourne toutes les clés attendues pour le type "all" (défaut)', () => {
+			const doc = getValidationDocumentation()
+			for (const key of EXPECTED_KEYS) {
+				expect(doc).toHaveProperty(key)
+			}
+		})
+
+		it('chaque entrée possède une description string non vide', () => {
+			const doc = getValidationDocumentation()
+			for (const key of EXPECTED_KEYS) {
+				expect(typeof doc[key].description).toBe('string')
+				expect(doc[key].description.length).toBeGreaterThan(0)
+			}
+		})
+
+		it('chaque entrée possède une table avec un type', () => {
+			const doc = getValidationDocumentation()
+			for (const key of EXPECTED_KEYS) {
+				expect(doc[key]).toHaveProperty('table')
+				expect(doc[key].table).toHaveProperty('type')
+			}
+		})
+	})
+
+	describe('type "all" (défaut)', () => {
+		it('customRules inclut les types string, number et date', () => {
+			const doc = getValidationDocumentation('all')
+			const detail = doc.customRules.table.type.detail
+			expect(detail).toContain('minLength')
+			expect(detail).toContain('min')
+			expect(detail).toContain('noWeekend')
+		})
+
+		it('customWarningRules inclut tous les types', () => {
+			const doc = getValidationDocumentation('all')
+			const detail = doc.customWarningRules.table.type.detail
+			expect(detail).toContain('maxLength')
+			expect(detail).toContain('max')
+			expect(detail).toContain('notAfterDate')
+		})
+	})
+
+	describe('type "string"', () => {
+		it('customRules inclut les types string mais pas number ni date', () => {
+			const doc = getValidationDocumentation('string')
+			const detail = doc.customRules.table.type.detail
+			expect(detail).toContain('minLength')
+			expect(detail).toContain('email')
+			expect(detail).not.toContain('noWeekend')
+			expect(detail).not.toContain('notAfterDate')
+		})
+	})
+
+	describe('type "number"', () => {
+		it('customRules inclut les types number mais pas string ni date', () => {
+			const doc = getValidationDocumentation('number')
+			const detail = doc.customRules.table.type.detail
+			expect(detail).toContain('\'min\'')
+			expect(detail).toContain('\'max\'')
+			expect(detail).not.toContain('minLength')
+			expect(detail).not.toContain('noWeekend')
+		})
+	})
+
+	describe('type "date"', () => {
+		it('customRules inclut les types date mais pas string ni number', () => {
+			const doc = getValidationDocumentation('date')
+			const detail = doc.customRules.table.type.detail
+			expect(detail).toContain('noWeekend')
+			expect(detail).toContain('notAfterDate')
+			expect(detail).not.toContain('minLength')
+		})
+	})
+
+	describe('valeurs par défaut documentées', () => {
+		it('readonly a un defaultValue false', () => {
+			const doc = getValidationDocumentation()
+			expect(doc.readonly.table.defaultValue).toEqual({ summary: 'false' })
+		})
+
+		it('isValidateOnBlur a un defaultValue true', () => {
+			const doc = getValidationDocumentation()
+			expect(doc.isValidateOnBlur.table.defaultValue).toEqual({ summary: 'true' })
+		})
+
+		it('showSuccessMessages a un defaultValue true', () => {
+			const doc = getValidationDocumentation()
+			expect(doc.showSuccessMessages.table.defaultValue).toEqual({ summary: 'true' })
+		})
+
+		it('disableErrorHandling a un defaultValue false', () => {
+			const doc = getValidationDocumentation()
+			expect(doc.disableErrorHandling.table.defaultValue).toEqual({ summary: 'false' })
+		})
+
+		it('useVuetifyValidation a un defaultValue false', () => {
+			const doc = getValidationDocumentation()
+			expect(doc.useVuetifyValidation.table.defaultValue).toEqual({ summary: 'false' })
+		})
+	})
+
+	describe('contrôles Storybook', () => {
+		it('les props booléennes ont control="boolean"', () => {
+			const doc = getValidationDocumentation()
+			const booleanProps = ['readonly', 'disabled', 'required', 'isValidateOnBlur', 'showSuccessMessages', 'disableErrorHandling', 'useVuetifyValidation', 'hasError', 'hasWarning', 'hasSuccess', 'hideDetails'] as const
+			for (const key of booleanProps) {
+				expect(doc[key].control).toBe('boolean')
+			}
+		})
+
+		it('label a control="text"', () => {
+			const doc = getValidationDocumentation()
+			expect(doc.label.control).toBe('text')
+		})
+
+		it('customRules a control="object"', () => {
+			const doc = getValidationDocumentation()
+			expect(doc.customRules.control).toBe('object')
+		})
+
+		it('maxErrors a control="number"', () => {
+			const doc = getValidationDocumentation()
+			expect(doc.maxErrors.control).toBe('number')
+		})
+	})
+
+	describe('catégories table', () => {
+		it('toutes les entrées ont category="props"', () => {
+			const doc = getValidationDocumentation()
+			for (const key of EXPECTED_KEYS) {
+				expect(doc[key].table.category).toBe('props')
+			}
+		})
+	})
+
+	describe('appels successifs', () => {
+		it('deux appels avec le même type retournent des objets équivalents', () => {
+			const doc1 = getValidationDocumentation('string')
+			const doc2 = getValidationDocumentation('string')
+			expect(JSON.stringify(doc1)).toBe(JSON.stringify(doc2))
+		})
+
+		it('deux appels avec des types différents retournent des objets différents pour customRules', () => {
+			const docString = getValidationDocumentation('string')
+			const docDate = getValidationDocumentation('date')
+			expect(docString.customRules.table.type.detail).not.toBe(docDate.customRules.table.type.detail)
+		})
+	})
+})

package/src/composables/unifyValidation/tests/useCustomValidation.spec.ts

@@ -187,6 +187,36 @@ describe('useCustomValidation', () => {
 		expect(args.errors.value).toEqual([])
 	})
 
+	it('does not trigger validation on blur when isValidateOnBlur is false', async () => {
+		const args = defaultArgs()
+		args.focused.value = true
+		args.modelValue.value = ''
+		args.isValidateOnBlur.value = false
+		withSetup(() =>
+			useCustomValidation(
+				args.modelValue,
+				args.customRules,
+				args.customWarningRules,
+				args.customSuccessRules,
+				args.errors,
+				args.warnings,
+				args.successes,
+				args.showSuccessMessages,
+				args.label,
+				args.focused,
+				args.isValidateOnBlur,
+				args.disableErrorHandling,
+			),
+		)
+
+		args.focused.value = false
+		await nextTick()
+
+		expect(args.errors.value).toEqual([])
+		expect(args.warnings.value).toEqual([])
+		expect(args.successes.value).toEqual([])
+	})
+
 	it('triggers validation on modelValue change when isValidateOnBlur is false', async () => {
 		const args = defaultArgs()
 		args.isValidateOnBlur.value = false
@@ -468,7 +498,8 @@ describe('useCustomValidation', () => {
 				args.disableErrorHandling,
 			),
 		)
-		await result.validate()
+		const validationResult = await result.validate()
+		expect(validationResult.hasSuccess).toBe(true)
 		expect(args.successes.value).toEqual([])
 	})
 

package/src/composables/unifyValidation/tests/useValidation.spec.ts

@@ -327,12 +327,12 @@ describe('useValidation (unifyValidation)', () => {
 					expect(result.errors.value).toContain('Requis blur')
 				})
 
-				it('with isValidateOnBlur=false, does not validate while focused then validates on blur', async () => {
+				it('with isValidateOnBlur=false, does not validate on blur (validates on input change instead)', async () => {
 					const params = makeParams({
 						useVuetifyValidation: false as const,
 						isValidateOnBlur: ref(false),
 						focused: ref(true),
-						modelValue: ref(''),
+						modelValue: ref('valeur initiale'),
 						customRules: ref([{ type: 'required', options: { message: 'Requis blur input-mode' } }]),
 					})
 					const { result } = withSetup(() => useValidation(params as Parameters<typeof useValidation>[0]))
@@ -342,6 +342,10 @@ describe('useValidation (unifyValidation)', () => {
 
 					params.focused.value = false
 					await nextTick()
+					expect(result.errors.value).toEqual([])
+
+					params.modelValue.value = ''
+					await nextTick()
 					expect(result.errors.value).toContain('Requis blur input-mode')
 				})
 			})
@@ -1490,6 +1494,7 @@ describe('useValidation (unifyValidation)', () => {
 			const { result } = withSetup(() => useValidation(params as Parameters<typeof useValidation>[0]))
 
 			await result.validate()
+			expect(result.hasSuccess.value).toBe(true)
 			expect(result.successes.value).toContain('Succès externe')
 		})
 
@@ -1510,9 +1515,30 @@ describe('useValidation (unifyValidation)', () => {
 			const { result } = withSetup(() => useValidation(params as Parameters<typeof useValidation>[0]))
 
 			await result.validate()
+			expect(result.hasSuccess.value).toBe(true)
 			expect(result.successes.value).not.toContain('Succès interne')
 			expect(result.successes.value).toContain('Succès externe')
 		})
+
+		it('keeps hasSuccess true when inner success messages are hidden', async () => {
+			const params = makeParams({
+				modelValue: ref('ok'),
+				showSuccessMessages: ref(false),
+				customRules: ref([]),
+				customSuccessRules: ref([{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value === 'ok',
+						successMessage: 'Succès interne',
+					},
+				}]),
+			})
+			const { result } = withSetup(() => useValidation(params as Parameters<typeof useValidation>[0]))
+
+			await result.validate()
+			expect(result.hasSuccess.value).toBe(true)
+			expect(result.successes.value).toEqual([])
+		})
 	})
 
 	describe('rules concurrences', () => {