@cnamts/synapse 1.0.15 → 1.0.17

package/src/components/DatePicker/ComplexDatePicker/tests/ComplexDatePicker.spec.ts

@@ -1,943 +1,350 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { mount, VueWrapper, flushPromises } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { nextTick } from 'vue'
 import ComplexDatePicker from '../ComplexDatePicker.vue'
-import DateTextInput from '../../DateTextInput/DateTextInput.vue'
-
-// Mock des composables
-vi.mock('@/composables/date/useDateFormatDayjs', () => ({
-	useDateFormat: () => ({
-		parseDate: vi.fn((dateStr) => {
-			if (!dateStr) return null
-			return new Date('2023-01-15')
-		}),
-		formatDate: vi.fn((date) => {
-			if (!date) return ''
-			return '15/01/2023'
-		}),
-	}),
-}))
-
-vi.mock('@/composables/date/useDateInitializationDayjs', () => ({
-	useDateInitialization: () => ({
-		initializeSelectedDates: vi.fn((value) => {
-			if (!value) return null
-			if (Array.isArray(value)) {
-				return value.map(() => new Date('2023-01-15'))
-			}
-			return new Date('2023-01-15')
-		}),
-	}),
-}))
-
-vi.mock('@/composables/date/useDatePickerAccessibility', () => ({
-	useDatePickerAccessibility: () => ({
-		updateAccessibility: vi.fn(),
-	}),
-}))
-
-// Mock avec des erreurs qui peuvent être modifiées
-const mockErrors = { value: [] as string[] }
-const mockWarnings = { value: [] as string[] }
-const mockSuccesses = { value: [] as string[] }
-const mockHasError = { value: false }
-const mockHasWarning = { value: false }
-const mockHasSuccess = { value: false }
-const mockValidateField = vi.fn().mockReturnValue({ valid: true })
-const mockClearValidation = vi.fn(() => {
-	mockErrors.value = []
-	mockWarnings.value = []
-	mockSuccesses.value = []
-	mockHasError.value = false
-	mockHasWarning.value = false
-	mockHasSuccess.value = false
-})
-
-vi.mock('@/composables/validation/useValidation', () => ({
-	useValidation: () => ({
-		errors: mockErrors,
-		warnings: mockWarnings,
-		successes: mockSuccesses,
-		hasError: mockHasError,
-		hasWarning: mockHasWarning,
-		hasSuccess: mockHasSuccess,
-		validateField: mockValidateField,
-		clearValidation: mockClearValidation,
-	}),
-}))
-
-vi.mock('../composables/useWeekendDays', () => ({
-	useWeekendDays: () => ({
-		displayWeekendDays: true,
-	}),
-}))
-
-vi.mock('../composables/useTodayButton', () => ({
-	useTodayButton: () => ({
-		todayInString: 'Aujourd\'hui : 15/01/2023',
-		selectToday: vi.fn((selectedDates) => {
-			if (Array.isArray(selectedDates.value)) {
-				selectedDates.value = [new Date('2023-01-15')]
-			}
-			else {
-				selectedDates.value = new Date('2023-01-15')
-			}
-		}),
-	}),
-}))
-
-vi.mock('../composables/useDatePickerViewMode', () => ({
-	useDatePickerViewMode: vi.fn(() => ({
-		currentViewMode: 'month',
-		handleViewModeUpdate: vi.fn(),
-		handleYearUpdate: vi.fn(),
-		handleMonthUpdate: vi.fn(),
-		resetViewMode: vi.fn(),
-	})),
-}))
-
-// Créer un mock pour rangeBoundaryDates qui peut être observé par les watchers
-const mockRangeBoundaryDates = { value: [new Date('2023-01-15'), new Date('2023-01-20')] }
-
-vi.mock('../composables/useDateSelection', () => ({
-	useDateSelection: () => ({
-		updateSelectedDates: vi.fn((date) => {
-			return date
-		}),
-		rangeBoundaryDates: mockRangeBoundaryDates,
-		generateDateRange: vi.fn((start, end) => {
-			const result = [start]
-			if (end > start) result.push(end)
-			return result
-		}),
-	}),
-}))
-
-// Mock du document.addEventListener et removeEventListener pour les tests de clic extérieur
-const addEventListenerSpy = vi.spyOn(document, 'addEventListener')
-const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener')
-
-describe('ComplexDatePicker', () => {
-	let wrapper: VueWrapper<InstanceType<typeof ComplexDatePicker>>
-
-	// Configuration de base pour monter le composant
-	const createWrapper = (props = {}) => {
-		// Assurer que les mocks sont correctement réinitialisés avant chaque test
-		vi.clearAllMocks()
-
-		mockRangeBoundaryDates.value = [new Date('2023-01-15'), new Date('2023-01-20')]
-		return mount(ComplexDatePicker, {
-			props: {
-				...props,
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-				},
-				mocks: {
-					// Mock des méthodes qui pourraient être appelées dans le template
-					$nextTick: () => Promise.resolve(),
-				},
-			},
-			shallow: false,
-		})
-	}
 
-	beforeEach(() => {
-		// Réinitialiser les mocks avant chaque test
-		vi.clearAllMocks()
+describe('ComplexDatePicker.clean', () => {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const mountComponent = (props: any = { label: 'Test' }) => mount(ComplexDatePicker, {
+		props,
 	})
 
-	afterEach(() => {
-		if (wrapper) {
-			wrapper.unmount()
-		}
-	})
+	it('renders in calendar mode by default', () => {
+		const wrapper = mountComponent()
 
-	it('devrait monter correctement avec les props par défaut', () => {
-		wrapper = createWrapper()
 		expect(wrapper.exists()).toBe(true)
+		// The activator text field should be present
+		const input = wrapper.find('input')
+		expect(input.exists()).toBe(true)
 	})
 
-	it('devrait afficher DateTextInput quand noCalendar=true', () => {
-		// Pour ce test, on utilise shallowMount pour éviter les problèmes avec Vuetify
-		const wrapper = mount(ComplexDatePicker, {
-			props: {
-				noCalendar: true,
-			},
-			global: {
-				stubs: {
-					// Stubber tous les composants pour éviter les erreurs de rendu
-					DateTextInput: { template: '<div class="date-text-input-stub"></div>' },
-					VMenu: { template: '<div class="v-menu-stub"></div>' },
-					SyTextField: { template: '<div class="sy-text-field-stub"></div>' },
-					VDatePicker: { template: '<div class="v-date-picker-stub"></div>' },
-				},
-			},
-			shallow: true,
+	it('renders in text-only mode when noCalendar=true', () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			noCalendar: true,
 		})
 
-		// Vérifier que le template contient bien le v-if pour DateTextInput
-		const template = wrapper.html()
-		expect(template).toContain('date-text-input-stub')
-		expect(template).not.toContain('v-menu-stub')
-	})
-
-	it('devrait afficher VMenu quand noCalendar=false', () => {
-		wrapper = createWrapper({ noCalendar: false })
-		expect(wrapper.findComponent(DateTextInput).exists()).toBe(false)
-		expect(wrapper.find('.date-picker-container').exists()).toBe(true)
-	})
-
-	it('devrait initialiser correctement selectedDates à partir de modelValue', () => {
-		const testDate = '2023-01-15'
-		wrapper = createWrapper({ modelValue: testDate })
-		expect(wrapper.vm.selectedDates).toBeDefined()
+		expect(wrapper.exists()).toBe(true)
+		// In text-only mode there should be no calendar rendered
+		expect(wrapper.find('.v-date-picker').exists()).toBe(false)
 	})
 
-	it('devrait émettre update:modelValue quand la date est modifiée', async () => {
-		// Créer le wrapper avec des stubs pour les composants enfants
-		wrapper = mount(ComplexDatePicker, {
-			props: {},
-			global: {
-				stubs: {
-					DateTextInput: true,
-					VMenu: true,
-					SyTextField: true,
-					VDatePicker: true,
-				},
-			},
+	it('emits update:modelValue when a valid date is typed (single mode)', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
 		})
 
-		// Simuler l'émission d'un événement depuis un composant enfant
-		wrapper.vm.$emit('update:modelValue', '15/01/2023')
-
-		// Vérifier que l'événement update:modelValue a été émis
-		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['15/01/2023'])
-	})
-
-	it('devrait valider le champ comme requis quand required=true et aucune date n\'est sélectionnée', async () => {
-		wrapper = createWrapper({ required: true })
-
-		// Réinitialiser les erreurs avant le test
-		mockErrors.value = []
-
-		// Simuler une validation forcée
-		await wrapper.vm.validateDates(true)
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2025')
+		await input.trigger('blur')
+		await flushPromises()
 
-		// Ajouter manuellement l'erreur comme le ferait le composant
-		mockErrors.value.push('La date est requise.')
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[0][0]).toBe('01/01/2025')
 
-		expect(mockErrors.value).toContain('La date est requise.')
+		const selectedDate = wrapper.vm.selectedDates as Date
+		expect(selectedDate).toBeInstanceOf(Date)
+		expect(wrapper.vm.currentMonth).toBe(String(selectedDate.getMonth()))
+		expect(wrapper.vm.currentMonthName).toBeTruthy()
 	})
 
-	it('devrait mettre à jour displayFormattedDate quand updateDisplayFormattedDate est appelé', async () => {
-		wrapper = createWrapper()
-
-		// Définir une date sélectionnée directement sur l'instance
-		wrapper.vm.selectedDates = new Date('2023-01-15')
-
-		// Appeler la fonction
-		await wrapper.vm.updateDisplayFormattedDate()
-		await flushPromises()
+	it('respects disabled and readonly props when opening the calendar', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			disabled: true,
+		})
 
-		// Vérifier que displayFormattedDate est mis à jour
-		// Note: L'événement date-selected n'est émis que dans certaines conditions
-		// qui ne sont pas remplies dans ce test
-		expect(wrapper.vm.displayFormattedDate).not.toBe('')
-	})
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+		await wrapper.vm.openDatePicker()
+		await nextTick()
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
 
-	it('devrait exposer les méthodes nécessaires via defineExpose', () => {
-		wrapper = createWrapper()
-		// Vérifier que les méthodes exposées sont disponibles
-		expect(wrapper.vm.validateOnSubmit).toBeDefined()
-		expect(wrapper.vm.isDatePickerVisible).toBeDefined()
-		expect(wrapper.vm.selectedDates).toBeDefined()
-		expect(wrapper.vm.errorMessages).toBeDefined()
-		expect(wrapper.vm.handleClickOutside).toBeDefined()
-		expect(wrapper.vm.initializeSelectedDates).toBeDefined()
-		expect(wrapper.vm.updateAccessibility).toBeDefined()
-		expect(wrapper.vm.openDatePicker).toBeDefined()
-		expect(wrapper.vm.updateDisplayFormattedDate).toBeDefined()
+		await wrapper.setProps({ disabled: false, readonly: true })
+		await wrapper.vm.openDatePicker()
+		await nextTick()
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
 	})
 
-	it('devrait ajouter un écouteur d\'événement click au document lors du montage', () => {
-		wrapper = createWrapper()
-		expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function))
-	})
+	it('handleDateSelected updates model, selection and emits event in single mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+		})
 
-	it('devrait supprimer l\'écouteur d\'événement click du document lors du démontage', () => {
-		wrapper = createWrapper()
-		wrapper.unmount()
-		expect(removeEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function))
-	})
+		await wrapper.vm.handleDateSelected('01/01/2025')
+		await flushPromises()
 
-	it('devrait ouvrir le CalendarMode quand openDatePicker est appelé', async () => {
-		wrapper = createWrapper()
-		await wrapper.vm.toggleDatePicker()
-		expect(wrapper.vm.isDatePickerVisible).toBe(true)
-	})
+		const emittedUpdate = wrapper.emitted('update:modelValue')
+		expect(emittedUpdate).toBeTruthy()
+		expect(emittedUpdate && emittedUpdate[0][0]).toBe('01/01/2025')
 
-	it('devrait fermer le CalendarMode quand toggleDatePicker est appelé et qu\'il est déjà ouvert', async () => {
-		wrapper = createWrapper()
-		// D'abord ouvrir le CalendarMode
-		await wrapper.vm.toggleDatePicker()
-		// Puis le fermer
-		await wrapper.vm.toggleDatePicker()
-		expect(wrapper.vm.isDatePickerVisible).toBe(false)
-	})
+		const emittedSelected = wrapper.emitted('date-selected')
+		expect(emittedSelected).toBeTruthy()
+		expect(emittedSelected && emittedSelected[0][0]).toBe('01/01/2025')
 
-	it('devrait sélectionner la date du jour quand handleSelectToday est appelé', async () => {
-		wrapper = createWrapper()
-		await wrapper.vm.toggleDatePicker()
-		// Simuler l'appel à handleSelectToday
-		await wrapper.vm.handleSelectToday()
-		// Vérifier que selectedDates est mis à jour
 		expect(wrapper.vm.selectedDates).toBeInstanceOf(Date)
+
+		const selectedDate = wrapper.vm.selectedDates as Date
+		expect(wrapper.vm.currentMonth).toBe(String(selectedDate.getMonth()))
+		expect(wrapper.vm.currentMonthName).toBeTruthy()
 	})
 
-	it('devrait valider correctement le format de date', async () => {
-		// Créer le wrapper avec des stubs pour les composants enfants
-		wrapper = mount(ComplexDatePicker, {
-			props: {
-				format: 'DD/MM/YYYY',
-			},
-			global: {
-				stubs: {
-					DateTextInput: true,
-					VMenu: true,
-					SyTextField: true,
-					VDatePicker: true,
-				},
-			},
+	it('handleDateSelected updates model, selection and emits event in range mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
 		})
 
-		// Simuler une entrée de date valide
-		wrapper.vm.$emit('input', '15/01/2023')
+		await wrapper.vm.handleDateSelected(['01/01/2025', '10/01/2025'])
 		await flushPromises()
 
-		// Vérifier qu'il n'y a pas d'erreur de format
-		expect(wrapper.vm.errorMessages).toHaveLength(0)
-	})
-
-	it('devrait émettre un événement blur quand un input perd le focus', async () => {
-		// Utiliser la fonction createWrapper pour bénéficier de l'initialisation correcte des mocks
-		wrapper = createWrapper()
+		const emittedUpdate = wrapper.emitted('update:modelValue')
+		expect(emittedUpdate).toBeTruthy()
 
-		// S'assurer que le wrapper est correctement monté
-		expect(wrapper.exists()).toBe(true)
+		const emittedSelected = wrapper.emitted('date-selected')
+		expect(emittedSelected).toBeTruthy()
 
-		// Simuler l'émission d'un événement blur depuis le composant
-		wrapper.vm.$emit('blur')
-		await flushPromises()
+		expect(wrapper.vm.selectedDates).not.toBeNull()
 
-		// Vérifier que l'événement est émis
-		expect(wrapper.emitted()).toHaveProperty('blur')
-		expect(wrapper.emitted('blur')).toBeTruthy()
+		const selection = wrapper.vm.selectedDates as Date | (Date | null)[]
+		const baseDate = Array.isArray(selection)
+			? (selection.find(date => date instanceof Date) as Date | undefined)
+			: selection
+		expect(baseDate).toBeInstanceOf(Date)
+		expect(wrapper.vm.currentMonth).toBe(String((baseDate as Date).getMonth()))
+		expect(wrapper.vm.currentMonthName).toBeTruthy()
 	})
 
-	it('devrait émettre un événement date-selected quand une date est sélectionnée', async () => {
-		// Créer le wrapper avec des stubs pour les composants enfants
-		wrapper = mount(ComplexDatePicker, {
-			props: {
-				modelValue: '15/01/2023',
-			},
-			global: {
-				stubs: {
-					DateTextInput: true,
-					VMenu: true,
-					SyTextField: true,
-					VDatePicker: true,
-				},
-			},
+	it('initializes from external modelValue with dateFormatReturn in single mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			dateFormatReturn: 'YYYY-MM-DD',
+			modelValue: '2025-01-02',
 		})
 
-		// Simuler l'émission d'un événement date-selected depuis le composant
-		wrapper.vm.$emit('date-selected', '15/01/2023')
 		await flushPromises()
 
-		// Vérifier que l'événement est émis
-		expect(wrapper.emitted('date-selected')).toBeTruthy()
+		// displayFormattedDate et l'input utilisent le format d'affichage
+		expect(wrapper.vm.displayFormattedDate).toBe('02/01/2025')
+		const input = wrapper.find('input')
+		expect((input.element as HTMLInputElement).value).toBe('02/01/2025')
 	})
 
-	// Tests pour le formatage automatique des dates pendant la saisie
-	it('devrait formater correctement la date lors de la saisie', async () => {
-		wrapper = createWrapper({
+	it('initializes selection correctly from range modelValue in range mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
 			format: 'DD/MM/YYYY',
+			displayRange: true,
+			modelValue: ['01/01/2025', '10/01/2025'],
 		})
 
-		// Simuler une saisie dans le champ de texte
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.setValue('15012023')
-			await input.trigger('input')
-			await flushPromises()
-
-			// Vérifier que le composant existe toujours après l'opération
-			expect(wrapper.exists()).toBe(true)
-		}
-	})
-
-	it('devrait gérer différents formats de date', async () => {
-		wrapper = createWrapper({
-			format: 'MM-DD-YYYY',
-		})
+		await flushPromises()
 
-		// Vérifier que le format est bien passé au composant
-		expect(wrapper.props('format')).toBe('MM-DD-YYYY')
+		expect(wrapper.vm.selectedDates).not.toBeNull()
 
-		// Vérifier que le composant existe
-		expect(wrapper.exists()).toBe(true)
+		const input = wrapper.find('input')
+		expect((input.element as HTMLInputElement).value).toBe('01/01/2025 - ')
 	})
 
-	// Tests pour la validation des dates
-	it('devrait valider correctement les dates avec des règles personnalisées', async () => {
-		// Réinitialiser les mocks avant le test
-		vi.clearAllMocks()
-		mockErrors.value = []
-
-		const customRules = [
-			{ type: 'maxDate', options: { date: '2023-12-31' } },
-		]
-
-		wrapper = createWrapper({
-			customRules,
-			modelValue: '15/01/2023',
-			disableErrorHandling: false,
+	it('formatDateInput formats raw digits according to the format and computes cursor position', () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
 		})
 
-		// Utiliser la méthode exposée validateDates
-		await wrapper.vm.validateDates(true)
-
-		// Vérifier que validateField a été appelé au moins une fois
-		expect(mockValidateField).toHaveBeenCalled()
+		const { formatted, cursorPos } = wrapper.vm.formatDateInput('0101', 4)
+		expect(formatted).toBe('01/01')
+		expect(cursorPos).toBe(formatted.length)
 	})
 
-	// Tests pour la validation des dépendances
-	it('devrait valider les dépendances même en présence d\'erreurs de validation standard', async () => {
-		// Réinitialiser les mocks avant le test
-		vi.clearAllMocks()
-		mockErrors.value = []
-
-		// Créer un wrapper avec des règles personnalisées et des règles d'avertissement
-		wrapper = createWrapper({
-			customRules: [{ type: 'required', options: {} }],
-			customWarningRules: [{ type: 'minDate', options: { date: '2023-01-01' } }],
-			disableErrorHandling: false,
+	it('opens calendar when textFieldActivator is true and input is clicked', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			textFieldActivator: true,
 		})
 
-		// Simuler une erreur de validation standard
-		mockErrors.value = ['La date est requise.']
-
-		// Définir une date sélectionnée pour que la validation puisse s'exécuter
-		wrapper.vm.selectedDates = new Date('2023-01-15')
-
-		// Simuler la validation des dépendances
-		await wrapper.vm.validateDates(true)
-
-		// Vérifier que la validation des dépendances a été appelée malgré l'erreur standard
-		expect(mockValidateField).toHaveBeenCalled()
-	})
-
-	// Tests pour la gestion des événements clavier
-	it('devrait gérer correctement les événements clavier', async () => {
-		wrapper = createWrapper()
-
-		// Simuler un événement clavier sur le champ de texte
 		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.setValue('15/01/2023')
-			await input.trigger('keydown.tab')
-			await flushPromises()
-
-			// Vérifier que le composant existe toujours après l'opération
-			expect(wrapper.exists()).toBe(true)
-		}
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+		await input.trigger('click')
+		await nextTick()
+		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 	})
 
-	it('devrait réagir aux touches spéciales', async () => {
-		wrapper = createWrapper()
+	it('toggles calendar visibility with Enter key on the input', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+		})
 
-		// Simuler un événement clavier sur le champ de texte
 		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.setValue('15/01/2023')
-			await input.trigger('keydown.enter')
-			await flushPromises()
-
-			// Vérifier que le composant existe toujours après l'opération
-			expect(wrapper.exists()).toBe(true)
-		}
-	})
-
-	// Tests pour la synchronisation avec modelValue
-	it('devrait synchroniser correctement depuis modelValue', async () => {
-		wrapper = createWrapper()
-
-		// Mettre à jour la prop modelValue
-		await wrapper.setProps({ modelValue: '2023-02-15' })
-		await flushPromises()
-
-		// Vérifier que le composant existe toujours après l'opération
-		expect(wrapper.exists()).toBe(true)
-
-		// Vérifier que selectedDates est exposé
-		expect(wrapper.vm.selectedDates).toBeDefined()
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+		await input.trigger('keydown', { key: 'Enter' })
+		await nextTick()
+		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 	})
 
-	// Test spécifique pour la mise à jour de textInputValue avec des plages de dates
-	it('devrait gérer correctement les plages de dates', async () => {
-		// Réinitialiser les mocks avant le test
-		vi.clearAllMocks()
-
-		// Créer un wrapper avec displayRange=true
-		const wrapper = mount(ComplexDatePicker, {
-			props: {
-				displayRange: true,
-				format: 'DD/MM/YYYY',
-				// Ne pas définir modelValue initialement pour éviter les problèmes d'initialisation
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-				},
-			},
-		})
-
-		await flushPromises()
-
-		// Vérifier que le composant existe
-		expect(wrapper.exists()).toBe(true)
-
-		// Maintenant, mettre à jour le modelValue après l'initialisation du composant
-		await wrapper.setProps({
-			modelValue: ['2023-03-10', '2023-03-15'],
+	it('does not open calendar with Enter key when readonly', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			readonly: true,
 		})
-		await flushPromises()
 
-		// Vérifier que le modelValue a été correctement mis à jour
-		expect(wrapper.props('modelValue')).toEqual(['2023-03-10', '2023-03-15'])
+		const input = wrapper.find('input')
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+		await input.trigger('keydown', { key: 'Enter' })
+		await nextTick()
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
 	})
 
-	// Test pour le formatage automatique des dates avec différents formats
-	it('devrait formater automatiquement les dates selon différents formats', async () => {
-		// Tester avec le format MM/DD/YYYY
-		let wrapper = mount(ComplexDatePicker, {
-			props: {
-				format: 'MM/DD/YYYY',
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-					SyTextField: {
-						template: '<div><input type="text" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" /></div>',
-						props: ['modelValue'],
-						emits: ['update:modelValue'],
-					},
-				},
-			},
-		})
-
-		// Accéder directement à la fonction formatDateInput
-		const { formatDateInput } = wrapper.vm
-
-		// Tester le formatage automatique avec différentes entrées
-		const result1 = formatDateInput('0315')
-		expect(result1.formatted).toBe('03/15')
-
-		const result2 = formatDateInput('03152023')
-		expect(result2.formatted).toBe('03/15/2023')
-
-		// Tester avec le format YYYY-MM-DD
-		wrapper = createWrapper({
-			format: 'YYYY-MM-DD',
+	it('emits closed when handleClickOutside is called while open', () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
 		})
 
-		// Accéder directement à la fonction formatDateInput
-		const { formatDateInput: formatDateInput2 } = wrapper.vm
-
-		// Tester le formatage automatique avec différentes entrées
-		const result3 = formatDateInput2('2023')
-		expect(result3.formatted).toBe('2023')
-
-		const result4 = formatDateInput2('202303')
-		expect(result4.formatted).toBe('2023-03')
-
-		const result5 = formatDateInput2('20230315')
-		expect(result5.formatted).toBe('2023-03-15')
-	})
-
-	// Tests pour la validation du format de date
-	it('devrait valider correctement le format de date', async () => {
-		wrapper = createWrapper({ format: 'DD/MM/YYYY', required: true })
-
-		// Accéder à la fonction validateDateFormat
-		const { validateDateFormat } = wrapper.vm
+		const outsideElement = document.createElement('div')
+		wrapper.vm.isDatePickerVisible = true
+		wrapper.vm.handleClickOutside({ target: outsideElement } as unknown as MouseEvent)
 
-		// Tester avec une date vide
-		const emptyResult = validateDateFormat('')
-		// Avec hasInteracted.value = false par défaut, isValid devrait être true
-		expect(emptyResult.isValid).toBe(true)
-		expect(emptyResult.message).toBe('')
-
-		// Simuler une interaction avec le champ
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.trigger('focus')
-			await input.trigger('blur')
-			await flushPromises()
-
-			// Maintenant hasInteracted.value devrait être true
-			const emptyResultAfterInteraction = validateDateFormat('')
-			expect(emptyResultAfterInteraction.isValid).toBe(false)
-			expect(emptyResultAfterInteraction.message).toBe('La date est requise.')
-		}
-
-		// Tester avec une date invalide (caractères non autorisés)
-		const invalidCharsResult = validateDateFormat('12/AB/2023')
-		expect(invalidCharsResult.isValid).toBe(false)
-
-		// Tester avec une date au format invalide
-		const invalidFormatResult = validateDateFormat('32/13/2023')
-		expect(invalidFormatResult.isValid).toBe(false)
-
-		// Tester avec une date valide
-		const validResult = validateDateFormat('15/03/2023')
-		expect(validResult.isValid).toBe(true)
-		expect(validResult.message).toBe('')
+		const closedEvents = wrapper.emitted('closed')
+		expect(closedEvents).toBeTruthy()
 	})
 
-	// Tests pour le formatage automatique des dates pendant la saisie
-	it('devrait formater automatiquement les dates pendant la saisie', async () => {
-		// Créer un wrapper avec le format DD/MM/YYYY
-		wrapper = createWrapper({
+	it('updates internal month and year when VDatePicker emits updates', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
 			format: 'DD/MM/YYYY',
 		})
 
-		// Accéder directement à la fonction formatDateInput
-		const { formatDateInput } = wrapper.vm
+		wrapper.vm.isDatePickerVisible = true
+		await nextTick()
 
-		// Tester le formatage automatique avec différentes entrées
-		const result1 = formatDateInput('0315')
-		expect(result1.formatted).toBe('03/15')
+		const datePicker = wrapper.findComponent({ name: 'VDatePicker' })
+		expect(datePicker.exists()).toBe(true)
 
-		const result2 = formatDateInput('03152023')
-		expect(result2.formatted).toBe('03/15/2023')
+		await datePicker.vm.$emit('update:month', '5')
+		await datePicker.vm.$emit('update:year', '2030')
 
-		// Tester avec une entrée déjà formatée
-		const result3 = formatDateInput('12/03/2023')
-		expect(result3.formatted).toBe('12/03/2023')
+		expect(wrapper.vm.currentMonth).toBe('5')
+		expect(wrapper.vm.currentMonthName).not.toBeNull()
+		expect(wrapper.vm.currentYear).toBe('2030')
+		expect(wrapper.vm.currentYearName).toBe('2030')
 	})
 
-	// Test spécifique pour la fonction formatDateInput
-	it('devrait formater correctement une date selon le format spécifié', async () => {
-		// Créer un wrapper avec le format DD/MM/YYYY
-		wrapper = mount(ComplexDatePicker, {
-			props: {
-				format: 'DD/MM/YYYY',
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-					SyTextField: true,
-				},
-			},
+	it('validateOnSubmit returns false when required and empty in text-only mode', () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			noCalendar: true,
+			required: true,
+			format: 'DD/MM/YYYY',
 		})
 
-		// Accéder à la fonction formatDateInput
-		const { formatDateInput } = wrapper.vm
-
-		// Tester avec une entrée vide
-		const emptyResult = formatDateInput('')
-		expect(emptyResult.formatted).toBe('')
-
-		// Tester avec des chiffres sans séparateur
-		const digitsResult = formatDateInput('1203')
-		expect(digitsResult.formatted).toBe('12/03')
-
-		// Tester avec une date complète sans séparateurs
-		const fullDateResult = formatDateInput('12032023')
-		expect(fullDateResult.formatted).toBe('12/03/2023')
-
-		// Tester avec une date déjà formatée
-		const formattedResult = formatDateInput('12/03/2023')
-		expect(formattedResult.formatted).toBe('12/03/2023')
+		const result = wrapper.vm.validateOnSubmit()
+		expect(result).toBe(false)
 	})
 
-	// Test pour la fonction updateDisplayFormattedDate
-	it('devrait mettre à jour displayFormattedDate', async () => {
-		// Créer un wrapper avec une date sélectionnée
-		wrapper = createWrapper({
+	it('validateOnSubmit returns true when a valid value is present in text-only mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			noCalendar: true,
+			required: true,
 			format: 'DD/MM/YYYY',
-			modelValue: '2023-01-15',
+			modelValue: '01/01/2025',
 		})
 
-		// Vérifier que displayFormattedDate est initialisé
-		expect(wrapper.vm.displayFormattedDate).toBeDefined()
+		await nextTick()
+		const result = wrapper.vm.validateOnSubmit()
+		expect(result).toBe(true)
+	})
+
+	it('handleSelectToday selects today and keeps component usable', async () => {
+		const wrapper = mountComponent()
 
-		// Simuler une mise à jour de la date sélectionnée
-		await wrapper.setProps({ modelValue: '2023-02-20' })
+		await wrapper.vm.handleSelectToday()
 		await flushPromises()
 
-		// Vérifier que le composant existe toujours
+		expect(wrapper.vm.selectedDates).not.toBeNull()
 		expect(wrapper.exists()).toBe(true)
 	})
 
-	// Test pour la validation avec required=false
-	it('ne devrait pas afficher d\'erreur pour une date vide si le champ n\'est pas requis', async () => {
-		// Monter le composant avec required=false
-		wrapper = mount(ComplexDatePicker, {
-			props: {
-				required: false,
-				format: 'DD/MM/YYYY',
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-					SyTextField: true,
-				},
-			},
+	it('validateOnSubmit returns false when required and empty in calendar mode', () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			required: true,
+			format: 'DD/MM/YYYY',
 		})
 
-		// Simuler une saisie vide puis perte de focus
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.setValue('')
-			await input.trigger('blur')
-			await flushPromises()
-
-			// Vérifier qu'il n'y a pas d'erreur
-			expect(mockErrors.value.length).toBe(0)
-		}
+		const result = wrapper.vm.validateOnSubmit()
+		expect(result).toBe(false)
+		// Should surface at least one error message
+		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 	})
 
-	// Test pour la validation avec required=true
-	it('devrait afficher une erreur pour une date vide si le champ est requis', async () => {
-		// Monter le composant avec required=true
-		wrapper = mount(ComplexDatePicker, {
-			props: {
-				required: true,
-				format: 'DD/MM/YYYY',
-				disableErrorHandling: false,
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-					SyTextField: true,
-				},
-			},
+	it('validateDates flags an error when end date is before start date in range mode', () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
 		})
 
-		// Simuler une saisie vide puis perte de focus
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.setValue('')
-			await input.trigger('input')
-			await input.trigger('blur') // Pour déclencher hasInteracted = true
-			await flushPromises()
-
-			// Forcer la validation
-			await wrapper.vm.validateDates(true)
-
-			// Vérifier qu'il y a une erreur
-			expect(mockErrors.value.length).toBeGreaterThan(0)
-		}
-	})
-
-	// Test pour la validation avec des caractères invalides
-	it('devrait rejeter une date avec des caractères invalides', async () => {
-		// Monter le composant
-		wrapper = mount(ComplexDatePicker, {
-			props: {
-				format: 'DD/MM/YYYY',
-				disableErrorHandling: false,
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-					SyTextField: true,
-				},
-			},
-		})
+		// Start date after end date -> invalid range
+		wrapper.vm.selectedDates = [
+			new Date(2025, 0, 10),
+			new Date(2025, 0, 1),
+		]
 
-		// Simuler une saisie avec des caractères invalides
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.setValue('15/AB/2023')
-			await input.trigger('input')
-			await input.trigger('blur')
-			await flushPromises()
-
-			// Vérifier que la validation a été appelée
-			expect(mockClearValidation).toHaveBeenCalled()
-		}
+		const result = wrapper.vm.validateDates(true)
+		expect(result.hasError).toBe(true)
+		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 	})
 
-	// Test pour la validation avec un format de date invalide
-	it('devrait rejeter une date avec un format invalide', async () => {
-		// Monter le composant
-		wrapper = mount(ComplexDatePicker, {
-			props: {
-				format: 'DD/MM/YYYY',
-				disableErrorHandling: false,
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-					SyTextField: true,
-				},
-			},
+	it('validateDates does not flag an error for an incomplete range when not forced', () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
 		})
 
-		// Simuler une saisie avec un format invalide (date impossible)
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.setValue('31/02/2023') // Le 31 février n'existe pas
-			await input.trigger('input')
-			await input.trigger('blur')
-			await flushPromises()
-
-			// Vérifier que la validation a été appelée
-			expect(mockClearValidation).toHaveBeenCalled()
-		}
-	})
-
-	// Test pour la validation avec un format de date valide
-	it('devrait accepter une date valide avec le format principal', async () => {
-		// Monter le composant
-		wrapper = mount(ComplexDatePicker, {
-			props: {
-				format: 'DD/MM/YYYY',
-				disableErrorHandling: false,
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-					SyTextField: true,
-				},
-			},
-		})
+		// First boundary set, second still empty (user is still typing)
+		wrapper.vm.selectedDates = [
+			new Date(2025, 0, 1),
+			null,
+		]
 
-		// Simuler une saisie avec une date valide
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.setValue('15/03/2023')
-			await input.trigger('input')
-			await input.trigger('blur')
-			await flushPromises()
-
-			// Vérifier que la validation a été appelée
-			expect(mockClearValidation).toHaveBeenCalled()
-		}
+		const result = wrapper.vm.validateDates()
+		expect(result.hasError).toBe(false)
+		expect(wrapper.vm.errorMessages.length).toBe(0)
 	})
 
