@cnamts/synapse 1.0.0 → 1.0.2

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

@@ -0,0 +1,233 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref } from 'vue'
+import { useManualDateValidation } from '../useManualDateValidation'
+
+describe('useManualDateValidation', () => {
+	// Mocks et setup
+	const mockClearValidation = vi.fn()
+	const mockValidateDateFormat = vi.fn()
+	const mockIsDateComplete = vi.fn()
+	const mockParseDate = vi.fn()
+	const mockValidateField = vi.fn()
+	const hasInteracted = ref(false)
+	const errors = ref<string[]>([])
+
+	beforeEach(() => {
+		// Réinitialiser les mocks et les refs avant chaque test
+		mockClearValidation.mockReset()
+		mockValidateDateFormat.mockReset()
+		mockIsDateComplete.mockReset()
+		mockParseDate.mockReset()
+		mockValidateField.mockReset()
+		hasInteracted.value = false
+		errors.value = []
+	})
+
+	it('devrait appeler clearValidation lors de la validation', () => {
+		const { validateManualInput } = useManualDateValidation({
+			format: 'DD/MM/YYYY',
+			hasInteracted,
+			errors,
+			clearValidation: mockClearValidation,
+			validateDateFormat: mockValidateDateFormat,
+			isDateComplete: mockIsDateComplete,
+			parseDate: mockParseDate,
+			validateField: mockValidateField,
+		})
+
+		validateManualInput('01/01/2023')
+
+		expect(mockClearValidation).toHaveBeenCalledTimes(1)
+	})
+
+	it('devrait retourner false et ajouter une erreur si le champ est requis, vide et l\'utilisateur a interagi', () => {
+		hasInteracted.value = true
+
+		const { validateManualInput } = useManualDateValidation({
+			format: 'DD/MM/YYYY',
+			required: true,
+			hasInteracted,
+			errors,
+			clearValidation: mockClearValidation,
+			validateDateFormat: mockValidateDateFormat,
+			isDateComplete: mockIsDateComplete,
+			parseDate: mockParseDate,
+			validateField: mockValidateField,
+		})
+
+		const result = validateManualInput('')
+
+		expect(result).toBe(false)
+		expect(errors.value).toContain('La date est requise.')
+	})
+
+	it('devrait retourner true si le champ est vide et non requis', () => {
+		const { validateManualInput } = useManualDateValidation({
+			format: 'DD/MM/YYYY',
+			required: false,
+			hasInteracted,
+			errors,
+			clearValidation: mockClearValidation,
+			validateDateFormat: mockValidateDateFormat,
+			isDateComplete: mockIsDateComplete,
+			parseDate: mockParseDate,
+			validateField: mockValidateField,
+		})
+
+		const result = validateManualInput('')
+
+		expect(result).toBe(true)
+		expect(errors.value).toHaveLength(0)
+	})
+
+	it('devrait retourner true si la saisie n\'est pas complète', () => {
+		mockIsDateComplete.mockReturnValue(false)
+
+		const { validateManualInput } = useManualDateValidation({
+			format: 'DD/MM/YYYY',
+			hasInteracted,
+			errors,
+			clearValidation: mockClearValidation,
+			validateDateFormat: mockValidateDateFormat,
+			isDateComplete: mockIsDateComplete,
+			parseDate: mockParseDate,
+			validateField: mockValidateField,
+		})
+
+		const result = validateManualInput('01/01')
+
+		expect(result).toBe(true)
+		expect(errors.value).toHaveLength(0)
+	})
+
+	it('devrait retourner false et ajouter une erreur si le format est invalide', () => {
+		mockIsDateComplete.mockReturnValue(true)
+		mockValidateDateFormat.mockReturnValue({ isValid: false, message: 'Format de date invalide (DD/MM/YYYY)' })
+
+		const { validateManualInput } = useManualDateValidation({
+			format: 'DD/MM/YYYY',
+			hasInteracted,
+			errors,
+			clearValidation: mockClearValidation,
+			validateDateFormat: mockValidateDateFormat,
+			isDateComplete: mockIsDateComplete,
+			parseDate: mockParseDate,
+			validateField: mockValidateField,
+		})
+
+		const result = validateManualInput('32/01/2023')
+
+		expect(result).toBe(false)
+		expect(errors.value).toContain('Format de date invalide (DD/MM/YYYY)')
+	})
+
+	it('ne devrait pas ajouter d\'erreur si disableErrorHandling=true', () => {
+		mockIsDateComplete.mockReturnValue(true)
+		mockValidateDateFormat.mockReturnValue({ isValid: false, message: 'Format de date invalide (DD/MM/YYYY)' })
+
+		const { validateManualInput } = useManualDateValidation({
+			format: 'DD/MM/YYYY',
+			disableErrorHandling: true,
+			hasInteracted,
+			errors,
+			clearValidation: mockClearValidation,
+			validateDateFormat: mockValidateDateFormat,
+			isDateComplete: mockIsDateComplete,
+			parseDate: mockParseDate,
+			validateField: mockValidateField,
+		})
+
+		validateManualInput('32/01/2023')
+
+		expect(errors.value).toHaveLength(0)
+	})
+
+	it('devrait retourner false et ajouter une erreur si la date ne peut pas être parsée', () => {
+		mockIsDateComplete.mockReturnValue(true)
+		mockValidateDateFormat.mockReturnValue({ isValid: true, message: '' })
+		mockParseDate.mockReturnValue(null)
+
+		const { validateManualInput } = useManualDateValidation({
+			format: 'DD/MM/YYYY',
+			hasInteracted,
+			errors,
+			clearValidation: mockClearValidation,
+			validateDateFormat: mockValidateDateFormat,
+			isDateComplete: mockIsDateComplete,
+			parseDate: mockParseDate,
+			validateField: mockValidateField,
+		})
+
+		const result = validateManualInput('01/01/2023')
+
+		expect(result).toBe(false)
+		expect(errors.value).toContain('Format de date invalide (DD/MM/YYYY)')
+	})
+
+	it('devrait appeler validateField avec les règles personnalisées', () => {
+		const date = new Date('2023-01-01')
+		const customRules = [{ type: 'custom', options: {} }]
+		const customWarningRules = [{ type: 'warning', options: {} }]
+
+		mockIsDateComplete.mockReturnValue(true)
+		mockValidateDateFormat.mockReturnValue({ isValid: true, message: '' })
+		mockParseDate.mockReturnValue(date)
+		mockValidateField.mockReturnValue({ valid: true })
+
+		const { validateManualInput } = useManualDateValidation({
+			format: 'DD/MM/YYYY',
+			customRules,
+			customWarningRules,
+			hasInteracted,
+			errors,
+			clearValidation: mockClearValidation,
+			validateDateFormat: mockValidateDateFormat,
+			isDateComplete: mockIsDateComplete,
+			parseDate: mockParseDate,
+			validateField: mockValidateField,
+		})
+
+		validateManualInput('01/01/2023')
+
+		expect(mockValidateField).toHaveBeenCalledWith(date, customRules, customWarningRules)
+	})
+
+	it('devrait retourner le résultat de validateField', () => {
+		mockIsDateComplete.mockReturnValue(true)
+		mockValidateDateFormat.mockReturnValue({ isValid: true, message: '' })
+		mockParseDate.mockReturnValue(new Date('2023-01-01'))
+
+		// Cas où validateField retourne un résultat sans erreur
+		mockValidateField.mockReturnValue({
+			hasError: false,
+			hasWarning: false,
+			hasSuccess: true,
+			state: { errors: [], warnings: [], successes: ['Valide'] },
+		})
+
+		const { validateManualInput } = useManualDateValidation({
+			format: 'DD/MM/YYYY',
+			hasInteracted,
+			errors,
+			clearValidation: mockClearValidation,
+			validateDateFormat: mockValidateDateFormat,
+			isDateComplete: mockIsDateComplete,
+			parseDate: mockParseDate,
+			validateField: mockValidateField,
+		})
+
+		let result = validateManualInput('01/01/2023')
+		expect(result).toBe(true)
+
+		// Cas où validateField retourne un résultat avec erreur
+		mockValidateField.mockReturnValue({
+			hasError: true,
+			hasWarning: false,
+			hasSuccess: false,
+			state: { errors: ['Erreur'], warnings: [], successes: [] },
+		})
+
+		result = validateManualInput('01/01/2023')
+		expect(result).toBe(false)
+	})
+})

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

