@cnamts/synapse 0.0.12-alpha → 0.0.13-alpha

package/src/components/UploadWorkflow/AccessibiliteItems.ts

@@ -0,0 +1,192 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.1 Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+		items: [
+			{
+				precision: '3.1.2 Pour chaque indication de couleur donnée par un texte, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.1.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.2 Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ? ',
+
+		items: [
+			{
+				precision: '11.2.1 Chaque balise <label> permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un élément <label> ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’élément est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+		],
+
+	},
+	{
+		title: 'Catégorie 12 : Navigation',
+		subtitle: '12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?',
+		items: [
+			{
+
+				precision: '12.9.1 Dans chaque page web, chaque élément recevant le focus vérifie-t-il une de ces conditions ? '
+					+ 'Il est possible d’atteindre l’élément suivant ou précédent pouvant recevoir le focus avec la touche de tabulation ;'
+					+ 'L’utilisateur est informé d’un mécanisme fonctionnel permettant d’atteindre au clavier l’élément suivant ou précédent pouvant recevoir le focus.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments d’interface susceptibles de recevoir le focus (au moyen de la tabulation ou au moyen d’un script) ;',
+					info2: '2. Pour chaque élément d’interface, vérifier que l’utilisateur peut atteindre l’élément suivant ou précédent pouvant recevoir le focus : '
+						+ 'Soit au moyen de la touche de tabulation (Tab ou Maj+Tab) ;'
+						+ 'Soit au moyen d’une autre interaction clavier dont l’utilisateur est informé (par exemple, les flèches de direction).',
+					info3: '3. Si c’est le cas pour chaque élément d’interface, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+
+		items: [
+			{
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ? '
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).'
+						+ ' Le nom du composant est cohérent avec l’état de la fonctionnalité ou des contenus contrôlés (par exemple pour une fonctionnalité permettant d’afficher ou de masquer une zone de contenu).',
+					info2: '2. Sinon, vérifier la présence d’un composant d’interface accessible permettant d’accéder aux mêmes fonctionnalités',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+		],
+
+	},
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+			{
+				precision: ' 3.2.4 Dans chaque page web, le texte et le texte en image en gras d’une taille restituée supérieure ou égale à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ? '
+					+ 'Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ; '
+					+ 'Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins. ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.4',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image en gras d’une taille restituée supérieure ou égale à 18,5px qui pourraient poser des problèmes de contraste ; ',
+					info2: '2. Pour chacun de ces textes, vérifier que :  Soit le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins. ',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 5 : Tableaux',
+		subtitle: '5.1 Chaque tableau de données complexe a-t-il un résumé ? ',
+		items: [
+
+			{
+				precision: '5.1.1 Pour chaque tableau de données complexe, un résumé est-il disponible ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.1.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les tableaux de données complexes (tableau de données - élément <table> ou élément pourvu d’un attribut WAI-ARIA role="table" - contenant des en-têtes qui ne sont pas répartis uniquement sur la première ligne et/ou la première colonne de la grille ou dont la portée n’est pas valable pour l’ensemble de la colonne ou de la ligne) ; ',
+					info2: '2. Pour chaque tableau de données complexe, vérifier qu’un passage de texte permettant de comprendre la nature et la structure du tableau, est présent : '
+						+ 'Soit dans l’élément <caption> ; '
+						+ 'Soit dans l’attribut summary de l’élément <table> (dans les versions de HTML et de XHTML antérieures à HTML 5) ; '
+						+ 'Soit dans un passage de texte lié au tableau avec l’attribut aria-describedby. ',
+					info3: '3. Si c’est le cas pour chaque tableau de données complexe, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 7 : Scripts',
+		subtitle: '7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: ' 7.1.3 Chaque script qui génère ou contrôle un composant d’interface vérifie-t-il ces conditions : '
+					+ 'Le composant possède un nom pertinent ;'
+					+ 'Le nom accessible du composant contient au moins l’intitulé visible ;'
+					+ 'Le composant possède un rôle pertinent.',
+
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1.3',
+				solution: [{
+					info1: '1. Pour chacun des composants d’interface ayant validé le test 7.1.1, vérifier que le composant d’interface possède : ',
+					info2: '2. Un nom pertinent (intitulé visible) et un rôle pertinent',
+					info3: '3. Si le composant d’interface possède un nom accessible, vérifier que ce nom est pertinent et contient au moins l’intitulé visible.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.2  Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ?   ',
+		items: [
+			{
+
+				precision: '11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut title ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+
+	},
+
+]

package/src/components/UploadWorkflow/UploadWorkflow.vue

@@ -3,7 +3,7 @@
 		type CustomizableOptions,
 	} from '@/composables/useCustomizableOptions'
 	import { useWidthable, type Widthable } from '@/composables/widthable'
-	import { required } from '@/utils/rules/required'
+	import { isRequired } from '@/utils/rules/isRequired'
 	import { computed, reactive, ref, toRef, watch } from 'vue'
 	import DialogBox from '../DialogBox/DialogBox.vue'
 	import FileList from '../FileList/FileList.vue'
@@ -187,7 +187,7 @@
 					:items="selectItems"
 					item-title="text"
 					item-value="value"
-					:rules="[required]"
+					:rules="[isRequired]"
 					color="primary"
 				/>
 			</VForm>

package/src/components/UploadWorkflow/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/Usages/tests/Usages.spec.ts

@@ -0,0 +1,183 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import Usages from '../Usages.vue'
+
+describe('Usages.vue', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifier que le composant est rendu
+		expect(wrapper.exists()).toBe(true)
+
+		// Vérifier que les colonnes sont rendues
+		expect(wrapper.findAll('.v-col-auto').length).toBe(2)
+
+		// Vérifier que les icônes sont rendues
+		expect(wrapper.findAll('.v-icon').length).toBe(2)
+
+		// Vérifier les titres des colonnes
+		expect(wrapper.text()).toContain('À faire')
+		expect(wrapper.text()).toContain('À ne pas faire')
+
+		// Vérifier qu'il n'y a pas d'éléments de liste par défaut
+		expect(wrapper.findAll('li').length).toBe(0)
+	})
+
+	it('renders items in both columns when provided', () => {
+		const items1 = ['Item 1', 'Item 2', 'Item 3']
+		const items2 = ['Item A', 'Item B']
+
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items1,
+				items2,
+			},
+		})
+
+		// Vérifier que tous les éléments de la première liste sont rendus
+		const firstColumnItems = wrapper.findAll('.check li')
+		expect(firstColumnItems.length).toBe(items1.length)
+		items1.forEach((item, index) => {
+			expect(firstColumnItems[index].text()).toContain(item)
+		})
+
+		// Vérifier que tous les éléments de la deuxième liste sont rendus
+		const secondColumnItems = wrapper.findAll('.not-check li')
+		expect(secondColumnItems.length).toBe(items2.length)
+		items2.forEach((item, index) => {
+			expect(secondColumnItems[index].text()).toContain(item)
+		})
+	})
+
+	it('renders only the first column items when only items1 is provided', () => {
+		const items1 = ['Item 1', 'Item 2']
+
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items1,
+			},
+		})
+
+		// Vérifier que les éléments de la première liste sont rendus
+		const firstColumnItems = wrapper.findAll('.check li')
+		expect(firstColumnItems.length).toBe(items1.length)
+
+		// Vérifier qu'il n'y a pas d'éléments dans la deuxième liste
+		const secondColumnItems = wrapper.findAll('.not-check li')
+		expect(secondColumnItems.length).toBe(0)
+	})
+
+	it('renders only the second column items when only items2 is provided', () => {
+		const items2 = ['Item A', 'Item B', 'Item C']
+
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items2,
+			},
+		})
+
+		// Vérifier qu'il n'y a pas d'éléments dans la première liste
+		const firstColumnItems = wrapper.findAll('.check li')
+		expect(firstColumnItems.length).toBe(0)
+
+		// Vérifier que les éléments de la deuxième liste sont rendus
+		const secondColumnItems = wrapper.findAll('.not-check li')
+		expect(secondColumnItems.length).toBe(items2.length)
+	})
+
+	it('uses the correct icons', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const icons = wrapper.findAll('.v-icon')
+
+		// Vérifier que les icônes sont correctement définies
+		// Note: Nous ne pouvons pas vérifier directement les propriétés des icônes,
+		// mais nous pouvons vérifier que les icônes sont présentes dans le bon ordre
+		expect(icons.length).toBe(2)
+
+		// Vérifier que les classes CSS sont correctement appliquées
+		expect(wrapper.find('.check')).toBeTruthy()
+		expect(wrapper.find('.not-check')).toBeTruthy()
+	})
+
+	it('applies the correct styling to columns', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifier les classes CSS pour la première colonne
+		const checkColumn = wrapper.find('.check')
+		expect(checkColumn.exists()).toBe(true)
+
+		// Vérifier les classes CSS pour la deuxième colonne
+		const notCheckColumn = wrapper.find('.not-check')
+		expect(notCheckColumn.exists()).toBe(true)
+
+		// Vérifier que les styles sont appliqués (indirectement via les classes)
+		expect(checkColumn.classes()).toContain('check')
+		expect(notCheckColumn.classes()).toContain('not-check')
+	})
+
+	it('handles empty arrays for both item lists', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items1: [],
+				items2: [],
+			},
+		})
+
+		// Vérifier qu'il n'y a pas d'éléments de liste
+		expect(wrapper.findAll('li').length).toBe(0)
+
+		// Mais les colonnes et titres doivent toujours être présents
+		expect(wrapper.findAll('.v-col-auto').length).toBe(2)
+		expect(wrapper.text()).toContain('À faire')
+		expect(wrapper.text()).toContain('À ne pas faire')
+	})
+
+	it('renders with custom props from CustomizableOptions', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				color: 'primary',
+				disabled: true,
+				readonly: true,
+				dense: true,
+				items1: ['Item 1'],
+				items2: ['Item A'],
+			},
+		})
+
+		// Vérifier que le composant est rendu malgré les props supplémentaires
+		expect(wrapper.exists()).toBe(true)
+
+		// Vérifier que les éléments de liste sont toujours rendus correctement
+		expect(wrapper.findAll('.check li').length).toBe(1)
+		expect(wrapper.findAll('.not-check li').length).toBe(1)
+	})
+})

