@cnamts/synapse 1.0.25 → 1.0.27

package/src/components/DatePicker/ComplexDatePicker/tests/bridge-integration.regression.spec.ts

@@ -0,0 +1,210 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import { nextTick } from 'vue'
+import ComplexDatePicker from '../ComplexDatePicker.vue'
+import DateTextInput from '../../DateTextInput/DateTextInput.vue'
+
+/**
+ * Tests de régression pour l'intégration Bridge + validation
+ * Couvrent les cas critiques non testés précédemment
+ */
+describe('Bridge Integration Regression Tests', () => {
+	/**
+	 * Test 1: Réactivité des customRules
+	 * Bug potentiel : Si les règles ne sont pas réactives,
+	 * la validation croisée (dateA -> dateB) ne fonctionne pas
+	 */
+	it('réagit aux changements de customRules dynamiques', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				// Première règle qui passe toujours
+				customRules: [{ type: 'custom', options: { validate: () => true, message: 'Erreur' } }],
+			},
+		})
+
+		// Changer les règles via setProps (comme le ferait le parent)
+		await wrapper.setProps({
+			customRules: [{ type: 'custom', options: { validate: () => false, message: 'Nouvelle erreur' } }],
+		})
+		await nextTick()
+
+		// La nouvelle règle doit être prise en compte
+		const input = wrapper.find('input')
+		await input.setValue('15/05/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Avec la nouvelle règle qui retourne false, on doit avoir une erreur
+		const errors = wrapper.findAll('.v-messages__message--error')
+		expect(errors.length).toBeGreaterThan(0)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 2: Mode readonly - pas de validation active
+	 * Bug potentiel : Validation qui s'exécute quand même en readonly
+	 */
+	it('ne valide pas quand readonly est true', async () => {
+		const validateSpy = vi.fn(() => true)
+
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				readonly: true,
+				showSuccessMessages: true,
+				customRules: [{ type: 'custom', options: { validate: validateSpy } }],
+			},
+		})
+
+		// Attendre un tick pour s'assurer que la validation ne s'est pas déclenchée
+		await nextTick()
+
+		// La règle ne doit pas avoir été appelée
+		expect(validateSpy).not.toHaveBeenCalled()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 3: Coordonnation parent/enfant avec skipInternalValidation
+	 * Bug potentiel : DateTextInput valide en parallèle du parent
+	 */
+	it('ComplexDatePicker contrôle la validation quand DateTextInput a skipInternalValidation', async () => {
+		const parentValidate = vi.fn(() => ({ hasError: false, hasWarning: false, hasSuccess: true, state: { errors: [], warnings: [], successes: ['OK'] } }))
+
+		// Ce test vérifie que le parent gère la validation, pas l'enfant
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date parent',
+				format: 'DD/MM/YYYY',
+				showSuccessMessages: true,
+				customRules: [{ type: 'custom', options: { validate: parentValidate } }],
+			},
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('20/06/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Vérifier qu'on a un message de succès (du parent)
+		const successMessages = wrapper.findAll('.v-messages__message--success')
+		expect(successMessages.length).toBeLessThanOrEqual(1)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 4: Pas de double validation avec queueMicrotask
+	 * Bug potentiel : queueMicrotask pourrait causer des validations en cascade
+	 */
+	it('ne déclenche pas de validation en cascade avec queueMicrotask', async () => {
+		let validationCount = 0
+		const validateRule = () => {
+			validationCount++
+			return true
+		}
+
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				customRules: [{ type: 'custom', options: { validate: validateRule } }],
+				showSuccessMessages: true,
+			},
+		})
+
+		// Attendre que les microtasks soient traitées
+		await nextTick()
+		await new Promise(resolve => queueMicrotask(() => resolve(undefined)))
+
+		// La validation ne doit pas avoir été déclenchée automatiquement
+		// (seulement au blur ou changement de valeur)
+		expect(validationCount).toBe(0)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 5: Clear reset correctement les messages
+	 * Bug potentiel : Messages qui restent après clear
+	 */
+	it('reset les messages de validation après clear', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '15/05/2025',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				showSuccessMessages: true,
+				required: true,
+			},
+		})
+
+		// D'abord s'assurer qu'on a un message de succès
+		await flushPromises()
+
+		// Puis clear
+		await wrapper.setProps({ modelValue: '' })
+		await flushPromises()
+		await nextTick()
+
+		// Plus de message de succès
+		const successMessages = wrapper.findAll('.v-messages__message--success')
+		expect(successMessages.length).toBe(0)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 6: useDatePickerValidationBridge expose les bonnes méthodes
+	 * Bug potentiel : Methods exposées qui ne fonctionnent pas
+	 */
+	it('expose validateOnSubmit qui retourne un booléen', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				required: true,
+			},
+		})
+
+		// Appeler validateOnSubmit exposé
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Testing internal API
+		const result = await (wrapper.vm as any).validateOnSubmit?.()
+
+		// Doit retourner false car champ vide et required
+		expect(result).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 7: Pas de fuite mémoire avec les watchers
+	 * Bug potentiel : Watchers qui s'accumulent
+	 */
+	it('nettoie les watchers quand le composant est détruit', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+		})
+
+		// Détruire le composant
+		wrapper.unmount()
+
+		// Aucune erreur ne doit être levée
+		// (les watchers sont nettoyés automatiquement par Vue)
+		expect(() => wrapper.vm).not.toThrow()
+	})
+})

