@cnamts/synapse 1.0.11 → 1.0.13

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

@@ -6,155 +6,190 @@ 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
-		}),
+		watch: vi.fn(),
 	}
 })
 
-// Variable pour stocker le callback de watch
-let watchCallback: ((newValue: boolean) => void) | null = null
-
 describe('useDatePickerViewMode', () => {
 	// Mocks et setup
 	let isBirthDate = false
+	let selectedDate: Date | (Date | null)[] | null = null
 	const mockIsBirthDateGetter = vi.fn(() => isBirthDate)
+	const mockSelectedDateGetter = vi.fn(() => selectedDate)
 
 	beforeEach(() => {
 		// Réinitialiser les mocks avant chaque test
 		mockIsBirthDateGetter.mockClear()
+		mockSelectedDateGetter.mockClear()
 		isBirthDate = false
-		watchCallback = null
+		selectedDate = null
 	})
 
 	it('devrait initialiser currentViewMode à "month" si isBirthDate est false', () => {
-		const { currentViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+		const { currentViewMode } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
 		expect(currentViewMode.value).toBe('month')
 		expect(mockIsBirthDateGetter).toHaveBeenCalled()
+		// Note: mockSelectedDateGetter n'est pas appelé car isBirthDateGetter() retourne false
+		// et l'évaluation court-circuite (false && !selectedDateGetter() n'évalue pas selectedDateGetter())
+		expect(mockSelectedDateGetter).not.toHaveBeenCalled()
 	})
 
-	it('devrait initialiser currentViewMode à "year" si isBirthDate est true', () => {
+	it('devrait initialiser currentViewMode à "year" si isBirthDate est true et aucune date sélectionnée', () => {
 		isBirthDate = true
 
-		const { currentViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+		const { currentViewMode } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
 		expect(currentViewMode.value).toBe('year')
 		expect(mockIsBirthDateGetter).toHaveBeenCalled()
+		expect(mockSelectedDateGetter).toHaveBeenCalled()
 	})
 
-	it('devrait mettre à jour currentViewMode quand isBirthDate change', () => {
-		const { currentViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+	it('devrait initialiser currentViewMode à "month" si isBirthDate est true et une date est sélectionnée', () => {
+		isBirthDate = true
+		selectedDate = new Date('2024-01-15')
+
+		const { currentViewMode } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
-		// Initialement, currentViewMode devrait être 'month'
 		expect(currentViewMode.value).toBe('month')
+		expect(mockIsBirthDateGetter).toHaveBeenCalled()
+		expect(mockSelectedDateGetter).toHaveBeenCalled()
+	})
 
-		// Simuler un changement de isBirthDate
-		if (watchCallback) {
-			watchCallback(true)
-		}
+	describe('resetViewMode', () => {
+		it('devrait réinitialiser currentViewMode à "month" si isBirthDate est false', () => {
+			const { currentViewMode, handleViewModeUpdate, resetViewMode } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
-		// Après le changement, currentViewMode devrait être 'year'
-		expect(currentViewMode.value).toBe('year')
-	})
+			// Mettre à jour le mode d'affichage à 'year'
+			handleViewModeUpdate('year')
 
-	describe('handleViewModeUpdate', () => {
-		it('devrait mettre à jour currentViewMode avec la nouvelle valeur', () => {
-			const { currentViewMode, handleViewModeUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+			// Réinitialiser le mode d'affichage
+			resetViewMode()
 
-			// Initialement, currentViewMode devrait être 'month'
+			// currentViewMode devrait être réinitialisé à 'month'
 			expect(currentViewMode.value).toBe('month')
+		})
 
-			// Mettre à jour le mode d'affichage
-			handleViewModeUpdate('year')
+		it('devrait réinitialiser currentViewMode à "year" si isBirthDate est true et aucune date sélectionnée', () => {
+			isBirthDate = true
+
+			const { currentViewMode, handleViewModeUpdate, resetViewMode } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
+
+			// Mettre à jour le mode d'affichage à 'months'
+			handleViewModeUpdate('months')
 
-			// Après la mise à jour, currentViewMode devrait être 'year'
+			// Réinitialiser le mode d'affichage
+			resetViewMode()
+
+			// currentViewMode devrait être réinitialisé à 'year'
 			expect(currentViewMode.value).toBe('year')
 		})
-	})
 
-	describe('handleYearUpdate', () => {
-		it('ne devrait pas modifier currentViewMode si isBirthDate est false', () => {
-			const { currentViewMode, handleViewModeUpdate, handleYearUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+		it('devrait réinitialiser currentViewMode à "month" si isBirthDate est true et une date est sélectionnée', () => {
+			isBirthDate = true
+			selectedDate = new Date('2024-01-15')
+
+			const { currentViewMode, handleViewModeUpdate, resetViewMode } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
 			// Mettre à jour le mode d'affichage à 'year'
 			handleViewModeUpdate('year')
 
-			// Appeler handleYearUpdate
-			handleYearUpdate()
+			// Réinitialiser le mode d'affichage
+			resetViewMode()
 
-			// currentViewMode ne devrait pas changer
-			expect(currentViewMode.value).toBe('year')
+			// currentViewMode devrait être réinitialisé à 'month' (car une date est sélectionnée)
+			expect(currentViewMode.value).toBe('month')
 		})
+	})
 
-		it('devrait passer à "months" si isBirthDate est true', () => {
+	describe('Navigation Regression Tests', () => {
+		it('should handle year update correctly in birth date mode', () => {
 			isBirthDate = true
 
-			const { currentViewMode, handleYearUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+			const { currentViewMode, handleYearUpdate } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
-			// Appeler handleYearUpdate
+			// Initialement en mode year
+			expect(currentViewMode.value).toBe('year')
+
+			// Simuler la sélection d'une année
 			handleYearUpdate()
 
-			// currentViewMode devrait passer à 'months'
+			// Devrait passer en mode months
 			expect(currentViewMode.value).toBe('months')
 		})
-	})
 
-	describe('handleMonthUpdate', () => {
-		it('ne devrait pas modifier currentViewMode si isBirthDate est false', () => {
-			const { currentViewMode, handleViewModeUpdate, handleMonthUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+		it('should handle month update correctly in birth date mode', () => {
+			isBirthDate = true
 
-			// Mettre à jour le mode d'affichage à 'months'
-			handleViewModeUpdate('months')
+			const { currentViewMode, handleYearUpdate, handleMonthUpdate } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
-			// Appeler handleMonthUpdate
+			// Passer en mode months (après sélection année)
+			handleYearUpdate()
+			expect(currentViewMode.value).toBe('months')
+
+			// Simuler la sélection d'un mois
 			handleMonthUpdate()
 
-			// currentViewMode ne devrait pas changer
-			expect(currentViewMode.value).toBe('months')
+			// Devrait passer en mode month (calendrier)
+			expect(currentViewMode.value).toBe('month')
 		})
 
-		it('devrait passer à undefined si isBirthDate est true', () => {
-			isBirthDate = true
+		it('should not update view mode in non-birth date mode', () => {
+			isBirthDate = false
 
-			const { currentViewMode, handleMonthUpdate } = useDatePickerViewMode(mockIsBirthDateGetter)
+			const { currentViewMode, handleYearUpdate, handleMonthUpdate } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
-			// Appeler handleMonthUpdate
-			handleMonthUpdate()
+			// Initialement en mode month
+			expect(currentViewMode.value).toBe('month')
 
-			// currentViewMode devrait passer à undefined
-			expect(currentViewMode.value).toBeUndefined()
+			// Les handlers ne devraient pas changer le mode en mode normal
+			handleYearUpdate()
+			expect(currentViewMode.value).toBe('month')
+
+			handleMonthUpdate()
+			expect(currentViewMode.value).toBe('month')
 		})
-	})
 
-	describe('resetViewMode', () => {
-		it('devrait réinitialiser currentViewMode à "month" si isBirthDate est false', () => {
-			const { currentViewMode, handleViewModeUpdate, resetViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+		it('should handle complete navigation cycle correctly', () => {
+			isBirthDate = true
 
-			// Mettre à jour le mode d'affichage à 'year'
-			handleViewModeUpdate('year')
+			const { currentViewMode, handleYearUpdate, handleMonthUpdate, resetViewMode } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
-			// Réinitialiser le mode d'affichage
+			// Cycle complet : year → months → month → reset → year
+			expect(currentViewMode.value).toBe('year')
+
+			handleYearUpdate()
+			expect(currentViewMode.value).toBe('months')
+
+			handleMonthUpdate()
+			expect(currentViewMode.value).toBe('month')
+
+			// Simuler fermeture/réouverture
 			resetViewMode()
+			expect(currentViewMode.value).toBe('year')
 
-			// currentViewMode devrait être réinitialisé à 'month'
+			// Vérifier que la navigation fonctionne encore
+			handleYearUpdate()
+			expect(currentViewMode.value).toBe('months')
+
+			handleMonthUpdate()
 			expect(currentViewMode.value).toBe('month')
 		})
 
-		it('devrait réinitialiser currentViewMode à "year" si isBirthDate est true', () => {
+		it('should prevent VDatePicker from overriding months mode', () => {
 			isBirthDate = true
 
-			const { currentViewMode, handleViewModeUpdate, resetViewMode } = useDatePickerViewMode(mockIsBirthDateGetter)
+			const { currentViewMode, handleYearUpdate, handleViewModeUpdate } = useDatePickerViewMode(mockIsBirthDateGetter, mockSelectedDateGetter)
 
-			// Mettre à jour le mode d'affichage à 'months'
-			handleViewModeUpdate('months')
+			// Passer en mode months
+			handleYearUpdate()
+			expect(currentViewMode.value).toBe('months')
 
-			// Réinitialiser le mode d'affichage
-			resetViewMode()
+			// VDatePicker essaie de forcer le mode 'month'
+			handleViewModeUpdate('month')
 
-			// currentViewMode devrait être réinitialisé à 'year'
-			expect(currentViewMode.value).toBe('year')
+			// Le mode devrait rester 'months' (protection contre VDatePicker)
+			expect(currentViewMode.value).toBe('months')
 		})
 	})
 })

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

@@ -38,10 +38,10 @@ describe('useMonthButtonCustomization', () => {
 		await nextTick()
 
 		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
-		expect(monthBtn.textContent).toContain('Janv.')
+		expect(monthBtn.textContent).toContain('janv.')
 	})
 
-	it('personnalise correctement les noms de mois (février -> Févr.)', async () => {
+	it('personnalise correctement les noms de mois (février -> févr.)', async () => {
 		monthName.value = 'février'
 		const { customizeMonthButton } = useMonthButtonCustomization(
 			isPickerVisibleGetter,
@@ -52,7 +52,7 @@ describe('useMonthButtonCustomization', () => {
 		await nextTick()
 
 		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
-		expect(monthBtn.textContent).toContain('Févr.')
+		expect(monthBtn.textContent).toContain('févr.')
 	})
 
 	it('capitalise le premier caractère si le mois n\'est pas reconnu', async () => {
@@ -66,7 +66,7 @@ describe('useMonthButtonCustomization', () => {
 		await nextTick()
 
 		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
-		expect(monthBtn.textContent).toContain('Pluviose')
+		expect(monthBtn.textContent).toContain('pluviose')
 	})
 
 	it('customise les boutons du mois et de l’année', async () => {
@@ -86,7 +86,7 @@ describe('useMonthButtonCustomization', () => {
 		const yearBtn = document.querySelector('.v-date-picker-controls__mode-btn')!
 
 		expect(monthBtn.innerHTML).toContain('<svg') // icône ajoutée
-		expect(monthBtn.textContent).toContain('Janv.') // mois transformé
+		expect(monthBtn.textContent).toContain('janv.') // mois transformé
 		expect(monthButtonText.value).toBe('janvier 2023')
 
 		expect(yearBtn.innerHTML).toContain('2023')
@@ -109,7 +109,7 @@ describe('useMonthButtonCustomization', () => {
 		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
 		const yearBtn = document.querySelector('.v-date-picker-controls__mode-btn')!
 
-		expect(monthBtn.textContent).toContain('Mars')
+		expect(monthBtn.textContent).toContain('mars')
 		expect(yearBtn.textContent).toContain('2030')
 	})
 

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

@@ -15,25 +15,61 @@ export interface ViewModeReturn {
  * Utilisé pour contrôler le comportement du CalendarMode, notamment pour les dates de naissance
  *
  * @param isBirthDateGetter - Une fonction qui retourne la valeur actuelle de isBirthDate
+ * @param selectedDateGetter - Une fonction qui retourne l'état de la date sélectionnée (null si aucune date)
  */
-export function useDatePickerViewMode(isBirthDateGetter: () => boolean): ViewModeReturn {
+export function useDatePickerViewMode(
+	isBirthDateGetter: () => boolean,
+	selectedDateGetter: () => Date | (Date | null)[] | null,
+): ViewModeReturn {
 	// Variable pour suivre le mode d'affichage actuel du CalendarMode
-	const currentViewMode = ref<ViewMode>(isBirthDateGetter() ? 'year' : 'month')
+	const currentViewMode = ref<ViewMode>(
+		isBirthDateGetter() && !selectedDateGetter() ? 'year' : 'month',
+	)
 
 	// Mettre à jour le mode d'affichage quand isBirthDate change
 	watch(isBirthDateGetter, (newValue) => {
-		currentViewMode.value = newValue ? 'year' : 'month'
+		if (newValue && !selectedDateGetter()) {
+			// Mode birthDate et aucune date sélectionnée : commencer par year
+			currentViewMode.value = 'year'
+		}
+		else if (newValue && selectedDateGetter()) {
+			// Mode birthDate avec date sélectionnée : commencer par month
+			currentViewMode.value = 'month'
+		}
+		else {
+			// Mode normal
+			currentViewMode.value = 'month'
+		}
+	})
+
+	// Mettre à jour le mode d'affichage quand la date sélectionnée change
+	watch(selectedDateGetter, (newValue) => {
+		if (isBirthDateGetter()) {
+			if (!newValue) {
+				// Aucune date sélectionnée en mode birthDate : commencer par year
+				currentViewMode.value = 'year'
+			}
+			else {
+				// Date sélectionnée en mode birthDate : commencer par month
+				currentViewMode.value = 'month'
+			}
+		}
 	})
 
 	// Fonction pour gérer le changement de mode d'affichage
 	const handleViewModeUpdate = (newMode: ViewMode) => {
+		// En mode birthDate, ne pas laisser VDatePicker écraser le mode 'months'
+		if (isBirthDateGetter() && currentViewMode.value === 'months' && newMode === 'month') {
+			return
+		}
+
 		currentViewMode.value = newMode
 	}
 
 	// Fonction pour gérer la sélection de l'année quand isBirthDate est true
 	const handleYearUpdate = () => {
 		if (isBirthDateGetter()) {
-			// Après la sélection de l'année, passer automatiquement à la sélection du mois
+			// Après la sélection de l'année, passer au mode months pour la sélection du mois
 			currentViewMode.value = 'months'
 		}
 	}
@@ -41,14 +77,28 @@ export function useDatePickerViewMode(isBirthDateGetter: () => boolean): ViewMod
 	// Fonction pour gérer la sélection du mois quand isBirthDate est true
 	const handleMonthUpdate = () => {
 		if (isBirthDateGetter()) {
-			// Après la sélection du mois, passer automatiquement à la sélection du jour
-			currentViewMode.value = undefined
+			// Après la sélection du mois, passer automatiquement à la vue calendrier mensuel
+			currentViewMode.value = 'month'
 		}
 	}
 
 	// Fonction pour réinitialiser le mode d'affichage (utile lors de la fermeture du CalendarMode)
 	const resetViewMode = () => {
-		currentViewMode.value = isBirthDateGetter() ? 'year' : 'month'
+		if (isBirthDateGetter()) {
+			// En mode birthDate, la logique dépend de l'état de la date sélectionnée
+			if (!selectedDateGetter()) {
+				// Aucune date sélectionnée : commencer par year
+				currentViewMode.value = 'year'
+			}
+			else {
+				// Date sélectionnée : commencer par month (calendrier) pour permettre la modification
+				currentViewMode.value = 'month'
+			}
+		}
+		else {
+			// Mode normal
+			currentViewMode.value = 'month'
+		}
 	}
 
 	return {

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

@@ -28,43 +28,43 @@ export function useMonthButtonCustomization(
 		switch (lowerMonth) {
 			case 'january':
 			case 'janvier':
-				return 'Janv.'
+				return 'janv.'
 			case 'february':
 			case 'février':
-				return 'Févr.'
+				return 'févr.'
 			case 'march':
 			case 'mars':
-				return 'Mars'
+				return 'mars'
 			case 'april':
 			case 'avril':
-				return 'Avr.'
+				return 'avr.'
 			case 'may':
 			case 'mai':
-				return 'Mai'
+				return 'mai'
 			case 'june':
 			case 'juin':
-				return 'Juin'
+				return 'juin'
 			case 'july':
 			case 'juillet':
-				return 'Juil.'
+				return 'juil.'
 			case 'august':
 			case 'août':
-				return 'Août'
+				return 'août'
 			case 'september':
 			case 'septembre':
-				return 'Sept.'
+				return 'sept.'
 			case 'october':
 			case 'octobre':
-				return 'Oct.'
+				return 'oct.'
 			case 'november':
 			case 'novembre':
-				return 'Nov.'
+				return 'nov.'
 			case 'december':
 			case 'décembre':
-				return 'Déc.'
+				return 'déc.'
 			default:
 				// Si le mois n'est pas reconnu, retourner le mois avec la première lettre en majuscule
-				return monthName.charAt(0).toUpperCase() + monthName.slice(1)
+				return monthName
 		}
 	}
 
@@ -99,7 +99,7 @@ export function useMonthButtonCustomization(
 								<span class="v-btn__overlay"></span>
 								<span class="v-btn__underlay"></span>
 								<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-									<span style="color: var(--v-theme-primary);">${monthText.charAt(0).toUpperCase() + monthText.slice(1)}</span> 
+									<span style="color: var(--v-theme-primary);">${monthText}</span> 
 									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 								</div>
 							</button>

package/src/components/DatePicker/tests/navigation.regression.spec.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { vuetify } from '../../../../tests/unit/setup'
+import CalendarModeDatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+import ComplexDatePicker from '@/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue'
+
+/**
+ * Tests de régression légers pour la navigation année/mois dans les DatePickers
+ *
+ * Problème résolu : Handlers d'événements manquants et view mode non réinitialisé
+ */
+
+describe('DatePicker Navigation Regression Tests', () => {
+	const baseConfig = {
+		global: {
+			plugins: [vuetify],
+		},
+	}
+
+	describe('CalendarMode DatePicker', () => {
+		it('should have correct event handlers for year and month updates', async () => {
+			const wrapper = mount(CalendarModeDatePicker, {
+				...baseConfig,
+				props: {
+					modelValue: null,
+					label: 'Date Test',
+					isBirthDate: true, // Mode birthDate pour tester la navigation année/mois
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- any
+			const component = wrapper.vm as any
+			component.isDatePickerVisible = true
+			await nextTick()
+
+			// Vérifier que le VDatePicker est visible
+			const datePicker = wrapper.findComponent({ name: 'VDatePicker' })
+			expect(datePicker.exists()).toBe(true)
+
+			// Vérifier que les handlers d'événements sont correctement mappés
+			const datePickerProps = datePicker.props()
+			expect(datePickerProps).toBeDefined()
+
+			// Vérifier que le view mode est correctement initialisé
+			expect(datePickerProps.viewMode).toBe('year') // Mode birthDate commence par year
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('ComplexDatePicker', () => {
+		it('should have correct navigation handlers', async () => {
+			const wrapper = mount(ComplexDatePicker, {
+				...baseConfig,
+				props: {
+					modelValue: null,
+					label: 'Date Test',
+					isBirthDate: true,
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- any
+			const component = wrapper.vm as any
+
+			// Vérifier que les handlers existent
+			expect(typeof component.handleYearUpdate).toBe('function')
+			expect(typeof component.handleMonthUpdate).toBe('function')
+			expect(typeof component.resetViewMode).toBe('function')
+
+			wrapper.unmount()
+		})
+	})
+})