@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/DatePicker/composables/tests/useCalendarKeyboardNavigation.spec.ts

@@ -311,4 +311,364 @@ describe('useCalendarKeyboardNavigation', () => {
 		addEventListenerSpy.mockRestore()
 		vi.useRealTimers()
 	})
+
+	it('handles Home/End/PageUp/PageDown navigation', () => {
+		vi.useFakeTimers()
+		const isDatePickerVisible = ref(true)
+		const getCurrentDate = vi.fn(() => new Date(2023, 0, 15))
+		const setCurrentDate = vi.fn()
+
+		let savedListener: ((e: KeyboardEvent) => void) | null = null
+		const addEventListenerSpy = vi.spyOn(document, 'addEventListener').mockImplementation((type, listener) => {
+			if (type === 'keydown') savedListener = listener as (e: KeyboardEvent) => void
+		})
+
+		let attachListeners!: () => void
+		const TestComponent = defineComponent({
+			setup() {
+				const result = useCalendarKeyboardNavigation({
+					isDatePickerVisible,
+					datePickerRef: ref(null),
+					getCurrentDate,
+					setCurrentDate,
+				})
+				attachListeners = result.attachListeners
+				return () => null
+			},
+		})
+		mount(TestComponent)
+		attachListeners()
+		vi.advanceTimersByTime(150)
+
+		const fireKey = (key: string, shiftKey = false) => {
+			setCurrentDate.mockClear()
+			const event = new KeyboardEvent('keydown', { key, shiftKey, bubbles: true })
+			Object.defineProperty(event, 'target', { value: document.createElement('div') })
+			savedListener!(event)
+			return setCurrentDate.mock.calls[0]?.[0] as Date | undefined
+		}
+
+		// Home → premier jour du mois (1 Jan)
+		const homeDate = fireKey('Home')
+		expect(homeDate?.getDate()).toBe(1)
+		expect(homeDate?.getMonth()).toBe(0)
+
+		// End → dernier jour du mois (31 Jan)
+		const endDate = fireKey('End')
+		expect(endDate?.getDate()).toBe(31)
+
+		// PageUp → premier jour du mois précédent (1 Dec 2022)
+		const pageUpDate = fireKey('PageUp')
+		expect(pageUpDate?.getDate()).toBe(1)
+		expect(pageUpDate?.getMonth()).toBe(11)
+		expect(pageUpDate?.getFullYear()).toBe(2022)
+
+		// PageDown → premier jour du mois suivant (1 Feb 2023)
+		const pageDownDate = fireKey('PageDown')
+		expect(pageDownDate?.getDate()).toBe(1)
+		expect(pageDownDate?.getMonth()).toBe(1)
+
+		// PageUp + Shift → année précédente (1 Jan 2022)
+		const pageUpShiftDate = fireKey('PageUp', true)
+		expect(pageUpShiftDate?.getFullYear()).toBe(2022)
+
+		// PageDown + Shift → année suivante (1 Jan 2024)
+		const pageDownShiftDate = fireKey('PageDown', true)
+		expect(pageDownShiftDate?.getFullYear()).toBe(2024)
+
+		addEventListenerSpy.mockRestore()
+		vi.useRealTimers()
+	})
+
+	it('handles Enter/Space on a day cell', () => {
+		vi.useFakeTimers()
+		const isDatePickerVisible = ref(true)
+		const setCurrentDate = vi.fn()
+
+		// Créer un rootEl contenant la cellule de jour (nécessaire pour clickDateButton)
+		const rootEl = document.createElement('div')
+		const dayWrapper = document.createElement('div')
+		dayWrapper.setAttribute('data-v-date', '2023-01-10')
+		dayWrapper.className = 'v-date-picker-month__day'
+		const btn = document.createElement('button')
+		btn.type = 'button'
+		const clickSpy = vi.spyOn(btn, 'click')
+		dayWrapper.appendChild(btn)
+		rootEl.appendChild(dayWrapper)
+		document.body.appendChild(rootEl)
+
+		// Le listener est attaché sur rootEl (fallback datePickerEl = rootEl), pas sur document
+		let savedListener: ((e: KeyboardEvent) => void) | null = null
+		const addSpy = vi.spyOn(rootEl, 'addEventListener').mockImplementation((type, listener) => {
+			if (type === 'keydown') savedListener = listener as (e: KeyboardEvent) => void
+		})
+
+		let attachListeners!: () => void
+		const TestComponent = defineComponent({
+			setup() {
+				const result = useCalendarKeyboardNavigation({
+					isDatePickerVisible,
+					datePickerRef: ref({ $el: rootEl } as unknown as ComponentPublicInstance),
+					getCurrentDate: vi.fn(() => new Date(2023, 0, 10)),
+					setCurrentDate,
+				})
+				attachListeners = result.attachListeners
+				return () => null
+			},
+		})
+		mount(TestComponent)
+		attachListeners()
+		vi.advanceTimersByTime(150)
+
+		const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+		Object.defineProperty(enterEvent, 'target', { value: btn })
+		savedListener!(enterEvent)
+
+		expect(clickSpy).toHaveBeenCalled()
+		document.body.removeChild(rootEl)
+
+		addSpy.mockRestore()
+		vi.useRealTimers()
+	})
+
+	it('handles Enter on header button (month/year control)', () => {
+		vi.useFakeTimers()
+		const isDatePickerVisible = ref(true)
+		const setCurrentDate = vi.fn()
+
+		let savedListener: ((e: KeyboardEvent) => void) | null = null
+		const addEventListenerSpy = vi.spyOn(document, 'addEventListener').mockImplementation((type, listener) => {
+			if (type === 'keydown') savedListener = listener as (e: KeyboardEvent) => void
+		})
+
+		let attachListeners!: () => void
+		const TestComponent = defineComponent({
+			setup() {
+				const result = useCalendarKeyboardNavigation({
+					isDatePickerVisible,
+					datePickerRef: ref(null),
+					getCurrentDate: vi.fn(() => null),
+					setCurrentDate,
+				})
+				attachListeners = result.attachListeners
+				return () => null
+			},
+		})
+		mount(TestComponent)
+		attachListeners()
+		vi.advanceTimersByTime(150)
+
+		// Simuler un bouton dans les contrôles d'entête
+		const controls = document.createElement('div')
+		controls.className = 'v-date-picker-controls'
+		const headerBtn = document.createElement('button')
+		const clickSpy = vi.spyOn(headerBtn, 'click')
+		controls.appendChild(headerBtn)
+		document.body.appendChild(controls)
+
+		const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+		Object.defineProperty(enterEvent, 'target', { value: headerBtn })
+		savedListener!(enterEvent)
+
+		expect(clickSpy).toHaveBeenCalled()
+		document.body.removeChild(controls)
+
+		addEventListenerSpy.mockRestore()
+		vi.useRealTimers()
+	})
+
+	it('handles ArrowLeft/Right/Up/Down in month dialog', () => {
+		vi.useFakeTimers()
+		const isDatePickerVisible = ref(true)
+		const setCurrentDate = vi.fn()
+
+		let savedListener: ((e: KeyboardEvent) => void) | null = null
+		const addEventListenerSpy = vi.spyOn(document, 'addEventListener').mockImplementation((type, listener) => {
+			if (type === 'keydown') savedListener = listener as (e: KeyboardEvent) => void
+		})
+
+		let attachListeners!: () => void
+		const TestComponent = defineComponent({
+			setup() {
+				const result = useCalendarKeyboardNavigation({
+					isDatePickerVisible,
+					datePickerRef: ref(null),
+					getCurrentDate: vi.fn(() => null),
+					setCurrentDate,
+				})
+				attachListeners = result.attachListeners
+				return () => null
+			},
+		})
+		mount(TestComponent)
+		attachListeners()
+		vi.advanceTimersByTime(150)
+
+		// Créer 3 boutons de mois dans le DOM
+		const monthsContainer = document.createElement('div')
+		monthsContainer.className = 'v-date-picker-months'
+		const buttons = Array.from({ length: 3 }, (_, i) => {
+			const b = document.createElement('button')
+			b.textContent = `Month ${i + 1}`
+			monthsContainer.appendChild(b)
+			return b
+		})
+		document.body.appendChild(monthsContainer)
+
+		const fireMonthKey = (key: string, targetBtn: HTMLButtonElement) => {
+			const event = new KeyboardEvent('keydown', { key, bubbles: true })
+			Object.defineProperty(event, 'target', { value: targetBtn })
+			savedListener!(event)
+		}
+
+		const focusSpy = vi.spyOn(buttons[1]!, 'focus')
+		// ArrowRight depuis bouton 0 → focus sur bouton 1
+		fireMonthKey('ArrowRight', buttons[0]!)
+		expect(focusSpy).toHaveBeenCalled()
+
+		// Enter sur un bouton de mois
+		const clickSpy = vi.spyOn(buttons[0]!, 'click')
+		fireMonthKey('Enter', buttons[0]!)
+		expect(clickSpy).toHaveBeenCalled()
+
+		document.body.removeChild(monthsContainer)
+		addEventListenerSpy.mockRestore()
+		vi.useRealTimers()
+	})
+
+	it('handles ArrowLeft/Right in year dialog', () => {
+		vi.useFakeTimers()
+		const isDatePickerVisible = ref(true)
+		const setCurrentDate = vi.fn()
+
+		let savedListener: ((e: KeyboardEvent) => void) | null = null
+		const addEventListenerSpy = vi.spyOn(document, 'addEventListener').mockImplementation((type, listener) => {
+			if (type === 'keydown') savedListener = listener as (e: KeyboardEvent) => void
+		})
+
+		let attachListeners!: () => void
+		const TestComponent = defineComponent({
+			setup() {
+				const result = useCalendarKeyboardNavigation({
+					isDatePickerVisible,
+					datePickerRef: ref(null),
+					getCurrentDate: vi.fn(() => null),
+					setCurrentDate,
+				})
+				attachListeners = result.attachListeners
+				return () => null
+			},
+		})
+		mount(TestComponent)
+		attachListeners()
+		vi.advanceTimersByTime(150)
+
+		// Créer 3 boutons d'années dans le DOM
+		const yearsContainer = document.createElement('div')
+		yearsContainer.className = 'v-date-picker-years'
+		const buttons = Array.from({ length: 3 }, (_, i) => {
+			const b = document.createElement('button')
+			b.textContent = `${2020 + i}`
+			yearsContainer.appendChild(b)
+			return b
+		})
+		document.body.appendChild(yearsContainer)
+
+		const fireYearKey = (key: string, targetBtn: HTMLButtonElement) => {
+			const event = new KeyboardEvent('keydown', { key, bubbles: true })
+			Object.defineProperty(event, 'target', { value: targetBtn })
+			savedListener!(event)
+		}
+
+		const focusSpy = vi.spyOn(buttons[1]!, 'focus')
+		// ArrowRight depuis bouton 0 → focus sur bouton 1
+		fireYearKey('ArrowRight', buttons[0]!)
+		expect(focusSpy).toHaveBeenCalled()
+
+		// Enter sur un bouton d'année
+		const clickSpy = vi.spyOn(buttons[0]!, 'click')
+		fireYearKey('Enter', buttons[0]!)
+		expect(clickSpy).toHaveBeenCalled()
+
+		document.body.removeChild(yearsContainer)
+		addEventListenerSpy.mockRestore()
+		vi.useRealTimers()
+	})
+
+	it('attaches on datePickerEl when no containerEl and detaches from it', () => {
+		vi.useFakeTimers()
+		const isDatePickerVisible = ref(true)
+
+		// Créer un rootEl avec .v-date-picker dedans
+		const rootEl = document.createElement('div')
+		const datePickerEl = document.createElement('div')
+		datePickerEl.className = 'v-date-picker'
+		rootEl.appendChild(datePickerEl)
+		document.body.appendChild(rootEl)
+
+		const addSpy = vi.spyOn(datePickerEl, 'addEventListener')
+		const removeSpy = vi.spyOn(datePickerEl, 'removeEventListener')
+
+		let detachListeners!: () => void
+		const TestComponent = defineComponent({
+			setup() {
+				const result = useCalendarKeyboardNavigation({
+					isDatePickerVisible,
+					datePickerRef: ref({ $el: rootEl } as unknown as ComponentPublicInstance),
+					getCurrentDate: vi.fn(() => null),
+					setCurrentDate: vi.fn(),
+				})
+				detachListeners = result.detachListeners
+				result.attachListeners()
+				vi.advanceTimersByTime(150)
+				return () => null
+			},
+		})
+		mount(TestComponent)
+
+		expect(addSpy).toHaveBeenCalledWith('keydown', expect.any(Function), true)
+
+		detachListeners()
+		expect(removeSpy).toHaveBeenCalledWith('keydown', expect.any(Function), true)
+
+		document.body.removeChild(rootEl)
+		vi.useRealTimers()
+	})
+
+	it('does not attach listener when already attached', () => {
+		vi.useFakeTimers()
+		const isDatePickerVisible = ref(true)
+
+		const addSpy = vi.spyOn(document, 'addEventListener')
+		let attachListeners!: () => void
+
+		const TestComponent = defineComponent({
+			setup() {
+				const result = useCalendarKeyboardNavigation({
+					isDatePickerVisible,
+					datePickerRef: ref(null),
+					getCurrentDate: vi.fn(() => null),
+					setCurrentDate: vi.fn(),
+				})
+				attachListeners = result.attachListeners
+				return () => null
+			},
+		})
+		mount(TestComponent)
+
+		const callsBefore = addSpy.mock.calls.length
+		attachListeners()
+		vi.advanceTimersByTime(150)
+		const callsAfterFirst = addSpy.mock.calls.length - callsBefore
+
+		// Second attach ne doit pas ajouter de listener supplémentaire
+		attachListeners()
+		vi.advanceTimersByTime(150)
+		const callsAfterSecond = addSpy.mock.calls.length - callsBefore
+
+		expect(callsAfterSecond).toBe(callsAfterFirst)
+
+		addSpy.mockRestore()
+		vi.useRealTimers()
+	})
 })

