@cnamts/synapse 0.0.16-alpha → 1.0.1

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

@@ -0,0 +1,339 @@
+import { describe, it, expect, vi, beforeEach, afterAll } from 'vitest'
+import { ref } from 'vue'
+import { useDatePickerVisibility } from '../useDatePickerVisibility'
+
+// Mock pour les hooks de cycle de vie de Vue
+vi.mock('vue', async () => {
+	const actual = await vi.importActual('vue')
+	return {
+		...actual,
+		onMounted: vi.fn(fn => fn()),
+		onBeforeUnmount: vi.fn(),
+		nextTick: vi.fn(fn => fn && fn()),
+	}
+})
+
+describe('useDatePickerVisibility', () => {
+	// Mocks et setup
+	const mockUpdateAccessibility = vi.fn()
+	const mockValidateDates = vi.fn()
+	const mockEmitClosed = vi.fn()
+	const mockEmitFocus = vi.fn()
+	const isDatePickerVisible = ref(false)
+	const isManualInputActive = ref(false)
+	const hasInteracted = ref(false)
+	// Mock pour document.addEventListener
+	const originalAddEventListener = document.addEventListener
+	const originalRemoveEventListener = document.removeEventListener
+	const mockAddEventListener = vi.fn()
+	const mockRemoveEventListener = vi.fn()
+
+	beforeEach(() => {
+		// Réinitialiser les mocks et les refs avant chaque test
+		mockUpdateAccessibility.mockReset()
+		mockValidateDates.mockReset()
+		mockEmitClosed.mockReset()
+		mockEmitFocus.mockReset()
+		isDatePickerVisible.value = false
+		isManualInputActive.value = false
+		hasInteracted.value = false
+
+		// Restaurer les mocks de document
+		document.addEventListener = mockAddEventListener
+		document.removeEventListener = mockRemoveEventListener
+		mockAddEventListener.mockReset()
+		mockRemoveEventListener.mockReset()
+	})
+
+	// Restaurer les fonctions originales après tous les tests
+	afterAll(() => {
+		document.addEventListener = originalAddEventListener
+		document.removeEventListener = originalRemoveEventListener
+	})
+
+	it('devrait enregistrer un écouteur d\'événement pour les clics en dehors du DatePicker', () => {
+		useDatePickerVisibility({
+			isDatePickerVisible,
+			isManualInputActive,
+			hasInteracted,
+			updateAccessibility: mockUpdateAccessibility,
+			validateDates: mockValidateDates,
+			emitClosed: mockEmitClosed,
+			emitFocus: mockEmitFocus,
+		})
+
+		expect(mockAddEventListener).toHaveBeenCalledWith('click', expect.any(Function))
+	})
+
+	describe('toggleDatePicker', () => {
+		it('ne devrait pas basculer le DatePicker si disabled=true', () => {
+			const { toggleDatePicker } = useDatePickerVisibility({
+				disabled: true,
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			toggleDatePicker()
+
+			expect(isDatePickerVisible.value).toBe(false)
+		})
+
+		it('ne devrait pas basculer le DatePicker si readonly=true', () => {
+			const { toggleDatePicker } = useDatePickerVisibility({
+				readonly: true,
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			toggleDatePicker()
+
+			expect(isDatePickerVisible.value).toBe(false)
+		})
+
+		it('devrait basculer le DatePicker de fermé à ouvert', () => {
+			const { toggleDatePicker } = useDatePickerVisibility({
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			toggleDatePicker()
+
+			expect(isDatePickerVisible.value).toBe(true)
+			expect(mockUpdateAccessibility).toHaveBeenCalledTimes(1)
+		})
+
+		it('devrait basculer le DatePicker d\'ouvert à fermé', () => {
+			isDatePickerVisible.value = true
+
+			const { toggleDatePicker } = useDatePickerVisibility({
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			toggleDatePicker()
+
+			expect(isDatePickerVisible.value).toBe(false)
+			expect(mockEmitClosed).toHaveBeenCalledTimes(1)
+			expect(mockValidateDates).toHaveBeenCalledTimes(1)
+		})
+	})
+
+	describe('openDatePicker', () => {
+		it('devrait ouvrir le DatePicker s\'il est fermé', () => {
+			const { openDatePicker } = useDatePickerVisibility({
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			openDatePicker()
+
+			expect(isDatePickerVisible.value).toBe(true)
+		})
+
+		it('ne devrait pas modifier l\'état si le DatePicker est déjà ouvert', () => {
+			isDatePickerVisible.value = true
+
+			const { openDatePicker } = useDatePickerVisibility({
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			openDatePicker()
+
+			expect(isDatePickerVisible.value).toBe(true)
+			// updateAccessibility ne devrait pas être appelé une seconde fois
+			expect(mockUpdateAccessibility).not.toHaveBeenCalled()
+		})
+	})
+
+	describe('openDatePickerOnClick', () => {
+		it('devrait ouvrir le DatePicker si textFieldActivator=true', () => {
+			const { openDatePickerOnClick } = useDatePickerVisibility({
+				textFieldActivator: true,
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			openDatePickerOnClick()
+
+			expect(isDatePickerVisible.value).toBe(true)
+		})
+
+		it('ne devrait pas ouvrir le DatePicker si textFieldActivator=false', () => {
+			const { openDatePickerOnClick } = useDatePickerVisibility({
+				textFieldActivator: false,
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			openDatePickerOnClick()
+
+			expect(isDatePickerVisible.value).toBe(false)
+		})
+	})
+
+	describe('openDatePickerOnFocus', () => {
+		it('devrait ouvrir le DatePicker si textFieldActivator=true', () => {
+			const { openDatePickerOnFocus } = useDatePickerVisibility({
+				textFieldActivator: true,
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			openDatePickerOnFocus()
+
+			expect(isDatePickerVisible.value).toBe(true)
+			expect(mockEmitFocus).toHaveBeenCalledTimes(1)
+			expect(isManualInputActive.value).toBe(true)
+			expect(hasInteracted.value).toBe(true)
+		})
+
+		it('ne devrait pas ouvrir le DatePicker si textFieldActivator=false', () => {
+			const { openDatePickerOnFocus } = useDatePickerVisibility({
+				textFieldActivator: false,
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			openDatePickerOnFocus()
+
+			expect(isDatePickerVisible.value).toBe(false)
+			expect(mockEmitFocus).toHaveBeenCalledTimes(1)
+			expect(isManualInputActive.value).toBe(true)
+			expect(hasInteracted.value).toBe(true)
+		})
+	})
+
+	describe('handleClickOutside', () => {
+		it('ne devrait rien faire si le DatePicker est fermé', () => {
+			const { handleClickOutside } = useDatePickerVisibility({
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			const event = new MouseEvent('click', { bubbles: true })
+			Object.defineProperty(event, 'target', { value: document.createElement('div') })
+
+			handleClickOutside(event)
+
+			expect(mockEmitClosed).not.toHaveBeenCalled()
+			expect(mockValidateDates).not.toHaveBeenCalled()
+		})
+
+		it('ne devrait rien faire si le clic est à l\'intérieur du DatePicker', () => {
+			isDatePickerVisible.value = true
+
+			const { handleClickOutside } = useDatePickerVisibility({
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			// Créer un élément avec la classe date-picker-container
+			const container = document.createElement('div')
+			container.className = 'date-picker-container'
+
+			// Créer un élément enfant
+			const child = document.createElement('button')
+			container.appendChild(child)
+
+			// Simuler un clic sur l'enfant
+			const event = { target: child } as unknown as MouseEvent
+
+			// Mock pour closest
+			child.closest = vi.fn().mockReturnValue(container)
+
+			handleClickOutside(event)
+
+			expect(mockEmitClosed).not.toHaveBeenCalled()
+			expect(mockValidateDates).not.toHaveBeenCalled()
+		})
+
+		it('devrait fermer le DatePicker si le clic est à l\'extérieur', () => {
+			isDatePickerVisible.value = true
+
+			const { handleClickOutside } = useDatePickerVisibility({
+				isDatePickerVisible,
+				isManualInputActive,
+				hasInteracted,
+				updateAccessibility: mockUpdateAccessibility,
+				validateDates: mockValidateDates,
+				emitClosed: mockEmitClosed,
+				emitFocus: mockEmitFocus,
+			})
+
+			// Créer un élément extérieur
+			const outsideElement = document.createElement('div')
+
+			// Mock pour closest
+			outsideElement.closest = vi.fn().mockReturnValue(null)
+
+			// Simuler un clic sur l'élément extérieur
+			const event = { target: outsideElement } as unknown as MouseEvent
+
+			handleClickOutside(event)
+
+			expect(mockEmitClosed).toHaveBeenCalledTimes(1)
+			expect(mockValidateDates).toHaveBeenCalledTimes(1)
+		})
+	})
+})

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

@@ -0,0 +1,277 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useDateRangeInput } from '../useDateRangeInput'
+
+describe('useDateRangeInput', () => {
+	// Mocks et setup
+	const format = 'DD/MM/YYYY'
+	const mockParseDate = vi.fn()
+	const mockFormatDate = vi.fn()
+
+	beforeEach(() => {
+		// Réinitialiser les mocks avant chaque test
+		mockParseDate.mockReset()
+		mockFormatDate.mockReset()
+
+		// Configuration par défaut des mocks
+		mockParseDate.mockImplementation((dateStr) => {
+			if (dateStr === '01/01/2023') return new Date(2023, 0, 1)
+			if (dateStr === '10/01/2023') return new Date(2023, 0, 10)
+			if (dateStr === '01') return null // Date incomplète
+			if (dateStr === '01/01') return null // Date incomplète
+			return null
+		})
+
+		mockFormatDate.mockImplementation((date) => {
+			if (date.getTime() === new Date(2023, 0, 1).getTime()) return '01/01/2023'
+			if (date.getTime() === new Date(2023, 0, 10).getTime()) return '10/01/2023'
+			return ''
+		})
+	})
+
+	describe('hasRangeSeparator', () => {
+		it('devrait retourner true si la valeur contient le séparateur de plage', () => {
+			const { hasRangeSeparator } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			expect(hasRangeSeparator('01/01/2023 - 10/01/2023')).toBe(true)
+		})
+
+		it('devrait retourner false si la valeur ne contient pas le séparateur de plage', () => {
+			const { hasRangeSeparator } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			expect(hasRangeSeparator('01/01/2023')).toBe(false)
+		})
+	})
+
+	describe('extractRangeParts', () => {
+		it('devrait extraire correctement les deux parties d\'une plage de dates', () => {
+			const { extractRangeParts } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const [startStr, endStr] = extractRangeParts('01/01/2023 - 10/01/2023')
+
+			expect(startStr).toBe('01/01/2023')
+			expect(endStr).toBe('10/01/2023')
+		})
+
+		it('devrait retourner une chaîne vide pour la deuxième partie si elle n\'existe pas', () => {
+			const { extractRangeParts } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const [startStr, endStr] = extractRangeParts('01/01/2023 - ')
+
+			expect(startStr).toBe('01/01/2023')
+			expect(endStr).toBe('')
+		})
+	})
+
+	describe('formatRangeForDisplay', () => {
+		it('devrait retourner une chaîne vide si la date de début est null', () => {
+			const { formatRangeForDisplay } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const result = formatRangeForDisplay(null, new Date(2023, 0, 10))
+
+			expect(result).toBe('')
+		})
+
+		it('devrait retourner la date de début suivie du séparateur de plage si la date de fin est null', () => {
+			const { formatRangeForDisplay } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const startDate = new Date(2023, 0, 1)
+			const result = formatRangeForDisplay(startDate, null)
+
+			// Maintenant, nous attendons que le séparateur de plage soit inclus
+			expect(result).toBe('01/01/2023 - ')
+			expect(mockFormatDate).toHaveBeenCalledWith(startDate, format)
+		})
+
+		it('devrait formater correctement une plage de dates complète', () => {
+			const { formatRangeForDisplay } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const startDate = new Date(2023, 0, 1)
+			const endDate = new Date(2023, 0, 10)
+			const result = formatRangeForDisplay(startDate, endDate)
+
+			expect(result).toBe('01/01/2023 - 10/01/2023')
+			expect(mockFormatDate).toHaveBeenCalledWith(startDate, format)
+			expect(mockFormatDate).toHaveBeenCalledWith(endDate, format)
+		})
+	})
+
+	describe('parseRangeInput', () => {
+		it('devrait retourner [null, null] si la valeur est vide', () => {
+			const { parseRangeInput } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const [startDate, endDate] = parseRangeInput('')
+
+			expect(startDate).toBeNull()
+			expect(endDate).toBeNull()
+		})
+
+		it('devrait parser correctement une plage de dates complète', () => {
+			const { parseRangeInput } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const [startDate, endDate] = parseRangeInput('01/01/2023 - 10/01/2023')
+
+			expect(startDate).toEqual(new Date(2023, 0, 1))
+			expect(endDate).toEqual(new Date(2023, 0, 10))
+			expect(mockParseDate).toHaveBeenCalledWith('01/01/2023', format)
+			expect(mockParseDate).toHaveBeenCalledWith('10/01/2023', format)
+		})
+
+		it('devrait parser correctement une date unique sans séparateur', () => {
+			const { parseRangeInput } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const [startDate, endDate] = parseRangeInput('01/01/2023')
+
+			expect(startDate).toEqual(new Date(2023, 0, 1))
+			expect(endDate).toBeNull()
+			expect(mockParseDate).toHaveBeenCalledWith('01/01/2023', format)
+		})
+	})
+
+	describe('handleRangeInput', () => {
+		it('devrait traiter une date unique en mode non-plage', () => {
+			const { handleRangeInput } = useDateRangeInput(format, false, mockParseDate, mockFormatDate)
+
+			const result = handleRangeInput('', '01/01/2023')
+
+			expect(result.formattedValue).toBe('01/01/2023')
+			expect(result.dates[0]).toEqual(new Date(2023, 0, 1))
+			expect(result.dates[1]).toBeNull()
+			expect(result.isComplete).toBe(true)
+		})
+
+		it('devrait ajouter automatiquement le séparateur quand la première date est complète', () => {
+			const { handleRangeInput } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const result = handleRangeInput('', '01/01/2023')
+
+			expect(result.formattedValue).toBe('01/01/2023 - ')
+			expect(result.dates[0]).toEqual(new Date(2023, 0, 1))
+			expect(result.dates[1]).toBeNull()
+			expect(result.isComplete).toBe(false)
+			expect(result.justCompletedFirstDate).toBe(true)
+			expect(result.cursorPosition).toBe('01/01/2023 - '.length)
+		})
+
+		it('devrait détecter le début de la saisie de la seconde date', () => {
+			const { handleRangeInput } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const result = handleRangeInput('01/01/2023 - ', '01/01/2023 - 1')
+
+			expect(result.formattedValue).toBe('01/01/2023 - 1')
+			expect(result.dates[0]).toEqual(new Date(2023, 0, 1))
+			expect(result.dates[1]).toBeNull() // Car '1' n'est pas une date valide
+			expect(result.isComplete).toBe(false)
+			expect(result.cursorPosition).toBe('01/01/2023 - 1'.length)
+		})
+
+		it('devrait gérer correctement une plage de dates complète', () => {
+			const { handleRangeInput } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const result = handleRangeInput('01/01/2023 - 1', '01/01/2023 - 10/01/2023')
+
+			expect(result.formattedValue).toBe('01/01/2023 - 10/01/2023')
+			expect(result.dates[0]).toEqual(new Date(2023, 0, 1))
+			expect(result.dates[1]).toEqual(new Date(2023, 0, 10))
+			expect(result.isComplete).toBe(true)
+		})
+	})
+
+	describe('initializeWithDates', () => {
+		it('devrait initialiser correctement l\'état avec des dates existantes', () => {
+			const { initializeWithDates, firstDate, secondDate, isEditingSecondDate } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const startDate = new Date(2023, 0, 1)
+			const endDate = new Date(2023, 0, 10)
+
+			initializeWithDates(startDate, endDate)
+
+			expect(firstDate.value).toBe(startDate)
+			expect(secondDate.value).toBe(endDate)
+			expect(isEditingSecondDate.value).toBe(true)
+		})
+
+		it('devrait initialiser isEditingSecondDate à false si une des dates est null', () => {
+			const { initializeWithDates, firstDate, secondDate, isEditingSecondDate } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const startDate = new Date(2023, 0, 1)
+
+			initializeWithDates(startDate, null)
+
+			expect(firstDate.value).toBe(startDate)
+			expect(secondDate.value).toBeNull()
+			expect(isEditingSecondDate.value).toBe(false)
+		})
+	})
+
+	describe('resetState', () => {
+		it('devrait réinitialiser l\'état', () => {
+			const { initializeWithDates, resetState, firstDate, secondDate, isEditingSecondDate } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			// Initialiser d'abord avec des valeurs
+			initializeWithDates(new Date(2023, 0, 1), new Date(2023, 0, 10))
+
+			// Puis réinitialiser
+			resetState()
+
+			expect(firstDate.value).toBeNull()
+			expect(secondDate.value).toBeNull()
+			expect(isEditingSecondDate.value).toBe(false)
+		})
+	})
+
+	describe('isValidRange', () => {
+		it('devrait retourner true si la date de début est antérieure à la date de fin', () => {
+			const { isValidRange } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const startDate = new Date(2023, 0, 1)
+			const endDate = new Date(2023, 0, 10)
+
+			expect(isValidRange(startDate, endDate)).toBe(true)
+		})
+
+		it('devrait retourner true si les dates sont identiques', () => {
+			const { isValidRange } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const date = new Date(2023, 0, 1)
+
+			expect(isValidRange(date, date)).toBe(true)
+		})
+
+		it('devrait retourner false si la date de début est postérieure à la date de fin', () => {
+			const { isValidRange } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const startDate = new Date(2023, 0, 10)
+			const endDate = new Date(2023, 0, 1)
+
+			expect(isValidRange(startDate, endDate)).toBe(false)
+		})
+
+		it('devrait retourner true si une des dates est null', () => {
+			const { isValidRange } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			const date = new Date(2023, 0, 1)
+
+			expect(isValidRange(date, null)).toBe(true)
+			expect(isValidRange(null, date)).toBe(true)
+			expect(isValidRange(null, null)).toBe(true)
+		})
+	})
+
+	describe('currentRangeIsValid', () => {
+		it('devrait retourner true si la plage est valide', () => {
+			const { initializeWithDates, currentRangeIsValid } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			initializeWithDates(new Date(2023, 0, 1), new Date(2023, 0, 10))
+
+			expect(currentRangeIsValid.value).toBe(true)
+		})
+
+		it('devrait retourner false si la plage est invalide', () => {
+			const { initializeWithDates, currentRangeIsValid } = useDateRangeInput(format, true, mockParseDate, mockFormatDate)
+
+			initializeWithDates(new Date(2023, 0, 10), new Date(2023, 0, 1))
+
+			expect(currentRangeIsValid.value).toBe(false)
+		})
+	})
+})