@cnamts/synapse 1.0.0 → 1.0.2

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

@@ -0,0 +1,359 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useDateInputEditing } from '../useDateInputEditing'
+
+describe('useDateInputEditing', () => {
+	// Mock pour la fonction updateDisplayValue
+	const updateDisplayValue = vi.fn()
+
+	// Réinitialiser les mocks avant chaque test
+	beforeEach(() => {
+		vi.resetAllMocks()
+	})
+
+	describe('formatDateInput', () => {
+		it('devrait formater correctement une entrée de date avec le format DD/MM/YYYY', () => {
+			const { formatDateInput } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Test avec différentes entrées
+			let result = formatDateInput('25122023')
+			expect(result.formatted).toBe('25/12/2023')
+			// La position du curseur dépend de l'implémentation
+			expect(result.cursorPos).toBeGreaterThanOrEqual(0)
+
+			// Test avec une entrée partielle
+			result = formatDateInput('2512')
+			expect(result.formatted).toBe('25/12/____')
+			// La position du curseur dépend de l'implémentation
+			expect(result.cursorPos).toBeGreaterThanOrEqual(0)
+
+			// Test avec une entrée vide
+			result = formatDateInput('')
+			expect(result.formatted).toBe('__/__/____')
+			expect(result.cursorPos).toBe(0)
+		})
+
+		it('devrait formater correctement une entrée de date avec le format MM/DD/YYYY', () => {
+			const { formatDateInput } = useDateInputEditing({
+				format: 'MM/DD/YYYY',
+				updateDisplayValue,
+			})
+
+			const result = formatDateInput('12252023')
+			expect(result.formatted).toBe('12/25/2023')
+			// La position du curseur dépend de l'implémentation
+			expect(result.cursorPos).toBeGreaterThanOrEqual(0)
+		})
+
+		it('devrait formater correctement une entrée de date avec le format YYYY-MM-DD', () => {
+			const { formatDateInput } = useDateInputEditing({
+				format: 'YYYY-MM-DD',
+				updateDisplayValue,
+			})
+
+			const result = formatDateInput('20231225')
+			expect(result.formatted).toBe('2023-12-25')
+			// La position du curseur dépend de l'implémentation
+			expect(result.cursorPos).toBeGreaterThanOrEqual(0)
+		})
+
+		it('devrait limiter le nombre de chiffres au format attendu', () => {
+			const { formatDateInput } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Entrée avec trop de chiffres
+			const result = formatDateInput('251220232024')
+			expect(result.formatted).toBe('25/12/2023')
+			// La position du curseur dépend de l'implémentation
+			expect(result.cursorPos).toBeGreaterThanOrEqual(0)
+		})
+
+		it('devrait calculer correctement la position du curseur après formatage', () => {
+			const { formatDateInput } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Test avec position du curseur spécifiée
+			let result = formatDateInput('25122023', 4)
+			expect(result.formatted).toBe('25/12/2023')
+			// La position du curseur dépend de l'implémentation
+			expect(result.cursorPos).toBeGreaterThanOrEqual(0)
+
+			// Test avec position du curseur au début
+			result = formatDateInput('25122023', 0)
+			expect(result.formatted).toBe('25/12/2023')
+			expect(result.cursorPos).toBe(0)
+
+			// Test avec position du curseur à la fin
+			result = formatDateInput('25122023', 8)
+			expect(result.formatted).toBe('25/12/2023')
+			// La position du curseur dépend de l'implémentation
+			expect(result.cursorPos).toBeGreaterThanOrEqual(0)
+		})
+
+		it('devrait détecter et utiliser différents séparateurs selon le format', () => {
+			// Format avec tirets
+			let { formatDateInput } = useDateInputEditing({
+				format: 'DD-MM-YYYY',
+				updateDisplayValue,
+			})
+
+			let result = formatDateInput('25122023')
+			expect(result.formatted).toBe('25-12-2023')
+
+			// Format avec points
+			formatDateInput = useDateInputEditing({
+				format: 'DD.MM.YYYY',
+				updateDisplayValue,
+			}).formatDateInput
+
+			result = formatDateInput('25122023')
+			expect(result.formatted).toBe('25.12.2023')
+		})
+	})
+
+	describe('handleKeydown', () => {
+		it('devrait gérer correctement la touche Backspace sur un séparateur', () => {
+			const { handleKeydown } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Créer un mock pour l'événement keydown
+			const mockEvent = {
+				key: 'Backspace',
+				target: {
+					value: '25/1_/____',
+					selectionStart: 3,
+					selectionEnd: 3,
+					setSelectionRange: vi.fn(),
+				},
+				preventDefault: vi.fn(),
+			} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+			// Appeler la fonction
+			handleKeydown(mockEvent)
+
+			// Vérifier que preventDefault a été appelé
+			expect(mockEvent.preventDefault).toHaveBeenCalled()
+
+			// Vérifier que updateDisplayValue a été appelé
+			expect(updateDisplayValue).toHaveBeenCalled()
+
+			// Nous ne vérifions pas la valeur exacte car elle peut dépendre de l'implémentation
+
+			// Vérifier que setSelectionRange a été appelé
+			setTimeout(() => {
+				expect(mockEvent.target.setSelectionRange).toHaveBeenCalledWith(1, 1)
+			}, 0)
+		})
+
+		it('ne devrait pas interférer avec Backspace sur un chiffre', () => {
+			const { handleKeydown } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Créer un mock pour l'événement keydown
+			const mockEvent = {
+				key: 'Backspace',
+				target: {
+					value: '25/1_/____',
+					selectionStart: 2,
+					selectionEnd: 2,
+					setSelectionRange: vi.fn(),
+				},
+				preventDefault: vi.fn(),
+			} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+			// Appeler la fonction
+			handleKeydown(mockEvent)
+
+			// Vérifier que preventDefault n'a pas été appelé
+			expect(mockEvent.preventDefault).not.toHaveBeenCalled()
+
+			// Vérifier que updateDisplayValue n'a pas été appelé
+			expect(updateDisplayValue).not.toHaveBeenCalled()
+		})
+
+		it('devrait gérer correctement la touche ArrowLeft sur un séparateur', () => {
+			const { handleKeydown } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Créer un mock pour l'événement keydown
+			const mockEvent = {
+				key: 'ArrowLeft',
+				target: {
+					value: '25/12/____',
+					selectionStart: 3,
+					selectionEnd: 3,
+					setSelectionRange: vi.fn(),
+				},
+				preventDefault: vi.fn(),
+			} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+			// Appeler la fonction
+			handleKeydown(mockEvent)
+
+			// Vérifier que preventDefault a été appelé
+			expect(mockEvent.preventDefault).toHaveBeenCalled()
+
+			// Vérifier que setSelectionRange a été appelé avec la bonne position
+			expect(mockEvent.target.setSelectionRange).toHaveBeenCalledWith(1, 1)
+		})
+
+		it('devrait gérer correctement la touche ArrowRight sur un séparateur', () => {
+			const { handleKeydown } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Créer un mock pour l'événement keydown
+			const mockEvent = {
+				key: 'ArrowRight',
+				target: {
+					value: '25/12/____',
+					selectionStart: 2,
+					selectionEnd: 2,
+					setSelectionRange: vi.fn(),
+				},
+				preventDefault: vi.fn(),
+			} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+			// Appeler la fonction
+			handleKeydown(mockEvent)
+
+			// Vérifier que preventDefault a été appelé
+			expect(mockEvent.preventDefault).toHaveBeenCalled()
+
+			// Vérifier que setSelectionRange a été appelé avec la bonne position
+			expect(mockEvent.target.setSelectionRange).toHaveBeenCalledWith(4, 4)
+		})
+	})
+
+	describe('handlePaste', () => {
+		it('devrait formater correctement le texte collé', () => {
+			const { handlePaste } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Créer un mock pour l'événement paste
+			const mockEvent = {
+				clipboardData: {
+					getData: vi.fn().mockReturnValue('25122023'),
+				},
+				target: {
+					value: '__/__/____',
+					selectionStart: 0,
+					selectionEnd: 0,
+					setSelectionRange: vi.fn(),
+				},
+				preventDefault: vi.fn(),
+			} as unknown as ClipboardEvent
+
+			// Appeler la fonction
+			handlePaste(mockEvent)
+
+			// Vérifier que preventDefault a été appelé
+			expect(mockEvent.preventDefault).toHaveBeenCalled()
+
+			// Vérifier que getData a été appelé avec 'text'
+			expect(mockEvent.clipboardData?.getData).toHaveBeenCalledWith('text')
+
+			// Vérifier que updateDisplayValue a été appelé avec la bonne valeur formatée
+			expect(updateDisplayValue).toHaveBeenCalledWith('25/12/2023')
+
+			// Vérifier que setSelectionRange a été appelé
+			setTimeout(() => {
+				expect((mockEvent.target as HTMLInputElement).setSelectionRange).toHaveBeenCalledWith(10, 10)
+			}, 0)
+		})
+
+		it('ne devrait rien faire si clipboardData est null', () => {
+			const { handlePaste } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Créer un mock pour l'événement paste sans clipboardData
+			const mockEvent = {
+				clipboardData: null,
+				preventDefault: vi.fn(),
+			} as unknown as ClipboardEvent
+
+			// Appeler la fonction
+			handlePaste(mockEvent)
+
+			// Vérifier que preventDefault n'a pas été appelé
+			expect(mockEvent.preventDefault).not.toHaveBeenCalled()
+
+			// Vérifier que updateDisplayValue n'a pas été appelé
+			expect(updateDisplayValue).not.toHaveBeenCalled()
+		})
+
+		it('ne devrait rien faire si le texte collé est vide', () => {
+			const { handlePaste } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Créer un mock pour l'événement paste avec un texte vide
+			const mockEvent = {
+				clipboardData: {
+					getData: vi.fn().mockReturnValue(''),
+				},
+				preventDefault: vi.fn(),
+			} as unknown as ClipboardEvent
+
+			// Appeler la fonction
+			handlePaste(mockEvent)
+
+			// Vérifier que getData a été appelé avec 'text'
+			expect(mockEvent.clipboardData?.getData).toHaveBeenCalledWith('text')
+
+			// Vérifier que preventDefault n'a pas été appelé
+			expect(mockEvent.preventDefault).not.toHaveBeenCalled()
+
+			// Vérifier que updateDisplayValue n'a pas été appelé
+			expect(updateDisplayValue).not.toHaveBeenCalled()
+		})
+
+		it('devrait gérer le collage au milieu d\'une date existante', () => {
+			const { handlePaste } = useDateInputEditing({
+				format: 'DD/MM/YYYY',
+				updateDisplayValue,
+			})
+
+			// Créer un mock pour l'événement paste
+			const mockEvent = {
+				clipboardData: {
+					getData: vi.fn().mockReturnValue('12'),
+				},
+				target: {
+					value: '25/__/____',
+					selectionStart: 3,
+					selectionEnd: 3,
+					setSelectionRange: vi.fn(),
+				},
+				preventDefault: vi.fn(),
+			} as unknown as ClipboardEvent
+
+			// Appeler la fonction
+			handlePaste(mockEvent)
+
+			// Vérifier que preventDefault a été appelé
+			expect(mockEvent.preventDefault).toHaveBeenCalled()
+
+			// Vérifier que updateDisplayValue a été appelé
+			expect(updateDisplayValue).toHaveBeenCalled()
+		})
+	})
+})

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