package/src/components/DatePicker/composables/tests/useDatePickerValidationBridge.spec.ts

@@ -0,0 +1,129 @@
+import { describe, expect, it, vi } from 'vitest'
+import { computed, nextTick, ref } from 'vue'
+import { useDatePickerValidationBridge } from '../useDatePickerValidationBridge'
+import type { DateObjectValue } from '../../types'
+
+const createBridgeOptions = (overrides = {}) => ({
+	showSuccessMessages: true,
+	disableErrorHandling: false,
+	noCalendar: false,
+	required: false,
+	displayRange: false,
+	customRules: ref([]),
+	customWarningRules: ref([]),
+	selectedDates: ref<DateObjectValue>(null),
+	isUpdatingFromInternal: ref(false),
+	currentRangeIsValid: ref(true),
+	getRangeValidationError: ref(''),
+	...overrides,
+})
+
+describe('useDatePickerValidationBridge', () => {
+	it('conserve un retour synchrone pour le flux standard', () => {
+		const selectedDates = ref<DateObjectValue>(new Date('2026-05-13'))
+		const { validateDates } = useDatePickerValidationBridge(createBridgeOptions({
+			selectedDates,
+		}))
+
+		const result = validateDates()
+
+		expect(result).not.toBeInstanceOf(Promise)
+		expect(result).toMatchObject({
+			hasError: false,
+		})
+	})
+
+	it('conserve le flux required specifique CalendarMode', async () => {
+		const { errors, validateDates } = useDatePickerValidationBridge(createBridgeOptions({
+			required: true,
+			useCalendarModeRequiredFlow: true,
+			isInitialValidation: ref(false),
+			isValidateOnBlur: computed(() => true),
+			onblur: ref(false),
+		}))
+
+		await validateDates(true)
+
+		expect(errors.value).toContain('La date est requise.')
+	})
+
+	it('court-circuite validateField en readonly quand demande', () => {
+		const readonly = ref(true)
+		const { validateField } = useDatePickerValidationBridge(createBridgeOptions({
+			readonly,
+			skipValidationWhenReadonly: true,
+		}))
+
+		const result = validateField(
+			new Date('2026-05-13'),
+			[{ type: 'custom', options: { validate: () => false, message: 'Erreur' } }],
+		)
+
+		expect(result).toMatchObject({
+			hasError: false,
+			state: {
+				errors: [],
+				warnings: [],
+				successes: [],
+			},
+		})
+	})
+
+	it('nettoie les messages quand readonly change sur le flux CalendarMode', async () => {
+		const readonly = ref(false)
+		const { errors } = useDatePickerValidationBridge(createBridgeOptions({
+			readonly,
+			skipValidationWhenReadonly: true,
+		}))
+
+		errors.value = ['Erreur persistante']
+		readonly.value = true
+		await nextTick()
+
+		expect(errors.value).toEqual([])
+	})
+
+	it('revalide les dates selectionnees quand les customRules changent si active', async () => {
+		const firstValidate = vi.fn(() => true)
+		const secondValidate = vi.fn(() => true)
+		const customRules = ref([
+			{ type: 'custom', options: { validate: firstValidate } },
+		])
+
+		useDatePickerValidationBridge(createBridgeOptions({
+			customRules,
+			selectedDates: ref<DateObjectValue>(new Date('2026-05-13')),
+			revalidateOnCustomRulesChange: true,
+		}))
+
+		customRules.value = [
+			{ type: 'custom', options: { validate: secondValidate } },
+		]
+
+		await nextTick()
+
+		expect(secondValidate).toHaveBeenCalledTimes(1)
+		expect(firstValidate).not.toHaveBeenCalled()
+	})
+
+	it('ne revalide pas les customRules si aucune date nest selectionnee', async () => {
+		const validate = vi.fn(() => true)
+		const customRules = ref([
+			{ type: 'custom', options: { validate } },
+		])
+
+		useDatePickerValidationBridge(createBridgeOptions({
+			customRules,
+			selectedDates: ref<DateObjectValue>(null),
+			revalidateOnCustomRulesChange: true,
+		}))
+
+		customRules.value = [
+			{ type: 'custom', options: { validate } },
+		]
+
+		await nextTick()
+
+		expect(validate).not.toHaveBeenCalled()
+	})
+})

