@cnamts/synapse 1.0.26 → 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

@@ -137,11 +137,11 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 	type: ${builtInRuleType},
 	options: {
 		validate: (value: unknown) => boolean | string,
-		message: string,
+		warningMessage: string,
 		[key: string]: unknown
 	}
 }
-					`,
+						`,
 				},
 				category: 'props',
 			},
@@ -157,11 +157,11 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 	type: ${builtInRuleType},
 	options: {
 		validate: (value: unknown) => boolean | string,
-		message: string,
+		successMessage: string,
 		[key: string]: unknown
 	}
 }
-					`,
+						`,
 				},
 				category: 'props',
 			},
@@ -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

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')
 				})
 			})

package/src/composables/unifyValidation/useCustomValidation.ts

@@ -1,6 +1,6 @@
 import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 import { useValidatable } from '@/composables/validation/useValidatable'
-import { ref, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
 /**
@@ -24,21 +24,31 @@ export function useCustomValidation(
 ) {
 	const hasSuccess = ref(false)
 
-	let validator = useValidation({
+	const validatorOptions = reactive({
 		showSuccessMessages: showSuccessMessages.value,
 		fieldIdentifier: label.value,
 		disableErrorHandling: disableErrorHandling.value,
 	})
 
+	const validator = useValidation(validatorOptions)
+
 	watch(
-		() => [showSuccessMessages.value, label.value, customRules?.value, customWarningRules?.value, customSuccessRules?.value, disableErrorHandling.value],
+		() => [showSuccessMessages.value, label.value, disableErrorHandling.value],
 		() => {
-			validator = useValidation({
-				showSuccessMessages: showSuccessMessages.value,
-				fieldIdentifier: label.value,
-				disableErrorHandling: disableErrorHandling.value,
-			})
+			validatorOptions.showSuccessMessages = showSuccessMessages.value
+			validatorOptions.fieldIdentifier = label.value
+			validatorOptions.disableErrorHandling = disableErrorHandling.value
+
+			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0 || hasSuccess.value
+			if (isDirty) {
+				validate()
+			}
+		},
+	)
 
+	watch(
+		() => [customRules?.value, customWarningRules?.value, customSuccessRules?.value],
+		() => {
 			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0 || hasSuccess.value
 			if (isDirty) {
 				validate()
@@ -85,7 +95,7 @@ export function useCustomValidation(
 	)
 
 	watch(focused, (newVal) => {
-		if (!newVal && !disableErrorHandling.value) {
+		if (isValidateOnBlur.value && !newVal && !disableErrorHandling.value) {
 			validate()
 		}
 	})

package/src/composables/unifyValidation/useValidation.ts

@@ -4,34 +4,31 @@ import type { ValidationRule as VuetifyValidationRule } from 'vuetify'
 import { useCustomValidation } from './useCustomValidation'
 import { useVuetifyValidation as useVuetifyValidationComposable } from './useVuetifyValidation'
 
+export type { VuetifyValidationRule }
+export type { SyValidationRule as ValidationRule }
+
 export interface FieldValidationProps {
-	modelValue?: unknown
-	readonly?: boolean
-	disabled?: boolean
-	required?: boolean
-	isValidateOnBlur?: boolean
-	showSuccessMessages?: boolean
-	disableErrorHandling?: boolean
-	// Quand cette prop vaut true (mode natif Vuetify), c'est Vuetify qui gère les erreurs, avertissements et succès
-	useVuetifyValidation?: boolean
-	label?: string
-	rules?: VuetifyValidationRule[]
-	// Règles de validation personnalisées d'erreur (bloquantes), évaluées à partir de la valeur du champ
 	customRules?: SyValidationRule[]
-	// Règles de validation personnalisées d'avertissement (non bloquantes), évaluées à partir de la valeur du champ
-	customWarningRules?: SyValidationRule[]
-	// Règles de validation personnalisées de succès, évaluées à partir de la valeur du champ
 	customSuccessRules?: SyValidationRule[]
-	// Messages d'erreur injectés par le parent ; ils n'exécutent aucune logique de validation
+	customWarningRules?: SyValidationRule[]
+	disableErrorHandling?: boolean
+	disabled?: boolean
 	errorMessages?: string[] | null
-	// Messages d'avertissement injectés par le parent ; ils n'exécutent aucune logique de validation
-	warningMessages?: string[] | null
-	// Messages de succès injectés par le parent ; ils n'exécutent aucune logique de validation
-	successMessages?: string[] | null
 	hasError?: boolean
-	hasWarning?: boolean
 	hasSuccess?: boolean
+	hasWarning?: boolean
+	isValidateOnBlur?: boolean
+	label?: string
 	maxErrors?: number
+	modelValue?: unknown
+	readonly?: boolean
+	required?: boolean
+	rules?: VuetifyValidationRule[]
+	showSuccessMessages?: boolean
+	successMessages?: string[] | null
+	// When true (Vuetify native mode), the controller should not handle errors/successes
+	useVuetifyValidation?: boolean
+	warningMessages?: string[] | null
 }
 
 /**

package/src/composables/useFilterable/useFilterable.spec.ts

@@ -213,6 +213,48 @@ describe('Filterable', () => {
 			expect(filterCount).toBe(0)
 		})
 
+		it('returns a chip when only from is set', () => {
+			const { getChips, getFilterCount } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			const filter = {
+				name: 'Test',
+				value: {
+					from: '2024-01-01',
+					to: null,
+				},
+			}
+
+			const chips = getChips(filter)
+			const filterCount = getFilterCount(filter)
+
+			expect(chips).toEqual([{ text: '2024-01-01 –', value: { from: '2024-01-01', to: null } }])
+			expect(filterCount).toBe(1)
+		})
+
+		it('returns a chip when only to is set', () => {
+			const { getChips, getFilterCount } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			const filter = {
+				name: 'Test',
+				value: {
+					from: null,
+					to: '2024-12-31',
+				},
+			}
+
+			const chips = getChips(filter)
+			const filterCount = getFilterCount(filter)
+
+			expect(chips).toEqual([{ text: '– 2024-12-31', value: { from: null, to: '2024-12-31' } }])
+			expect(filterCount).toBe(1)
+		})
+
 		it('returns the correct text when the value is an object', () => {
 			const { getChips, getFilterCount } = useFilterable(
 				ref([]),