package/src/components/DatePicker/ComplexDatePicker/tests/calendar-navigation.regression.spec.ts

@@ -0,0 +1,214 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { nextTick } from 'vue'
+import ComplexDatePicker from '../ComplexDatePicker.vue'
+
+/**
+ * Tests de régression pour la navigation du calendrier
+ * Bug précédent : currentMonthName ne se mettait pas à jour via les flèches
+ */
+describe('Calendar Navigation Regression Tests', () => {
+	/**
+	 * Test 1 : Navigation mois via flèches met à jour l'affichage
+	 */
+	it('met à jour currentMonthName quand on navigue via les flèches', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '15/05/2025',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+		})
+
+		// Attendre l'initialisation
+		await flushPromises()
+
+		// Ouvrir le calendrier (via propriété directe pour éviter les listeners)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).isDatePickerVisible = true
+		await nextTick()
+
+		// Le mois affiché doit correspondre à la date sélectionnée (mai)
+		// Note: On ne peut pas tester directement le DOM interne de VDatePicker
+		// mais on peut vérifier que selectedDates est bien synchronisé
+		const emitted = wrapper.emitted('date-selected')
+		expect(emitted).toBeTruthy()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 2 : Clear réinitialise le calendrier
+	 * Bug production : VDatePicker gardait l'ancienne date après clear
+	 */
+	it('reset le calendrier après clear', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '15/05/2025',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+		})
+
+		await flushPromises()
+
+		// Simuler un clear
+		await wrapper.find('input').setValue('')
+		await wrapper.find('input').trigger('blur')
+		await flushPromises()
+
+		// Vérifier que le model est mis à jour
+		const emitted = wrapper.emitted('update:modelValue')
+		const lastValue = emitted?.[emitted.length - 1]?.[0]
+		expect(lastValue).toBeNull()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 3 : Réouverture avec date déjà sélectionnée
+	 * Bug : Navigation bloquée après réouverture
+	 */
+	it('permet la navigation après réouverture du calendrier', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+		})
+
+		// Ouvrir le calendrier (via propriété directe)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).isDatePickerVisible = true
+		await nextTick()
+
+		// Vérifier que l'input est interactif
+		const input = wrapper.find('input')
+		expect(input.exists()).toBe(true)
+
+		// Fermer avec Escape
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).isDatePickerVisible = false
+		await nextTick()
+
+		// Réouvrir (via propriété directe)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).isDatePickerVisible = true
+		await nextTick()
+
+		// L'input doit toujours être interactif (pas de blocage)
+		expect(wrapper.find('input').exists()).toBe(true)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 4 : Synchronisation selectedDates avec input
+	 * Bug : selectedDates et textInputValue désynchronisés
+	 */
+	it('synchronise selectedDates avec la valeur de l\'input', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+		})
+
+		// Saisir une date
+		const input = wrapper.find('input')
+		await input.setValue('20/06/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// La date doit être émise
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[0] && emitted[0][0]).toBe('20/06/2025')
+
+		// Le date-selected doit aussi être émis
+		const dateSelected = wrapper.emitted('date-selected')
+		expect(dateSelected).toBeTruthy()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 5 : Mode range - sélection de plage complète
+	 */
+	it('gère correctement la sélection de plage de dates', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Période',
+				format: 'DD/MM/YYYY',
+				displayRange: true,
+			},
+		})
+
+		// Saisir une plage
+		const input = wrapper.find('input')
+		await input.setValue('01/06/2025 - 15/06/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Le model doit être un array
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		const value = emitted && emitted[0] && emitted[0][0]
+		expect(Array.isArray(value)).toBe(true)
+		if (Array.isArray(value)) {
+			expect(value).toHaveLength(2)
+		}
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 6 : fieldKey pour re-render (bug production)
+	 * Bug : VDatePicker ne se réinitialisait pas après clear en production
+	 * Solution : fieldKey force la recréation du composant
+	 */
+	it('utilise fieldKey pour forcer le re-render après clear', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '15/05/2025',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+		})
+
+		// Vérifier que fieldKey existe (utilisé pour forcer le re-render)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Testing internal implementation
+		expect((wrapper.vm as any).fieldKey).toBeDefined()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 7 : Reset view mode à l'ouverture
+	 * Bug : Navigation bloquée après réouverture
+	 */
+	it('reset view mode quand le calendrier s\'ouvre', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+		})
+
+		// Ouvrir le calendrier
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		await (wrapper.vm as any).openDatePicker()
+		await nextTick()
+
+		// Vérifier que le view mode est bien initialisé
+		// (la propriété exacte dépend de l'implémentation)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.vm as any).currentViewMode || (wrapper.vm as any).viewMode).toBeDefined()
+
+		wrapper.unmount()
+	})
+})

