@cnamts/synapse 0.0.15-alpha → 0.0.16-alpha

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

@@ -60,12 +60,6 @@ describe('DatePicker.vue', () => {
 		expect(wrapper.emitted('update:modelValue')[0]).toEqual(['01/01/2023'])
 	})
 
-	it('toggles the date picker visibility on focus', async () => {
-		const input = wrapper.find('input')
-		await input.trigger('focus')
-		expect(wrapper.vm.isDatePickerVisible).toBe(true)
-	})
-
 	it('renders the date picker with proper structure', async () => {
 		// Ouvrir le DatePicker pour que les éléments soient dans le DOM
 		wrapper.vm.isDatePickerVisible = true
@@ -151,17 +145,15 @@ describe('DatePicker.vue', () => {
 				plugins: [vuetify],
 			},
 			props: {
-				required: true, // Le champ est requis
+				required: true,
 			},
 		})
 
-		// Simule une date valide
 		wrapper.vm.selectedDates = [new Date('2023-01-01')]
 		await nextTick()
 
 		const result = wrapper.vm.validateOnSubmit()
 
-		// Vérifie que validateOnSubmit retourne true et qu'il n'y a pas d'erreurs
 		expect(result).toBe(true)
 		expect(wrapper.vm.errorMessages).toEqual([])
 	})
@@ -172,34 +164,32 @@ describe('DatePicker.vue', () => {
 				plugins: [vuetify],
 			},
 			props: {
-				required: true, // Le champ est requis
+				required: true,
 			},
 		})
 
-		// Simule l'absence de date sélectionnée
 		wrapper.vm.selectedDates = null
 		await nextTick()
 
 		const result = wrapper.vm.validateOnSubmit()
 
-		// Vérifie que validateOnSubmit retourne false et qu'il y a des erreurs
 		expect(result).toBe(false)
 		expect(wrapper.vm.errorMessages).toContain('La date est requise.')
 	})
 
 	it('parses a valid date string into a Date instance', () => {
-		const modelValue = '15/01/2023' // Chaîne valide
+		const modelValue = '15/01/2023'
 		const result = wrapper.vm.initializeSelectedDates(modelValue, 'DD/MM/YYYY')
 
-		expect(result).toBeInstanceOf(Date) // Doit retourner une instance de Date
-		expect(result.toISOString().split('T')[0]).toBe('2023-01-15') // Correspond à la date attendue
+		expect(result).toBeInstanceOf(Date)
+		expect(result.toISOString().split('T')[0]).toBe('2023-01-15')
 	})
 
 	it('returns null if modelValue is null or undefined', () => {
 		const modelValue = null
 		const result = wrapper.vm.initializeSelectedDates(modelValue, 'DD/MM/YYYY')
 
-		expect(result).toBeNull() // Doit retourner null
+		expect(result).toBeNull()
 	})
 
 	it('handles an invalid date string gracefully', () => {
@@ -210,24 +200,23 @@ describe('DatePicker.vue', () => {
 	})
 
 	it('sets selectedDates to null when input is empty', () => {
-		wrapper.vm.updateSelectedDates('') // Simule un input vide
+		wrapper.vm.updateSelectedDates('')
 
-		expect(wrapper.vm.selectedDates).toBeNull() // Vérifie que selectedDates est null
+		expect(wrapper.vm.selectedDates).toBeNull()
 	})
 
 	it('parses a valid date string and updates selectedDates', () => {
 		const validInput = '15/01/2023'
-		wrapper.vm.updateSelectedDates(validInput) // Simule un input valide
+		wrapper.vm.updateSelectedDates(validInput)
 
-		expect(wrapper.vm.selectedDates).toBeInstanceOf(Date) // Vérifie que selectedDates est une instance de Date
-		expect(wrapper.vm.selectedDates.toISOString().split('T')[0]).toBe('2023-01-15') // Vérifie la date exacte
+		expect(wrapper.vm.selectedDates).toBeInstanceOf(Date)
+		expect(wrapper.vm.selectedDates.toISOString().split('T')[0]).toBe('2023-01-15')
 	})
 
 	it('does not update selectedDates for invalid date string', () => {
 		const invalidInput = 'invalid-date'
-		wrapper.vm.updateSelectedDates(invalidInput) // Simule un input invalide
-
-		expect(wrapper.vm.selectedDates).toBeNull() // Vérifie que selectedDates reste null
+		wrapper.vm.updateSelectedDates(invalidInput)
+		expect(wrapper.vm.selectedDates).toBeNull()
 	})
 
 	it('toggles date picker visibility correctly', async () => {
@@ -235,15 +224,12 @@ describe('DatePicker.vue', () => {
 			global: { plugins: [vuetify] },
 		})
 
-		// État initial : le date picker est caché
 		expect(wrapper.vm.isDatePickerVisible).toBe(false)
 
-		// Ouvrir le date picker
 		wrapper.vm.openDatePicker()
 		await nextTick()
 		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 
-		// Fermer le date picker
 		wrapper.vm.isDatePickerVisible = false
 		await nextTick()
 		expect(wrapper.vm.isDatePickerVisible).toBe(false)
@@ -257,7 +243,6 @@ describe('DatePicker.vue', () => {
 			},
 		})
 
-		// Valider sans date (devrait échouer)
 		const result = await wrapper.vm.validateOnSubmit()
 		expect(result).toBe(false)
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
@@ -299,11 +284,9 @@ describe('DatePicker.vue', () => {
 			},
 		})
 
-		// Valider sans date pour générer une erreur
 		await wrapper.vm.validateOnSubmit()
 		await nextTick()
 
-		// Vérifier que l'erreur est ajoutée à errorMessages
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 		const errorMessage = wrapper.find('.v-messages__message')
 		expect(errorMessage.exists()).toBe(true)
@@ -318,12 +301,30 @@ describe('DatePicker.vue', () => {
 			},
 		})
 
-		// Vérifier que le mode birth date est appliqué
 		expect(wrapper.props('isBirthDate')).toBe(true)
 
-		// Ouvrir le picker et vérifier qu'il est visible
 		wrapper.vm.openDatePicker()
 		await nextTick()
 		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 	})