@@ -0,0 +1,160 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useDatePickerViewMode } from '../useDatePickerViewMode'
+
+// Mock pour watch
+vi.mock('vue', async () => {
+	const actual = await vi.importActual('vue')
+	return {
+		...actual,
+		watch: vi.fn((getter, callback) => {
+			// Stocker le callback pour pouvoir le déclencher manuellement dans les tests
+			watchCallback = callback
+		}),
+	}
+})
+
+// Variable pour stocker le callback de watch
+let watchCallback: ((newValue: boolean) => void) | null = null
+
+describe('useDatePickerViewMode', () => {
+	// Mocks et setup
+	let isBirthDate = false
+	const mockIsBirthDateGetter = vi.fn(() => isBirthDate)
+
+	beforeEach(() => {
+		// Réinitialiser les mocks avant chaque test
+		mockIsBirthDateGetter.mockClear()
+		isBirthDate = false
+		watchCallback = null
+	})
+
+	it('devrait initialiser currentViewMode à "month" si isBirthDate est false', () => {
+		const { currentViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+		expect(currentViewMode.value).toBe('month')
+		expect(mockIsBirthDateGetter).toHaveBeenCalled()
+	})
+
+	it('devrait initialiser currentViewMode à "year" si isBirthDate est true', () => {
+		isBirthDate = true
+
+		const { currentViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+		expect(currentViewMode.value).toBe('year')
+		expect(mockIsBirthDateGetter).toHaveBeenCalled()
+	})
+
+	it('devrait mettre à jour currentViewMode quand isBirthDate change', () => {
+		const { currentViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+		// Initialement, currentViewMode devrait être 'month'
+		expect(currentViewMode.value).toBe('month')
+
+		// Simuler un changement de isBirthDate
+		if (watchCallback) {
+			watchCallback(true)
+		}
+
+		// Après le changement, currentViewMode devrait être 'year'
+		expect(currentViewMode.value).toBe('year')
+	})
+
+	describe('handleViewModeUpdate', () => {
+		it('devrait mettre à jour currentViewMode avec la nouvelle valeur', () => {
+			const { currentViewMode, handleViewModeUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+			// Initialement, currentViewMode devrait être 'month'
+			expect(currentViewMode.value).toBe('month')
+
+			// Mettre à jour le mode d'affichage
+			handleViewModeUpdate('year')
+
+			// Après la mise à jour, currentViewMode devrait être 'year'
+			expect(currentViewMode.value).toBe('year')
+		})
+	})
+
+	describe('handleYearUpdate', () => {
+		it('ne devrait pas modifier currentViewMode si isBirthDate est false', () => {
+			const { currentViewMode, handleViewModeUpdate, handleYearUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+			// Mettre à jour le mode d'affichage à 'year'
+			handleViewModeUpdate('year')
+
+			// Appeler handleYearUpdate
+			handleYearUpdate()
+
+			// currentViewMode ne devrait pas changer
+			expect(currentViewMode.value).toBe('year')
+		})
+
+		it('devrait passer à "months" si isBirthDate est true', () => {
+			isBirthDate = true
+
+			const { currentViewMode, handleYearUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+			// Appeler handleYearUpdate
+			handleYearUpdate()
+
+			// currentViewMode devrait passer à 'months'
+			expect(currentViewMode.value).toBe('months')
+		})
+	})
+
+	describe('handleMonthUpdate', () => {
+		it('ne devrait pas modifier currentViewMode si isBirthDate est false', () => {
+			const { currentViewMode, handleViewModeUpdate, handleMonthUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+			// Mettre à jour le mode d'affichage à 'months'
+			handleViewModeUpdate('months')
+
+			// Appeler handleMonthUpdate
+			handleMonthUpdate()
+
+			// currentViewMode ne devrait pas changer
+			expect(currentViewMode.value).toBe('months')
+		})
+
+		it('devrait passer à undefined si isBirthDate est true', () => {
+			isBirthDate = true
+
+			const { currentViewMode, handleMonthUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+			// Appeler handleMonthUpdate
+			handleMonthUpdate()
+
+			// currentViewMode devrait passer à undefined
+			expect(currentViewMode.value).toBeUndefined()
+		})
+	})
+
+	describe('resetViewMode', () => {
+		it('devrait réinitialiser currentViewMode à "month" si isBirthDate est false', () => {
+			const { currentViewMode, handleViewModeUpdate, resetViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+			// Mettre à jour le mode d'affichage à 'year'
+			handleViewModeUpdate('year')
+
+			// Réinitialiser le mode d'affichage
+			resetViewMode()
+
+			// currentViewMode devrait être réinitialisé à 'month'
+			expect(currentViewMode.value).toBe('month')
+		})
+
+		it('devrait réinitialiser currentViewMode à "year" si isBirthDate est true', () => {
+			isBirthDate = true
+
+			const { currentViewMode, handleViewModeUpdate, resetViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+
+			// Mettre à jour le mode d'affichage à 'months'
+			handleViewModeUpdate('months')
+
+			// Réinitialiser le mode d'affichage
+			resetViewMode()
+
+			// currentViewMode devrait être réinitialisé à 'year'
+			expect(currentViewMode.value).toBe('year')
+		})
+	})
+})