@@ -0,0 +1,125 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { ref, nextTick, type Ref } from 'vue'
+import { useMonthButtonCustomization } from '../useMonthButtonCustomization'
+
+describe('useMonthButtonCustomization', () => {
+	let isPickerVisibleGetter: () => boolean
+	// Définir explicitement le type pour éviter les erreurs de compatibilité
+	let monthName: Ref<string | null>
+	let yearName: Ref<string | null>
+
+	beforeEach(() => {
+		// Réinitialiser les refs pour chaque test avec le type exact attendu par le composable
+		monthName = ref<string | null>(null)
+		yearName = ref<string | null>(null)
+
+		document.body.innerHTML = `
+			<div class="v-date-picker-controls">
+				<button class="v-date-picker-controls__month-btn">janvier 2023</button>
+				<button class="v-date-picker-controls__mode-btn">2023</button>
+			</div>
+		`
+		isPickerVisibleGetter = () => true
+	})
+
+	afterEach(() => {
+		document.body.innerHTML = ''
+	})
+
+	// Test de l'affichage des mois personnalisés via les noms de mois fournis
+	it('personnalise correctement les noms de mois (janvier -> Janv.)', async () => {
+		monthName.value = 'janvier'
+		const { customizeMonthButton } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+		)
+
+		await customizeMonthButton()
+		await nextTick()
+
+		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
+		expect(monthBtn.textContent).toContain('Janv.')
+	})
+
+	it('personnalise correctement les noms de mois (février -> Févr.)', async () => {
+		monthName.value = 'février'
+		const { customizeMonthButton } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+		)
+
+		await customizeMonthButton()
+		await nextTick()
+
+		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
+		expect(monthBtn.textContent).toContain('Févr.')
+	})
+
+	it('capitalise le premier caractère si le mois n\'est pas reconnu', async () => {
+		monthName.value = 'pluviose'
+		const { customizeMonthButton } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+		)
+
+		await customizeMonthButton()
+		await nextTick()
+
+		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
+		expect(monthBtn.textContent).toContain('Pluviose')
+	})
+
+	it('customise les boutons du mois et de l’année', async () => {
+		// S'assurer que monthName est null pour ce test
+		monthName.value = null
+
+		const { customizeMonthButton, monthButtonText } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+			yearName,
+		)
+
+		await customizeMonthButton()
+		await nextTick()
+
+		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
+		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(monthButtonText.value).toBe('janvier 2023')
+
+		expect(yearBtn.innerHTML).toContain('2023')
+		expect(yearBtn.innerHTML).toContain('<svg')
+	})
+
+	it('utilise monthName et yearName si fournis', async () => {
+		monthName.value = 'mars'
+		yearName.value = '2030'
+
+		const { customizeMonthButton } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+			yearName,
+		)
+
+		await customizeMonthButton()
+		await nextTick()
+
+		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(yearBtn.textContent).toContain('2030')
+	})
+
+	it('observe les changements du DOM et personnalise automatiquement', async () => {
+		const { setupMonthButtonObserver } = useMonthButtonCustomization(() => true)
+		const spy = vi.spyOn(document, 'querySelectorAll')
+
+		setupMonthButtonObserver()
+		await nextTick()
+
+		expect(spy).toHaveBeenCalledWith('.v-date-picker-controls')
+	})
+})

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

