@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -1,7 +1,7 @@
 import { mount, flushPromises } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 import DateTextInput from '../DateTextInput.vue'
-import SyTextField from '../../../Customs/SyTextField/SyTextField.vue'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 
 describe('DateTextInput.clean', () => {
 	const mountComponent = (props: Record<string, unknown>) => mount(DateTextInput, {
@@ -282,6 +282,57 @@ describe('DateTextInput.clean', () => {
 		expect(input.element.value).toContain('01/01/2025')
 	})
 
+	it('validateOnSubmit succeeds with a valid date', async () => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			format: 'DD/MM/YYYY',
+			required: true,
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('15/06/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		const result = await wrapper.vm.validateOnSubmit()
+		expect(result).toBe(true)
+	})
+
+	it('validateOnSubmit fails with an invalid date', async () => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			format: 'DD/MM/YYYY',
+			required: true,
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('99/99/9999')
+		await input.trigger('blur')
+		await flushPromises()
+
+		const result = await wrapper.vm.validateOnSubmit()
+		expect(result).toBe(false)
+	})
+
+	it('validateOnSubmit fails with a future date and notAfterToday custom rule', async () => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			format: 'DD/MM/YYYY',
+			required: true,
+			customRules: [
+				{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd\'hui' } },
+			],
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2100')
+		await input.trigger('blur')
+		await flushPromises()
+
+		const result = await wrapper.vm.validateOnSubmit()
+		expect(result).toBe(false)
+	})
+
 	it('does not validate on blur when isValidateOnBlur is false but validateOnSubmit still applies', async () => {
 		const wrapper = mountComponent({
 			label: 'Date',

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

@@ -24,4 +24,5 @@ export { useMonthButtonCustomization } from './useMonthButtonCustomization'
 export { useAsteriskDisplay } from './useAsteriskDisplay'
 export { useDatePickerState } from './useDatePickerState'
 export { useHolidayHighlighting } from './useHolidayHighlighting'
+export { useDatePickerFocusTrap } from './useDatePickerFocusTrap'
 export * from './useCalendarKeyboardNavigation'

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

@@ -8,6 +8,7 @@ import { useCalendarKeyboardNavigation } from '../useCalendarKeyboardNavigation'
 
 describe('useCalendarKeyboardNavigation', () => {
 	it('attaches and detaches keydown listener based on visibility', async () => {
+		vi.useFakeTimers()
 		const isDatePickerVisible = ref(false)
 		const datePickerRef = ref<ComponentPublicInstance | null>(null)
 		const getCurrentDate = vi.fn(() => null)
@@ -32,100 +33,116 @@ describe('useCalendarKeyboardNavigation', () => {
 
 		// When the date picker becomes visible, a keydown listener should be attached
 		isDatePickerVisible.value = true
-		await nextTick()
-		await nextTick()
+		await nextTick() // watcher triggers and calls nextTick(attachListeners)
+		await nextTick() // attachListeners runs and sets setTimeout
+		vi.advanceTimersByTime(150) // Flush setTimeout inside tryAttach
 		expect(addEventListenerSpy).toHaveBeenCalled()
 
 		// When it becomes hidden, the listener should be detached
 		isDatePickerVisible.value = false
-		await nextTick()
+		await nextTick() // watcher triggers and calls detachListeners
 		expect(removeEventListenerSpy).toHaveBeenCalled()
 
 		addEventListenerSpy.mockRestore()
 		removeEventListenerSpy.mockRestore()
+		vi.useRealTimers()
 	})
 
-	it('moves one day forward on ArrowRight from a day cell and focuses the next day', async () => {
+	it('navigates with arrows correctly, setting next day and forcing focus', async () => {
+		vi.useFakeTimers()
 		const isDatePickerVisible = ref(true)
-
 		const rootEl = document.createElement('div')
 
-		// Current day cell
-		const currentCell = document.createElement('div')
-		currentCell.setAttribute('data-v-date', '2023-01-10')
-		const currentButton = document.createElement('button')
-		currentButton.type = 'button'
-		currentCell.appendChild(currentButton)
-		rootEl.appendChild(currentCell)
-
-		// Next day cell
-		const nextCell = document.createElement('div')
-		nextCell.setAttribute('data-v-date', '2023-01-11')
-		const nextButton = document.createElement('button')
-		nextButton.type = 'button'
-		const focusSpy = vi.fn()
-		nextButton.focus = focusSpy
-		nextCell.appendChild(nextButton)
-		rootEl.appendChild(nextCell)
-
 		const datePickerRef = ref<ComponentPublicInstance | null>({ $el: rootEl } as unknown as ComponentPublicInstance)
 		const getCurrentDate = vi.fn(() => new Date(2023, 0, 10))
 		const setCurrentDate = vi.fn()
 
-		let savedListener: EventListener | null = null
+		let savedListener: ((e: KeyboardEvent) => void) | null = null
+
 		const addEventListenerSpy = vi.spyOn(document, 'addEventListener').mockImplementation((type, listener) => {
 			if (type === 'keydown') {
-				savedListener = listener as EventListener
+				savedListener = listener as ((e: KeyboardEvent) => void)
 			}
 		})
 
-		let attachListeners!: () => void
 		const TestComponent = defineComponent({
 			setup() {
-				const { attachListeners: attachListenersInner } = useCalendarKeyboardNavigation({
+				const { attachListeners } = useCalendarKeyboardNavigation({
 					isDatePickerVisible,
 					datePickerRef,
 					getCurrentDate,
 					setCurrentDate,
 				})
-				attachListeners = attachListenersInner
+
+				// Assurer qu'on ne trouve aucun des deux autres sélecteurs pour retomber sur document.addEventListener
+				datePickerRef.value = null
+
+				attachListeners()
+				vi.advanceTimersByTime(150) // Flush setTimeout inside tryAttach
 				return () => null
 			},
 		})
 
 		mount(TestComponent)
-
-		attachListeners()
-		expect(addEventListenerSpy).toHaveBeenCalled()
 		expect(savedListener).toBeTruthy()
 
-		// Simulate ArrowRight on the current day button
-		const event = new KeyboardEvent('keydown', { key: 'ArrowRight' })
-		Object.defineProperty(event, 'target', { value: currentButton })
-
-		savedListener!(event)
-		await nextTick()
-
-		expect(setCurrentDate).toHaveBeenCalledTimes(1)
-		const calledDate = setCurrentDate.mock.calls[0]?.[0] as Date
-		expect(calledDate).toBeInstanceOf(Date)
-		expect(calledDate.getDate()).toBe(11)
-		expect(focusSpy).toHaveBeenCalled()
+		// ArrowRight: 10 Jan -> 11 Jan
+		const rightEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
+		const currentCell = document.createElement('div')
+		currentCell.setAttribute('data-v-date', '2023-01-10')
+		const currentButton = document.createElement('button')
+		currentButton.type = 'button'
+		currentCell.appendChild(currentButton)
+		Object.defineProperty(rightEvent, 'target', { value: currentButton })
+
+		if (savedListener) (savedListener as (e: KeyboardEvent) => void)(rightEvent)
+
+		expect(setCurrentDate).toHaveBeenCalled()
+		const nextDate = setCurrentDate.mock.calls[0]?.[0] as Date | undefined
+		expect(nextDate?.getDate()).toBe(11)
+
+		// ArrowLeft: 10 Jan -> 9 Jan
+		setCurrentDate.mockClear()
+		const leftEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true })
+		Object.defineProperty(leftEvent, 'target', { value: currentButton })
+		if (savedListener) (savedListener as (e: KeyboardEvent) => void)(leftEvent)
+		const prevDate = setCurrentDate.mock.calls[0]?.[0] as Date | undefined
+		expect(prevDate?.getDate()).toBe(9)
+
+		// ArrowUp: 10 Jan -> 3 Jan
+		setCurrentDate.mockClear()
+		const upEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
+		Object.defineProperty(upEvent, 'target', { value: currentButton })
+		if (savedListener) (savedListener as (e: KeyboardEvent) => void)(upEvent)
+		const upDate = setCurrentDate.mock.calls[0]?.[0] as Date | undefined
+		expect(upDate?.getDate()).toBe(3)
+
+		// ArrowDown: 10 Jan -> 17 Jan
+		setCurrentDate.mockClear()
+		const downEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
+		Object.defineProperty(downEvent, 'target', { value: currentButton })
+		if (savedListener) (savedListener as (e: KeyboardEvent) => void)(downEvent)
+		const downDate = setCurrentDate.mock.calls[0]?.[0] as Date | undefined
+		expect(downDate?.getDate()).toBe(17)
 
 		addEventListenerSpy.mockRestore()
+		vi.useRealTimers()
 	})
 
 	it('falls back to getCurrentDate when event target is not a day cell', () => {
+		vi.useFakeTimers()
 		const isDatePickerVisible = ref(true)
-		const datePickerRef = ref<ComponentPublicInstance | null>(null)
+		const rootEl = document.createElement('div')
+		const datePickerRef = ref<ComponentPublicInstance | null>({ $el: rootEl } as unknown as ComponentPublicInstance)
 		const baseDate = new Date(2023, 0, 10)
 		const getCurrentDate = vi.fn(() => baseDate)
 		const setCurrentDate = vi.fn()
 
-		let savedListener: EventListener | null = null
+		let savedListener: ((e: KeyboardEvent) => void) | null = null
+
 		const addEventListenerSpy = vi.spyOn(document, 'addEventListener').mockImplementation((type, listener) => {
 			if (type === 'keydown') {
-				savedListener = listener as EventListener
+				savedListener = listener as ((e: KeyboardEvent) => void)
 			}
 		})
 
@@ -138,6 +155,9 @@ describe('useCalendarKeyboardNavigation', () => {
 					getCurrentDate,
 					setCurrentDate,
 				})
+
+				datePickerRef.value = null
+
 				attachListeners = result.attachListeners
 				return () => null
 			},
@@ -145,39 +165,49 @@ describe('useCalendarKeyboardNavigation', () => {
 
 		mount(TestComponent)
 
+		// Le setTimeout(..., 100) est appelé dans attachListeners, il faut l'avancer
 		attachListeners()
+		vi.advanceTimersByTime(150)
+
 		expect(addEventListenerSpy).toHaveBeenCalled()
 		expect(savedListener).toBeTruthy()
 
 		const preventDefault = vi.fn()
-		const event = {
+		const event = new KeyboardEvent('keydown', {
 			key: 'ArrowRight',
 			altKey: false,
 			ctrlKey: false,
 			metaKey: false,
-			preventDefault,
-			target: document.createElement('button'),
-		} as unknown as Event
+		})
+		Object.defineProperty(event, 'preventDefault', { value: preventDefault })
+		Object.defineProperty(event, 'target', { value: document.createElement('button') })
 
 		savedListener!(event)
 
 		expect(preventDefault).toHaveBeenCalled()
 		expect(setCurrentDate).toHaveBeenCalledTimes(1)
-		expect(setCurrentDate).toHaveBeenCalledWith(baseDate)
+
+		// When using ArrowRight from baseDate (10 Jan), it should compute 11 Jan
+		const nextDate = setCurrentDate.mock.calls[0]?.[0] as Date | undefined
+		expect(nextDate?.getDate()).toBe(11)
 
 		addEventListenerSpy.mockRestore()
+		vi.useRealTimers()
 	})
 
 	it('does not react to non-arrow keys', () => {
+		vi.useFakeTimers()
 		const isDatePickerVisible = ref(true)
-		const datePickerRef = ref<ComponentPublicInstance | null>(null)
+		const rootEl = document.createElement('div')
+		const datePickerRef = ref<ComponentPublicInstance | null>({ $el: rootEl } as unknown as ComponentPublicInstance)
 		const getCurrentDate = vi.fn(() => new Date(2023, 0, 10))
 		const setCurrentDate = vi.fn()
 
-		let savedListener: EventListener | null = null
+		let savedListener: ((e: KeyboardEvent) => void) | null = null
+
 		const addEventListenerSpy = vi.spyOn(document, 'addEventListener').mockImplementation((type, listener) => {
 			if (type === 'keydown') {
-				savedListener = listener as EventListener
+				savedListener = listener as ((e: KeyboardEvent) => void)
 			}
 		})
 
@@ -190,6 +220,9 @@ describe('useCalendarKeyboardNavigation', () => {
 					getCurrentDate,
 					setCurrentDate,
 				})
+
+				datePickerRef.value = null
+
 				attachListeners = result.attachListeners
 				return () => null
 			},
@@ -198,17 +231,18 @@ describe('useCalendarKeyboardNavigation', () => {
 		mount(TestComponent)
 
 		attachListeners()
+		vi.advanceTimersByTime(150) // Flush setTimeout inside tryAttach
 		expect(savedListener).toBeTruthy()
 
 		const preventDefault = vi.fn()
-		const event = {
+		const event = new KeyboardEvent('keydown', {
 			key: 'A',
 			altKey: false,
 			ctrlKey: false,
 			metaKey: false,
-			preventDefault,
-			target: document.createElement('div'),
-		} as unknown as Event
+		})
+		Object.defineProperty(event, 'preventDefault', { value: preventDefault })
+		Object.defineProperty(event, 'target', { value: document.createElement('div') })
 
 		savedListener!(event)
 
@@ -216,18 +250,22 @@ describe('useCalendarKeyboardNavigation', () => {
 		expect(preventDefault).not.toHaveBeenCalled()
 
 		addEventListenerSpy.mockRestore()
+		vi.useRealTimers()
 	})
 
 	it('ignores arrow keys when modifier keys are pressed', () => {
+		vi.useFakeTimers()
 		const isDatePickerVisible = ref(true)
-		const datePickerRef = ref<ComponentPublicInstance | null>(null)
+		const rootEl = document.createElement('div')
+		const datePickerRef = ref<ComponentPublicInstance | null>({ $el: rootEl } as unknown as ComponentPublicInstance)
 		const getCurrentDate = vi.fn(() => new Date(2023, 0, 10))
 		const setCurrentDate = vi.fn()
 
-		let savedListener: EventListener | null = null
+		let savedListener: ((e: KeyboardEvent) => void) | null = null
+
 		const addEventListenerSpy = vi.spyOn(document, 'addEventListener').mockImplementation((type, listener) => {
 			if (type === 'keydown') {
-				savedListener = listener as EventListener
+				savedListener = listener as ((e: KeyboardEvent) => void)
 			}
 		})
 
@@ -240,6 +278,9 @@ describe('useCalendarKeyboardNavigation', () => {
 					getCurrentDate,
 					setCurrentDate,
 				})
+
+				datePickerRef.value = null
+
 				attachListeners = result.attachListeners
 				return () => null
 			},
@@ -248,17 +289,19 @@ describe('useCalendarKeyboardNavigation', () => {
 		mount(TestComponent)
 
 		attachListeners()
+		vi.advanceTimersByTime(150)
+
 		expect(savedListener).toBeTruthy()
 
 		const preventDefault = vi.fn()
-		const event = {
+		const event = new KeyboardEvent('keydown', {
 			key: 'ArrowRight',
 			altKey: true,
 			ctrlKey: false,
 			metaKey: false,
-			preventDefault,
-			target: document.createElement('div'),
-		} as unknown as Event
+		})
+		Object.defineProperty(event, 'preventDefault', { value: preventDefault })
+		Object.defineProperty(event, 'target', { value: document.createElement('div') })
 
 		savedListener!(event)
 
@@ -266,5 +309,6 @@ describe('useCalendarKeyboardNavigation', () => {
 		expect(preventDefault).not.toHaveBeenCalled()
 
 		addEventListenerSpy.mockRestore()
+		vi.useRealTimers()
 	})
 })

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

@@ -0,0 +1,138 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useDatePickerFocusTrap } from '../useDatePickerFocusTrap'
+import { ref } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+describe('useDatePickerFocusTrap', () => {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
+	let isDatePickerVisible: any
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
+	let datePickerRef: any
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
+	let onClose: any
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
+	let restoreFocus: any
+
+	beforeEach(() => {
+		isDatePickerVisible = ref(true)
+		datePickerRef = ref<ComponentPublicInstance | null>(null)
+		onClose = vi.fn()
+		restoreFocus = vi.fn()
+	})
+
+	it('should do nothing if date picker is closed', () => {
+		isDatePickerVisible.value = false
+		const { handleMenuKeydown } = useDatePickerFocusTrap({
+			isDatePickerVisible,
+			datePickerRef,
+		})
+
+		const event = new KeyboardEvent('keydown', { key: 'Tab' })
+		const preventDefault = vi.spyOn(event, 'preventDefault')
+		handleMenuKeydown(event)
+
+		expect(preventDefault).not.toHaveBeenCalled()
+	})
+
+	it('should close and restore focus on Escape', () => {
+		const { handleMenuKeydown } = useDatePickerFocusTrap({
+			isDatePickerVisible,
+			datePickerRef,
+			onClose,
+			restoreFocus,
+		})
+
+		const event = new KeyboardEvent('keydown', { key: 'Escape' })
+		const preventDefault = vi.spyOn(event, 'preventDefault')
+		const stopPropagation = vi.spyOn(event, 'stopPropagation')
+
+		handleMenuKeydown(event)
+
+		expect(isDatePickerVisible.value).toBe(false)
+		expect(onClose).toHaveBeenCalled()
+		expect(restoreFocus).toHaveBeenCalled()
+		expect(preventDefault).toHaveBeenCalled()
+		expect(stopPropagation).toHaveBeenCalled()
+	})
+
+	it('should let non-Tab keys pass without interference', () => {
+		const { handleMenuKeydown } = useDatePickerFocusTrap({
+			isDatePickerVisible,
+			datePickerRef,
+		})
+
+		const event = new KeyboardEvent('keydown', { key: 'ArrowRight' })
+		const preventDefault = vi.spyOn(event, 'preventDefault')
+
+		handleMenuKeydown(event)
+
+		expect(preventDefault).not.toHaveBeenCalled()
+	})
+
+	it('should focus Today button when Tab is pressed inside a date grid', () => {
+		const rootEl = document.createElement('div')
+
+		// Create Today button
+		const todayButton = document.createElement('button')
+		todayButton.className = 'date-picker__today-button'
+		todayButton.focus = vi.fn()
+		rootEl.appendChild(todayButton)
+
+		// Create grid
+		const grid = document.createElement('div')
+		grid.className = 'v-date-picker-month'
+
+		// Create active cell inside grid
+		const cell = document.createElement('div')
+		const cellBtn = document.createElement('button')
+		cell.appendChild(cellBtn)
+		grid.appendChild(cell)
+		rootEl.appendChild(grid)
+
+		datePickerRef.value = { $el: rootEl } as unknown as ComponentPublicInstance
+
+		const { handleMenuKeydown } = useDatePickerFocusTrap({
+			isDatePickerVisible,
+			datePickerRef,
+		})
+
+		const event = new KeyboardEvent('keydown', { key: 'Tab' })
+		Object.defineProperty(event, 'target', { value: cellBtn })
+		const preventDefault = vi.spyOn(event, 'preventDefault')
+
+		handleMenuKeydown(event)
+
+		expect(preventDefault).toHaveBeenCalled()
+		expect(todayButton.focus).toHaveBeenCalled()
+	})
+
+	it('should cycle focus normally if not in a grid', () => {
+		const rootEl = document.createElement('div')
+
+		const btn1 = document.createElement('button')
+		btn1.focus = vi.fn()
+
+		const btn2 = document.createElement('button')
+		btn2.focus = vi.fn()
+
+		rootEl.appendChild(btn1)
+		rootEl.appendChild(btn2)
+
+		datePickerRef.value = { $el: rootEl } as unknown as ComponentPublicInstance
+
+		const { handleMenuKeydown } = useDatePickerFocusTrap({
+			isDatePickerVisible,
+			datePickerRef,
+		})
+
+		// Simuler le focus actuel sur btn1
+		vi.spyOn(document, 'activeElement', 'get').mockReturnValue(btn1)
+
+		const event = new KeyboardEvent('keydown', { key: 'Tab' })
+		Object.defineProperty(event, 'target', { value: btn1 })
+
+		handleMenuKeydown(event)
+
+		expect(btn2.focus).toHaveBeenCalled()
+	})
+})