package/src/components/DatePicker/ComplexDatePicker/tests/validation-cross.regression.spec.ts

@@ -0,0 +1,194 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { nextTick, ref, computed } from 'vue'
+import ComplexDatePicker from '../ComplexDatePicker.vue'
+
+/**
+ * Tests de régression pour la validation croisée (dateA -> dateB)
+ * Bug précédent : Les règles dateBRules ne se mettaient pas à jour quand dateA changeait
+ */
+describe('Validation Croisée Regression Tests', () => {
+	/**
+	 * Test 1 : notBeforeDate avec date dynamique
+	 * Scénario : Date B ne peut pas être avant Date A
+	 */
+	it('met à jour la validation de Date B quand Date A change', async () => {
+		const dateA = ref('15/05/2025')
+
+		// Date B avec règle notBeforeDate qui dépend de dateA
+		const dateBRules = computed(() => [
+			{
+				type: 'notBeforeDate',
+				options: {
+					date: dateA.value,
+					message: 'Date B doit être après Date A',
+				},
+			},
+		])
+
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date B',
+				format: 'DD/MM/YYYY',
+				customRules: dateBRules.value,
+				showSuccessMessages: true,
+			},
+		})
+
+		// Date B avant Date A (doit être invalide)
+		const input = wrapper.find('input')
+		await input.setValue('10/05/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Doit avoir une erreur
+		let errors = wrapper.findAll('.v-messages__message--error')
+		expect(errors.length).toBeGreaterThan(0)
+
+		// Changer Date A pour être avant Date B
+		dateA.value = '05/05/2025'
+		await wrapper.setProps({
+			customRules: [
+				{
+					type: 'notBeforeDate',
+					options: {
+						date: dateA.value,
+						message: 'Date B doit être après Date A',
+					},
+				},
+			],
+		})
+		await nextTick()
+
+		// Re-valider
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Maintenant c'est valide (10/05 >= 05/05)
+		errors = wrapper.findAll('.v-messages__message--error')
+		expect(errors.length).toBe(0)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 2 : Validation réactive sans re-saisie
+	 * Quand la règle change, la validation doit se mettre à jour automatiquement
+	 */
+	it('re-valide automatiquement quand les règles changent', async () => {
+		const strictMode = ref(false)
+
+		const dynamicRules = computed(() => {
+			if (strictMode.value) {
+				return [{ type: 'notBeforeToday', options: { message: 'Date future obligatoire' } }]
+			}
+			return [] // Pas de validation en mode non-strict
+		})
+
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '01/01/2020', // Date passée
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				customRules: dynamicRules.value,
+			},
+		})
+
+		// En mode non-strict, pas d'erreur
+		await flushPromises()
+		let errors = wrapper.findAll('.v-messages__message--error')
+		expect(errors.length).toBe(0)
+
+		// Passer en mode strict
+		strictMode.value = true
+		await wrapper.setProps({
+			customRules: [{ type: 'notBeforeToday', options: { message: 'Date future obligatoire' } }],
+		})
+		await nextTick()
+		await flushPromises()
+
+		// Maintenant doit y avoir une erreur (date passée en mode strict)
+		errors = wrapper.findAll('.v-messages__message--error')
+		expect(errors.length).toBeGreaterThan(0)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 3 : Pas de validation avec règles vides
+	 */
+	it('ne valide pas quand customRules est vide', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				customRules: [], // Pas de règles
+				showSuccessMessages: true,
+			},
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('15/05/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Pas de validation custom, donc validateSpy ne doit pas être appelé
+		// (mais le champ peut avoir un succès de validation de format)
+		const successMessages = wrapper.findAll('.v-messages__message--success')
+		// Un seul message maximum (pas de double validation)
+		expect(successMessages.length).toBeLessThanOrEqual(1)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 4 : Gestion des valeurs null (bug "Date invalide")
+	 * Bug précédent : "Date invalide" s'affichait quand on supprimait la date
+	 */
+	it('gère les valeurs null sans erreur "Date invalide"', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: null,
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				customRules: [{ type: 'notBeforeDate', options: { date: '01/01/2025', message: 'Date trop ancienne' } }],
+			},
+		})
+
+		await flushPromises()
+
+		// Ne doit pas afficher "Date invalide" pour valeur null
+		const errors = wrapper.findAll('.v-messages__message--error')
+		const hasDateInvalide = errors.some(e => e.text().includes('Date invalide'))
+		expect(hasDateInvalide).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 5 : Pas d'erreur "Configuration invalide"
+	 * Bug précédent : Message quand options.date = undefined
+	 */
+	it('ne montre pas "Configuration de la règle invalide" quand la règle est valide', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '15/05/2025',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				// Règle avec une date valide (pas undefined)
+				customRules: [{ type: 'notBeforeDate', options: { date: '01/01/2025', message: 'Date trop ancienne' } }],
+			},
+		})
+
+		await flushPromises()
+
+		// Ne doit pas avoir de message d'erreur de configuration
+		const errors = wrapper.findAll('.v-messages__message--error')
+		const hasConfigError = errors.some(e => e.text().includes('Configuration de la règle invalide'))
+		expect(hasConfigError).toBe(false)
+
+		wrapper.unmount()
+	})
+})