@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useTodayButton } from '../useTodayButton'
+
+// Mock pour dayjs
+vi.mock('dayjs', () => {
+	return {
+		default: vi.fn(() => ({
+			locale: vi.fn().mockReturnThis(),
+			format: vi.fn().mockReturnValue('lundi 1 janvier'),
+		})),
+	}
+})
+
+describe('useTodayButton', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it('devrait initialiser correctement', () => {
+		const { selectToday } = useTodayButton({})
+		// Vérifier que la fonction selectToday est définie
+		expect(selectToday).toBeDefined()
+	})
+
+	it('devrait sélectionner la date du jour lorsque selectToday est appelé', () => {
+		const { selectToday } = useTodayButton({})
+
+		const selectedDates = { value: null }
+		selectToday(selectedDates)
+
+		// Vérifier que selectedDates a été mis à jour
+		expect(selectedDates.value).not.toBeNull()
+	})
+
+	it('devrait formater la date du jour correctement', () => {
+		const { todayInString } = useTodayButton({})
+
+		// Vérifier que le computed todayInString est défini
+		expect(todayInString.value).toBeDefined()
+	})
+
+	describe('todayInString', () => {
+		it('devrait retourner la date du jour formatée avec la première lettre en majuscule', () => {
+			const { todayInString } = useTodayButton({})
+
+			// Vérifier que la valeur de todayInString est définie
+			expect(todayInString.value).toBeDefined()
+		})
+	})
+
+	describe('selectToday', () => {
+		it('devrait définir selectedDates à la date du jour en mode date unique', () => {
+			// Créer une date fixe pour le test
+			const fixedDate = new Date('2023-01-01')
+			// Espionner le constructeur Date pour qu'il retourne notre date fixe
+			vi.spyOn(global, 'Date').mockImplementation(() => fixedDate)
+
+			const { selectToday } = useTodayButton({
+				displayRange: false,
+			})
+
+			const selectedDates = { value: null }
+			selectToday(selectedDates)
+
+			expect(selectedDates.value).toBeDefined()
+			expect(selectedDates.value).toEqual(fixedDate)
+
+			// Restaurer le mock
+			vi.restoreAllMocks()
+		})
+
+		it('devrait définir selectedDates à un tableau avec deux fois la date du jour en mode plage', () => {
+			// Créer une date fixe pour le test
+			const fixedDate = new Date('2023-01-01')
+			// Espionner le constructeur Date pour qu'il retourne notre date fixe
+			vi.spyOn(global, 'Date').mockImplementation(() => fixedDate)
+
+			const { selectToday } = useTodayButton({
+				displayRange: true,
+			})
+
+			const selectedDates = { value: null }
+			selectToday(selectedDates)
+
+			expect(Array.isArray(selectedDates.value)).toBe(true)
+			expect(selectedDates.value).toHaveLength(2)
+			// Ajouter une vérification non-null pour satisfaire TypeScript
+			if (selectedDates.value) {
+				expect(selectedDates.value[0]).toEqual(fixedDate)
+				expect(selectedDates.value[1]).toEqual(fixedDate)
+			}
+
+			// Restaurer le mock
+			vi.restoreAllMocks()
+		})
+	})
+})

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

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { useWeekendDays } from '../useWeekendDays'
+
+describe('useWeekendDays', () => {
+	describe('displayWeekendDays', () => {
+		it('devrait retourner true par défaut', () => {
+			const { displayWeekendDays } = useWeekendDays({})
+
+			expect(displayWeekendDays.value).toBe(true)
+		})
+
+		it('devrait retourner true si displayWeekendDays=true', () => {
+			const { displayWeekendDays } = useWeekendDays({
+				displayWeekendDays: true,
+			})
+
+			expect(displayWeekendDays.value).toBe(true)
+		})
+
+		it('devrait retourner false si displayWeekendDays=false', () => {
+			const { displayWeekendDays } = useWeekendDays({
+				displayWeekendDays: false,
+			})
+
+			expect(displayWeekendDays.value).toBe(false)
+		})
+	})
+})

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