-	// Test pour la validation avec un format de retour différent
-	it('devrait accepter une date valide avec le format de retour', async () => {
-		// Monter le composant avec un format de retour différent
-		wrapper = mount(ComplexDatePicker, {
-			props: {
-				format: 'DD/MM/YYYY',
-				dateFormatReturn: 'YYYY-MM-DD',
-			},
-			global: {
-				stubs: {
-					VDatePicker: true,
-					VMenu: true,
-					SyTextField: true,
-				},
-			},
+	it('reset clears selection, errors and closes the calendar', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			required: true,
+			format: 'DD/MM/YYYY',
 		})
 
-		// Simuler une saisie avec une date au format de retour
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			await input.setValue('2023-01-15')
-			await input.trigger('input')
-			await input.trigger('blur')
-			await flushPromises()
-
-			// Vérifier qu'il n'y a pas d'erreur
-			expect(mockErrors.value.length).toBe(0)
-		}
-	})
-
-	// Tests pour la validation de la saisie manuelle
-	it('devrait valider correctement une date valide saisie manuellement', async () => {
-		wrapper = createWrapper({ format: 'DD/MM/YYYY' })
+		// Simuler une erreur required
+		wrapper.vm.selectedDates = null
+		wrapper.vm.validateDates(true)
+		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 
-		// Simuler une saisie dans le champ de texte
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			// Saisir une date valide
-			await input.setValue('15/01/2023')
-			await input.trigger('input')
-			await input.trigger('blur')
-			await flushPromises()
-
-			// Vérifier qu'il n'y a pas d'erreur
-			expect(mockErrors.value.length).toBe(0)
-		}
-	})
-
-	it('devrait détecter une date invalide saisie manuellement', async () => {
-		// Réinitialiser les mocks avant le test
-		vi.clearAllMocks()
-		mockErrors.value = []
-
-		wrapper = createWrapper({ format: 'DD/MM/YYYY', disableErrorHandling: false })
-
-		// Simuler une saisie dans le champ de texte
-		const input = wrapper.find('input')
-		if (input.exists()) {
-			// Saisir une date invalide
-			await input.setValue('99/99/9999')
-			await input.trigger('input')
-			await input.trigger('blur')
-			await flushPromises()
-
-			// Vérifier que la validation a été appelée
-			expect(mockClearValidation).toHaveBeenCalled()
-		}
-	})
-
-	// Tests pour la gestion de la perte de focus
-	it('devrait émettre un événement blur lors de la perte de focus', async () => {
-		// Utiliser createWrapper pour bénéficier de l'initialisation correcte des mocks
-		wrapper = createWrapper()
-
-		// S'assurer que le wrapper est correctement monté
-		expect(wrapper.exists()).toBe(true)
+		// Ouvrir le calendrier puis réinitialiser
+		await wrapper.vm.toggleDatePicker()
+		await nextTick()
+		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 
-		// Simuler un événement blur en émettant directement l'événement
-		wrapper.vm.$emit('blur')
+		wrapper.vm.reset()
 		await flushPromises()
 
-		// Vérifier que l'événement blur a été émis
-		expect(wrapper.emitted()).toHaveProperty('blur')
-		expect(wrapper.emitted('blur')).toBeTruthy()
-	})
-
-	it('devrait respecter la propriété readonly dans le mode calendrier', async () => {
-		// Monter le composant avec readonly=true et noCalendar=false (mode calendrier)
-		wrapper = createWrapper({
-			readonly: true,
-			noCalendar: false,
-		})
-
-		// Vérifier que le composant a bien la propriété readonly définie
-		expect(wrapper.props('readonly')).toBe(true)
-
-		// Note: Ce test vérifie que la propriété readonly est correctement passée au composant.
-		// La correction du bug a été de modifier ':readonly="false"' en ':readonly="props.readonly"'
-		// dans le template du ComplexDatePicker pour que le mode readonly soit respecté.
+		expect(wrapper.vm.selectedDates).toBeNull()
+		expect(wrapper.vm.errorMessages.length).toBe(0)
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
 	})
 })