package/src/components/DatePicker/ComplexDatePicker/tests/validation-success-messages.regression.spec.ts

@@ -0,0 +1,83 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import ComplexDatePicker from '../ComplexDatePicker.vue'
+import DateTextInput from '../../DateTextInput/DateTextInput.vue'
+
+/**
+ * Tests de régression pour les messages de succès
+ * Bug précédent : Double affichage des messages de succès quand
+ * ComplexDatePicker et DateTextInput validaient tous les deux
+ */
+describe('Validation Success Messages Regression', () => {
+	it('affiche un seul message de succès quand une date valide est saisie', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date de test',
+				format: 'DD/MM/YYYY',
+				showSuccessMessages: true,
+				required: true,
+			},
+		})
+
+		// Saisir une date valide
+		const input = wrapper.find('input')
+		await input.setValue('15/05/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Vérifier qu'il n'y a qu'un seul message de succès
+		const successMessages = wrapper.findAll('.v-messages__message--success')
+		expect(successMessages.length).toBeLessThanOrEqual(1)
+
+		wrapper.unmount()
+	})
+
+	it('DateTextInput isolé affiche correctement les messages de succès', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date isolée',
+				format: 'DD/MM/YYYY',
+				showSuccessMessages: true,
+				required: true,
+			},
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('20/06/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Un seul message attendu
+		const successMessages = wrapper.findAll('.v-messages__message--success')
+		expect(successMessages.length).toBeLessThanOrEqual(1)
+
+		wrapper.unmount()
+	})
+
+	it('pas de double message avec skipInternalValidation', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date avec skip',
+				format: 'DD/MM/YYYY',
+				showSuccessMessages: true,
+				required: true,
+				skipInternalValidation: true, // Simule utilisation dans ComplexDatePicker
+			},
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('10/07/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Avec skipInternalValidation, pas de validation interne
+		// donc pas de message de succès généré par DateTextInput
+		const successMessages = wrapper.findAll('.v-messages__message--success')
+		expect(successMessages.length).toBe(0)
+
+		wrapper.unmount()
+	})
+})