+
+	it('takes into account disabled and readonly limitations', async () => {
+		const wrapper = mount(DatePicker, {
+			global: { plugins: [vuetify] },
+			props: {
+				disabled: true,
+			},
+		})
+
+		wrapper.vm.openDatePicker()
+		await nextTick()
+
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+
+		await wrapper.setProps({ disabled: false, readonly: true })
+		wrapper.vm.openDatePicker()
+		await nextTick()
+
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+	})
 })

package/src/components/DatePicker/tests/DateTextInput.spec.ts

@@ -38,7 +38,7 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
 	})
 
 	it('accepts valid date format', async () => {
@@ -116,20 +116,20 @@ describe('DateTextInput.vue', () => {
 			},
 		})
 
-		// Force la validation en déclenchant un événement de perte de focus
+		// Force validation by triggering a blur event
 		const input = wrapper.find('input')
 		await input.trigger('focus')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
-		await wrapper.vm.$nextTick() // Double nextTick pour s'assurer que les mises à jour sont terminées
-		// On peut également forcer la validation manuellement
+		await wrapper.vm.$nextTick() // Double nextTick to ensure updates are completed
+		// We can also force validation manually
 		await wrapper.vm.validateOnSubmit()
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
 		const warningMessages = textField.props('warningMessages') || []
-		// Vérifier que le message d'avertissement est bien présent
+		// Check that the warning message is present
 		expect(warningMessages.length).toBeGreaterThan(0)
-		// Le message réel commence par "Attention :"
+		// The actual message starts with "Attention:"
 		expect(warningMessages[0]).toContain('Attention :')
 	})
 