@@ -0,0 +1,31 @@
+import { computed } from 'vue'
+
+/**
+ * Composable pour gérer l'affichage d'un astérisque à côté du label
+ * @param props - Les propriétés du composant contenant displayAsterisk et required
+ * @param labelProp - Le nom de la propriété contenant le label (par défaut: 'label')
+ * @returns Un objet contenant isShouldDisplayAsterisk et labelWithAsterisk
+ */
+export const useAsteriskDisplay = (
+	props: { displayAsterisk?: boolean, required?: boolean, [key: string]: unknown },
+	labelProp = 'label',
+) => {
+	// Détermine si l'astérisque doit être affiché
+	const isShouldDisplayAsterisk = computed(() => {
+		return props.displayAsterisk && props.required
+	})
+
+	// Ajoute l'astérisque au label si nécessaire
+	const labelWithAsterisk = computed(() => {
+		// Assertion de type pour indiquer que props[labelProp] est de type string | undefined
+		const label = props[labelProp] as string | undefined
+		return isShouldDisplayAsterisk.value && label
+			? `${label} *`
+			: label
+	})
+
+	return {
+		isShouldDisplayAsterisk,
+		labelWithAsterisk,
+	}
+}

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

@@ -0,0 +1,136 @@
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+// Initialiser les plugins dayjs
+dayjs.extend(customParseFormat)
+
+/**
+ * Composable pour gérer l'auto-clamping des dates invalides
+ * Cette fonctionnalité permet de ramener automatiquement les dates invalides
+ * (comme le 29/02 sur une année non bissextile ou 33/12) au dernier jour valide du mois
+ */
+export const useDateAutoClamp = () => {
+	/**
+	 * Ajuste une date pour qu'elle soit valide en ramenant les jours invalides
+	 * au dernier jour du mois correspondant
+	 *
+	 * @param day - Le jour à ajuster
+	 * @param month - Le mois (0-11)
+	 * @param year - L'année
+	 * @returns Un objet contenant le jour ajusté et un booléen indiquant si un ajustement a été fait
+	 */
+	const clampDayToValidDate = (day: number, month: number, year: number): { day: number, adjusted: boolean } => {
+		// Vérifier si le jour est valide pour ce mois et cette année
+		// Créer une date pour le premier jour du mois et obtenir le nombre de jours dans ce mois
+		const dateObj = dayjs(`${year}-${month + 1}-01`)
+		const daysInMonth = dateObj.daysInMonth()
+
+		// Si le jour est supérieur au nombre de jours dans le mois, le ramener au dernier jour du mois
+		if (day > daysInMonth) {
+			return { day: daysInMonth, adjusted: true }
+		}
+
+		return { day, adjusted: false }
+	}
+
+	/**
+	 * Ajuste une date complète pour qu'elle soit valide
+	 *
+	 * @param dateStr - La chaîne de date à ajuster
+	 * @param format - Le format de la date (ex: 'DD/MM/YYYY')
+	 * @returns Un objet contenant la date ajustée et un booléen indiquant si un ajustement a été fait
+	 */
+	const autoClampDate = (dateStr: string, format: string): { clampedDate: string, adjusted: boolean } => {
+		// Si la chaîne est vide, retourner telle quelle
+		if (!dateStr) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		// Déterminer le séparateur utilisé dans le format
+		const separator = format.match(/[^DMY]/)?.[0] || '/'
+
+		// Extraire les parties du format pour déterminer l'ordre (jour, mois, année)
+		const formatParts = format.split(separator)
+		const dateParts = dateStr.split(separator)
+
+		// Si le nombre de parties ne correspond pas, retourner la chaîne originale
+		if (formatParts.length !== dateParts.length) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		let day = -1
+		let month = -1
+		let year = -1
+
+		// Extraire les valeurs de jour, mois et année selon le format
+		for (let i = 0; i < formatParts.length; i++) {
+			const formatPart = formatParts[i].toUpperCase()
+			const value = parseInt(dateParts[i], 10)
+
+			if (isNaN(value)) {
+				return { clampedDate: dateStr, adjusted: false }
+			}
+
+			if (formatPart.startsWith('D')) {
+				day = value
+			}
+			else if (formatPart.startsWith('M')) {
+				month = value - 1 // Convertir en index de mois (0-11)
+			}
+			else if (formatPart.startsWith('Y')) {
+				year = value
+			}
+		}
+
+		// Vérifier si toutes les parties nécessaires ont été trouvées
+		if (day === -1 || month === -1 || year === -1) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		// Vérifier si nous avons une date valide
+		if (month < 0 || month > 11 || year < 0 || day < 1) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		// Calculer directement le nombre de jours dans le mois
+		const daysInMonth = dayjs(new Date(year, month, 1)).daysInMonth()
+
+		// Ajuster le jour si nécessaire
+		let adjusted = false
+		let clampedDay = day
+
+		if (day > daysInMonth) {
+			clampedDay = daysInMonth
+			adjusted = true
+		}
+
+		// Si aucun ajustement n'a été fait, retourner la chaîne originale
+		if (!adjusted) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		// Reconstruire la chaîne de date avec le jour ajusté
+		const newDateParts = [...dateParts]
+		for (let i = 0; i < formatParts.length; i++) {
+			const formatPart = formatParts[i].toUpperCase()
+			if (formatPart.startsWith('D')) {
+				// Formater le jour avec le bon nombre de chiffres (01 ou 1 selon le format)
+				newDateParts[i] = formatPart.length > 1
+					? clampedDay.toString().padStart(2, '0')
+					: clampedDay.toString()
+			}
+		}
+
+		return {
+			clampedDate: newDateParts.join(separator),
+			adjusted: true,
+		}
+	}
+
+	return {
+		autoClampDate,
+		clampDayToValidDate,
+	}
+}
+
+export default useDateAutoClamp