package/src/components/DatePicker/composables/tests/useTodayButton.spec.ts

@@ -50,10 +50,10 @@ describe('useTodayButton', () => {
 
 	describe('selectToday', () => {
 		it('devrait définir selectedDates à la date du jour en mode date unique', () => {
-			// Créer une date fixe pour le test
+			// Figer l'horloge système sur une date fixe pour le test
 			const fixedDate = new Date('2023-01-01')
-			// Espionner le constructeur Date pour qu'il retourne notre date fixe
-			vi.spyOn(global, 'Date').mockImplementation(() => fixedDate)
+			vi.useFakeTimers()
+			vi.setSystemTime(fixedDate)
 
 			const { selectToday } = useTodayButton({
 				displayRange: false,
@@ -65,15 +65,15 @@ describe('useTodayButton', () => {
 			expect(selectedDates.value).toBeDefined()
 			expect(selectedDates.value).toEqual(fixedDate)
 
-			// Restaurer le mock
-			vi.restoreAllMocks()
+			// Restaurer l'horloge réelle
+			vi.useRealTimers()
 		})
 
 		it('devrait définir selectedDates à un tableau avec deux fois la date du jour en mode plage', () => {
-			// Créer une date fixe pour le test
+			// Figer l'horloge système sur une date fixe pour le test
 			const fixedDate = new Date('2023-01-01')
-			// Espionner le constructeur Date pour qu'il retourne notre date fixe
-			vi.spyOn(global, 'Date').mockImplementation(() => fixedDate)
+			vi.useFakeTimers()
+			vi.setSystemTime(fixedDate)
 
 			const { selectToday } = useTodayButton({
 				displayRange: true,
@@ -90,8 +90,8 @@ describe('useTodayButton', () => {
 				expect(selectedDates.value[1]).toEqual(fixedDate)
 			}
 
-			// Restaurer le mock
-			vi.restoreAllMocks()
+			// Restaurer l'horloge réelle
+			vi.useRealTimers()
 		})
 	})
 })

package/src/components/DatePicker/composables/useCalendarKeyboardNavigation.ts

@@ -34,6 +34,7 @@ export const useCalendarKeyboardNavigation = (options: CalendarKeyboardNavigatio
 	const toISO = (date: Date) => dayjs(date).format('YYYY-MM-DD')
 
 	let isListenerAttached = false
+	let attachTimeoutId: ReturnType<typeof setTimeout> | undefined
 
 	const focusMonthButton = (button: HTMLButtonElement | undefined | null) => {
 		button?.focus({ preventScroll: true })
@@ -506,11 +507,19 @@ export const useCalendarKeyboardNavigation = (options: CalendarKeyboardNavigatio
 			}
 		}
 
-		// Attendre plusieurs ticks pour être sûr que le focusTrap est déjà attaché
-		setTimeout(tryAttach, 100)
+		// Attendre plusieurs ticks pour être sûr que le focusTrap est déjà attaché.
+		// L'id est conservé pour pouvoir annuler le timer au démontage et éviter que
+		// tryAttach ne s'exécute après la destruction du composant (accès à `document`).
+		attachTimeoutId = setTimeout(tryAttach, 100)
 	}
 
 	const detachListeners = () => {
+		// Annuler une éventuelle attache différée encore en attente.
+		if (attachTimeoutId !== undefined) {
+			clearTimeout(attachTimeoutId)
+			attachTimeoutId = undefined
+		}
+
 		if (!isListenerAttached) return
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
 		const rootEl = (datePickerRef.value as any)?.$el as HTMLElement | undefined