@cnamts/synapse 1.0.25 → 1.0.27

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/useDatePickerState.ts

@@ -1,5 +1,6 @@
 import { computed, ref, watch, type Ref, type ComputedRef } from 'vue'
-import type { DateInput, DateValue } from '@/composables/date/useDateInitializationDayjs'
+import type { DateInput, DateModelValue } from '@/composables/date/useDateInitializationDayjs'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 export interface UseDatePickerStateOptions {
 	selectedDates: Ref<Date | (Date | null)[] | null>
@@ -11,7 +12,7 @@ export interface UseDatePickerStateOptions {
 	formatDate: (date: Date | null, format: string) => string
 	initializeSelectedDates: (value: DateInput | null, format: string, dateFormatReturn?: string) => Date | (Date | null)[] | null
 	validateDates: (forceValidation?: boolean) => void
-	updateModel: (value: DateValue) => void
+	updateModel: (value: DateModelValue) => void
 	generateDateRange?: (start: Date, end: Date) => Date[]
 }
 
@@ -20,7 +21,7 @@ export interface UseDatePickerStateResult {
 	rangeBoundaryDates?: Ref<[Date | null, Date | null] | null>
 	textInputValue: Ref<string>
 	displayFormattedDate: Ref<string>
-	formattedDate: Ref<DateValue>
+	formattedDate: Ref<DateModelValue>
 	displayFormattedFromSelectedDates: ComputedRef<string | null>
 	syncFromModelValue: (newValue: DateInput | undefined) => void
 	syncTextInputFromSelection: () => void
@@ -44,7 +45,7 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 	const textInputValue = ref('')
 	const displayFormattedDate = ref('')
 
-	const formattedDate = computed<DateValue>(() => {
+	const formattedDate = computed<DateModelValue>(() => {
 		if (!selectedDates.value) return ''
 		const rf = dateFormatReturn || format
 
@@ -73,7 +74,7 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 
 		if (Array.isArray(selectedDates.value)) {
 			if (selectedDates.value.length >= 2) {
-				return `${formatDate(selectedDates.value[0]!, format)} - ${formatDate(
+				return `${formatDate(selectedDates.value[0]!, format)}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${formatDate(
 					selectedDates.value[selectedDates.value.length - 1]!,
 					format,
 				)}`
@@ -91,7 +92,17 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 				textInputValue.value = ''
 				return
 			}
-			if (typeof newValue === 'string') {
+			if (Array.isArray(newValue) && newValue.length === 2) {
+				// Mode plage : afficher "startDate - endDate" dans l'input
+				const startStr = dateFormatReturn
+					? formatDate(parseDate(newValue[0]!, dateFormatReturn), format)
+					: newValue[0]!
+				const endStr = dateFormatReturn
+					? formatDate(parseDate(newValue[1]!, dateFormatReturn), format)
+					: newValue[1]!
+				textInputValue.value = `${startStr}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${endStr}`
+			}
+			else if (typeof newValue === 'string') {
 				if (dateFormatReturn) {
 					const date = parseDate(newValue, dateFormatReturn)
 					if (date) {
@@ -128,16 +139,24 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 		}
 
 		if (selectedDates.value) {
-			const firstDate = Array.isArray(selectedDates.value)
-				? selectedDates.value[0]
-				: selectedDates.value
-			if (firstDate) {
-				const formattedForInput = formatDate(firstDate, format)
-				textInputValue.value = formattedForInput
+			if (displayRange && Array.isArray(selectedDates.value) && selectedDates.value.length >= 2) {
+				const startDate = selectedDates.value[0]
+				const endDate = selectedDates.value[selectedDates.value.length - 1]
+				if (startDate && endDate) {
+					textInputValue.value = `${formatDate(startDate, format)}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${formatDate(endDate, format)}`
+				}
+			}
+			else {
+				const firstDate = Array.isArray(selectedDates.value)
+					? selectedDates.value[0]
+					: selectedDates.value
+				if (firstDate) {
+					textInputValue.value = formatDate(firstDate, format)
+				}
 			}
 			if (Array.isArray(formattedDate.value)) {
 				// Pour les plages, formater avec le séparateur standard " - "
-				displayFormattedDate.value = formattedDate.value.join(' - ')
+				displayFormattedDate.value = formattedDate.value.join(DATE_PICKER_MESSAGES.RANGE_SEPARATOR)
 			}
 			else {
 				displayFormattedDate.value = (formattedDate.value as string) || ''
@@ -157,7 +176,7 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 			const startDate = value[0]
 			const endDate = value[value.length - 1]
 			if (startDate && endDate) {
-				const formattedForInput = `${formatDate(startDate, format)} - ${formatDate(endDate, format)}`
+				const formattedForInput = `${formatDate(startDate, format)}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${formatDate(endDate, format)}`
 				if (textInputValue.value !== formattedForInput) {
 					textInputValue.value = formattedForInput
 				}