package/src/components/index.ts

@@ -5,6 +5,7 @@ export { useNotificationService } from '../services/NotificationService'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as ChipList } from './ChipList/ChipList.vue'
+export * from './ChipList/types'
 export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
 export { default as ContextualMenu } from './ContextualMenu/ContextualMenu.vue'
 export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
@@ -56,10 +57,12 @@ export { default as PeriodField } from './PeriodField/PeriodField.vue'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as RangeField } from './RangeField/RangeField.vue'
 export { default as RatingPicker } from './RatingPicker/RatingPicker.vue'
+export { default as SearchListField } from './SearchListField/SearchListField.vue'
 export { default as SelectBtnField } from './SelectBtnField/SelectBtnField.vue'
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as TableToolbar } from './TableToolbar/TableToolbar.vue'
 export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'

package/src/composables/date/tests/useDateFormat.spec.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { formatDate, parseDate } from '../useDateFormat'
+
+describe('useDateFormat', () => {
+	describe('formatDate', () => {
+		it('formats a Date object to string according to the specified format', () => {
+			const date = new Date(2023, 0, 15) // 15 janvier 2023
+			expect(formatDate(date, 'DD/MM/YYYY')).toBe('15/01/2023')
+			expect(formatDate(date, 'YYYY-MM-DD')).toBe('2023-01-15')
+			expect(formatDate(date, 'MM.DD.YYYY')).toBe('01.15.2023')
+		})
+
+		it('returns empty string when date is null or undefined', () => {
+			expect(formatDate(null as unknown as Date, 'DD/MM/YYYY')).toBe('')
+			expect(formatDate(undefined as unknown as Date, 'DD/MM/YYYY')).toBe('')
+		})
+
+		it('handles different date formats correctly', () => {
+			const date = new Date(2023, 11, 31) // 31 décembre 2023
+			expect(formatDate(date, 'DD/MM/YYYY')).toBe('31/12/2023')
+			expect(formatDate(date, 'D/M/YYYY')).toBe('31/12/2023')
+			expect(formatDate(date, 'YYYY-MM-DD')).toBe('2023-12-31')
+			expect(formatDate(date, 'MM/DD/YYYY')).toBe('12/31/2023')
+		})
+
+		it('handles custom separators correctly', () => {
+			const date = new Date(2023, 0, 15) // 15 janvier 2023
+			expect(formatDate(date, 'DD.MM.YYYY')).toBe('15.01.2023')
+			expect(formatDate(date, 'DD-MM-YYYY')).toBe('15-01-2023')
+			expect(formatDate(date, 'YYYY/MM/DD')).toBe('2023/01/15')
+		})
+	})
+
+	describe('parseDate', () => {
+		it('parses a date string to a Date object according to the specified format', () => {
+			const dateStr = '15/01/2023'
+			const date = parseDate(dateStr, 'DD/MM/YYYY')
+			expect(date).toBeInstanceOf(Date)
+			expect(date?.getFullYear()).toBe(2023)
+			expect(date?.getMonth()).toBe(0) // Janvier = 0
+			expect(date?.getDate()).toBe(15)
+		})
+
+		it('returns null for invalid date strings', () => {
+			expect(parseDate('invalid', 'DD/MM/YYYY')).toBeNull()
+			expect(parseDate('31/02/2023', 'DD/MM/YYYY')).toBeNull() // 31 février n'existe pas
+		})
+
+		it('handles different date formats correctly', () => {
+			expect(parseDate('2023-01-15', 'YYYY-MM-DD')?.getDate()).toBe(15)
+			expect(parseDate('01/15/2023', 'MM/DD/YYYY')?.getDate()).toBe(15)
+			expect(parseDate('15.01.2023', 'DD.MM.YYYY')?.getDate()).toBe(15)
+		})
+
+		it('returns null when input is null or empty', () => {
+			expect(parseDate(null as unknown as string, 'DD/MM/YYYY')).toBeNull()
+			expect(parseDate('', 'DD/MM/YYYY')).toBeNull()
+		})
+
+		it('handles leap years correctly', () => {
+			// 2020 était une année bissextile
+			expect(parseDate('29/02/2020', 'DD/MM/YYYY')).not.toBeNull()
+			// 2023 n'est pas une année bissextile
+			expect(parseDate('29/02/2023', 'DD/MM/YYYY')).toBeNull()
+		})
+	})
+})