@@ -139,7 +139,7 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
 	})
 
 	it('formats input while typing', async () => {
@@ -169,7 +169,7 @@ describe('DateTextInput.vue', () => {
 		const input = wrapper.find('input')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
-		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
 	})
 
 	it('formats date during input', async () => {
@@ -180,13 +180,13 @@ describe('DateTextInput.vue', () => {
 	})
 
 	it('handles date deletion', async () => {
-		// D'abord on met une date valide
+		// First set a valid date
 		const input = wrapper.find('input')
 		await input.setValue('01/01/2025')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 
-		// Puis on la supprime
+		// Then delete it
 		await input.setValue('')
 		await input.trigger('input')
 		await input.trigger('blur')
@@ -266,19 +266,61 @@ describe('DateTextInput.vue', () => {
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/__/____')
 
-		// Simuler une position de curseur après le "01"
+		// Simulate cursor position after "01"
 		input.element.setSelectionRange(2, 2)
 		await input.trigger('input')
 		await wrapper.vm.$nextTick()
 
-		// La position du curseur devrait rester après le "01"
+		// The cursor position should remain after "01"
 		expect(input.element.selectionStart).toBe(2)
 	})
 
+	it('handles 2 digits year correctly', async () => {
+		const customWrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'DD/MM/YY',
+				dateFormatReturn: 'YYYY-MM-DD',
+			},
+		})
+
+		const input = customWrapper.find('input')
+		await input.setValue('0')
+		expect(input.element.value).toBe('0_/__/__')
+
+		await input.setValue('01/02/99')
+		expect(input.element.value).toBe('01/02/99')
+		expect(customWrapper.emitted('update:model-value')?.at(-1)).toEqual(['1999-02-01'])
+	})
+
+	it('handles ISO-8601 date format correctly', async () => {
+		const customWrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'YYYY-MM-DD',
+			},
+		})
+
+		const input = customWrapper.find('input')
+		await input.setValue('2025-')
+		expect(input.element.value).toBe('2025-__-__')
+		expect(customWrapper.emitted('update:model-value')).toBeFalsy()
+
+		await input.setValue('2025-01-01')
+		expect(input.element.value).toBe('2025-01-01')
+		expect(customWrapper.emitted('update:model-value')?.at(-1)).toEqual(['2025-01-01'])
+	})
+
 	it('handles paste event with valid date', async () => {
 		const input = wrapper.find('input')
 
-		// Créer un événement de collage avec les données
+		// Create a paste event with data
 		const clipboardData = {
 			getData: () => '01/01/2025',
 		}
@@ -297,26 +339,26 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('keydown', {
 			key: 'Tab',
 		})
-		// Vérifier que le composant n'empêche pas la navigation par tab
+		// Check that the component doesn't prevent tab navigation
 		expect(wrapper.emitted('update:model-value')).toBeFalsy()
 
-		// Tester le comportement avec Ctrl+V (coller)
+		// Test behavior with Ctrl+V (paste)
 		await input.trigger('keydown', {
 			key: 'v',
 			ctrlKey: true,
 		})
-		// Le comportement par défaut devrait être préservé
+		// Default behavior should be preserved
 		expect(wrapper.emitted('update:model-value')).toBeFalsy()
 	})
 
 	it('validates on submit correctly', async () => {
 		const input = wrapper.find('input')
 
-		// Cas 1: Champ vide avec required=true
+		// Case 1: Empty field with required=true
 		const emptyResult = await wrapper.vm.validateOnSubmit()
 		expect(emptyResult).toBe(false)
 
-		// Cas 2: Date valide
+		// Case 2: Valid date
 		await input.setValue('01/01/2025')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
@@ -326,23 +368,29 @@ describe('DateTextInput.vue', () => {
 	})
 
 	it('handles focus and blur methods correctly', async () => {
-		// Simuler un querySelector global
-		const originalQuerySelector = document.querySelector
+		// Create a mock for the input element
 		const mockInput = { focus: vi.fn(), blur: vi.fn() }
 
-		// Remplacer document.querySelector
-		document.querySelector = vi.fn().mockReturnValue(mockInput)
+		// Mock the component's querySelector method
+		const mockQuerySelector = vi.fn().mockReturnValue(mockInput)
+
+		// Replace the element reference and its querySelector method
+		wrapper.vm.inputRef = {
+			$el: {
+				querySelector: mockQuerySelector,
+			},
+		}
 
-		// Appeler les méthodes exposées
+		// Call the exposed methods
 		wrapper.vm.focus()
 		wrapper.vm.blur()
 
-		// Vérifier que les méthodes ont été appelées
+		// Check that querySelector was called with the right selector
+		expect(mockQuerySelector).toHaveBeenCalledWith('input:not([type="hidden"])')
+
+		// Check that the methods were called
 		expect(mockInput.focus).toHaveBeenCalled()
 		expect(mockInput.blur).toHaveBeenCalled()
-
-		// Restaurer document.querySelector
-		document.querySelector = originalQuerySelector
 	})
 
 	it('initializes with model value correctly', async () => {
@@ -383,17 +431,17 @@ describe('DateTextInput.vue', () => {
 	it('handles partial date input correctly', async () => {
 		const input = wrapper.find('input')
 
-		// Saisir seulement le jour
+		// Enter only the day
 		await input.setValue('01')
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/__/____')
 
-		// Ajouter le mois
+		// Add the month
 		await input.setValue('01/02')
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/02/____')
 
-		// Compléter la date
+		// Complete the date
 		await input.setValue('01/02/2025')
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/02/2025')
@@ -423,16 +471,16 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('focus')
 		await input.trigger('blur')
 		await customWrapper.vm.$nextTick()
-		await customWrapper.vm.$nextTick() // Double nextTick pour fiabilité
+		await customWrapper.vm.$nextTick() // Double nextTick for reliability
 
-		// Force validation manuelle
+		// Force manual validation
 		await customWrapper.vm.validateOnSubmit()
 		await customWrapper.vm.$nextTick()
 
 		const textField = customWrapper.findComponent(SyTextField)
 		const successMessages = textField.props('successMessages') || []
 
-		// Vérification assouplie
+		// Flexible verification
 		expect(successMessages.length).toBeGreaterThan(0)
 		expect(successMessages[0]).toContain('valide')
 	})

package/src/components/SyAlert/Accessibilite.stories.ts

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/SyAlert.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4010" target="_blank" style="color:#0C41BD;">issue #4010</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/SyAlert/SyAlert.mdx

@@ -25,12 +25,8 @@ const showAlert = ref(true);
 </script>
 
 <template>
-  <div class="d-flex flex-wrap align-center justify-center">
-    <SyAlert v-model="showAlert" type="warning" variant="tonal" :closable="true">
-      <template #default>This is a warning alert</template>
-    </SyAlert>
-
-    <VBtn v-if="!showAlert" color="primary" @click="showAlert = true" class="ma-6">Réinitialiser</VBtn>
-  </div>
+  <SyAlert v-model="showAlert" type="warning" variant="tonal" :closable="true">
+    Ceci est une alerte de type "warning".
+  </SyAlert>
 </template>
 `} />

package/src/components/SyAlert/SyAlert.stories.ts

@@ -13,6 +13,13 @@ const meta = {
 		modelValue: true,
 	},
 	argTypes: {
+		modelValue: {
+			control: { type: 'boolean' },
+			description: 'Contrôle l\'affichage de l\'alerte',
+			table: {
+				category: 'props',
+			},
+		},
 		type: {
 			options: ['info', 'warning', 'success', 'error'],
 			control: { type: 'select' },
@@ -37,8 +44,8 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<template>
 	<div class="d-flex flex-wrap align-center justify-center">
-		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true">
-			<template #default>This is a success alert</template>
+		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true" style="width: 100%">
+			<template #default>Contenu de l'alerte</template>
 		</SyAlert>
 
 		<VBtn v-if="!showAlert" color="primary" @click="showAlert = true">
@@ -65,7 +72,7 @@ export const Default: Story = {
 		type: 'success',
 		closable: true,
 		variant: 'tonal',
-		default: 'Alert content',
+		default: 'Contenu de l\'alerte',
 	},
 	render: (args) => {
 		return {
@@ -75,7 +82,7 @@ export const Default: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center justify-center">
-					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
+					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable" style="width: 100%">
 						<template #default>{{ args.default }}</template>
 					</SyAlert>
 					<VBtn v-if="!args.modelValue" color="primary" @click="args.modelValue = true" class="ma-6">
@@ -94,8 +101,8 @@ export const Outlined: Story = {
 				name: 'Template',
 				code: `<template>
 	<div class="d-flex flex-wrap align-center justify-center">
-		<SyAlert v-model="showAlert" type="warning" variant="outlined" :closable="true">
-			<template #default>This is a warning alert</template>
+		<SyAlert v-model="showAlert" type="warning" variant="outlined" :closable="true" style="width: 100%">
+			<template #default>Contenu de l'alerte</template>
 		</SyAlert>
 
 		<VBtn v-if="!showAlert" color="primary" @click="showAlert = true">
@@ -121,7 +128,7 @@ export const Outlined: Story = {
 		type: 'warning',
 		closable: true,
 		variant: 'outlined',
-		default: 'Alert content',
+		default: 'Contenu de l\'alerte',
 	},
 	render: (args) => {
 		return {
@@ -131,7 +138,7 @@ export const Outlined: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center justify-center">
-					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
+					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable" style="width: 100%">
 						<template #default>{{ args.default }}</template>
 					</SyAlert>
 					<VBtn v-if="!args.modelValue" color="primary" @click="args.modelValue = true" class="ma-6">
@@ -150,8 +157,8 @@ export const SlotIcon: Story = {
 				name: 'Template',
 				code: `<template>
 	<div class="d-flex flex-wrap align-center justify-center">
-		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true">
-			<template #default>This is a success alert</template>
+		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true" style="width: 100%">
+			<template #default>Contenu de l'alerte</template>
 			<template #icon>{{ icon }}</template>
 		</SyAlert>
 
@@ -180,7 +187,7 @@ export const SlotIcon: Story = {
 		type: 'success',
 		closable: true,
 		variant: 'tonal',
-		default: 'Alert content',
+		default: 'Contenu de l\'alerte',
 		icon: 'M21.1,12.5L22.5,13.91L15.97,20.5L12.5,17L13.9,15.59L15.97,17.67L21.1,12.5M10,17L13,20H3V18C3,15.79 6.58,14 11,14L12.89,14.11L10,17M11,4A4,4 0 0,1 15,8A4,4 0 0,1 11,12A4,4 0 0,1 7,8A4,4 0 0,1 11,4Z',
 	},
 	render: (args) => {
@@ -191,7 +198,7 @@ export const SlotIcon: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center justify-center">
-					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
+					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable" style="width: 100%">
 						<template #default>{{ args.default }}</template>
 						<template #icon>{{ args.icon }}</template>
 					</SyAlert>