package/src/composables/date/tests/useDateInitialization.spec.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest'
+import { initializeSelectedDates, type DateInput } from '../useDateInitialization'
+
+describe('useDateInitialization', () => {
+	describe('initializeSelectedDates', () => {
+		it('returns null when modelValue is null or undefined', () => {
+			expect(initializeSelectedDates(null, 'DD/MM/YYYY')).toBeNull()
+			expect(initializeSelectedDates(null as unknown as DateInput, 'DD/MM/YYYY')).toBeNull()
+		})
+
+		it('parses a single date string correctly', () => {
+			const result = initializeSelectedDates('15/01/2023', 'DD/MM/YYYY')
+			expect(result).toBeInstanceOf(Date)
+
+			const date = result as Date
+			expect(date.getFullYear()).toBe(2023)
+			expect(date.getMonth()).toBe(0) // Janvier = 0
+			expect(date.getDate()).toBe(15)
+		})
+
+		it('parses an array of date strings correctly', () => {
+			const result = initializeSelectedDates(['15/01/2023', '20/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+
+			const dates = result as Date[]
+			expect(dates.length).toBe(2)
+
+			expect(dates[0].getFullYear()).toBe(2023)
+			expect(dates[0].getMonth()).toBe(0)
+			expect(dates[0].getDate()).toBe(15)
+
+			expect(dates[1].getFullYear()).toBe(2023)
+			expect(dates[1].getMonth()).toBe(0)
+			expect(dates[1].getDate()).toBe(20)
+		})
+
+		it('returns empty array when dates are invalid', () => {
+			const result = initializeSelectedDates(['invalid', '20/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(0)
+		})
+
+		it('returns empty array when first date is after second date', () => {
+			const result = initializeSelectedDates(['25/01/2023', '20/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(0)
+		})
+
+		it('handles single element array correctly', () => {
+			const result = initializeSelectedDates(['15/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+
+			const dates = result as Date[]
+			expect(dates.length).toBe(1)
+
+			expect(dates[0].getFullYear()).toBe(2023)
+			expect(dates[0].getMonth()).toBe(0)
+			expect(dates[0].getDate()).toBe(15)
+		})
+
+		it('returns empty array for empty array input', () => {
+			const result = initializeSelectedDates([], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(0)
+		})
+
+		it('handles different display and return formats correctly', () => {
+			// Date au format de retour
+			const result1 = initializeSelectedDates('2023-01-15', 'DD/MM/YYYY', 'YYYY-MM-DD')
+			expect(result1).toBeInstanceOf(Date)
+			expect((result1 as Date).getDate()).toBe(15)
+
+			// Date au format d'affichage quand le format de retour est différen
+			const result2 = initializeSelectedDates('15/01/2023', 'DD/MM/YYYY', 'YYYY-MM-DD')
+			expect(result2).toBeInstanceOf(Date)
+			expect((result2 as Date).getDate()).toBe(15)
+		})
+
+		it('returns null for object input', () => {
+			const result = initializeSelectedDates({}, 'DD/MM/YYYY')
+			expect(result).toBeNull()
+		})
+
+		it('handles invalid date strings correctly', () => {
+			const result = initializeSelectedDates('invalid', 'DD/MM/YYYY')
+			expect(result).toBeNull()
+		})
+	})
+})