@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/src/components/NirField/examples//342/200/257dataset/342/200/257.md

@@ -0,0 +1,12 @@
+| #  | Input             | Expected Result | Description                                                                                   |
+|----|-------------------|-----------------|-----------------------------------------------------------------------------------------------|
+| 1  | 1840275123456 74   | valid           | NIR complet avec clé correcte (ex. homme né en 1984, département 75...).                     |
+| 2  | 2910256012345 46   | valid           | NIR complet avec clé correcte (ex. femme née en 1991, département 25...).                    |
+| 3  | 198012312345690   | valid           | NIR complet (ex. homme né en 1980, département 12...), clé calculée et valide.               |
+| 4  | 2551299123457 80   | valid           | NIR complet (ex. femme née en 1951, département 29...).                                      |
+| 5  | 2100121101003 73   | valid           | NIR complet (ex. femme née en 2000, département 21...).                                      |
+| 6  | 3840275123456 74   | invalid         | Le premier chiffre (3) n'est pas valide (doit être 1 ou 2).                                  |
+| 7  | 1841375123456 74   | invalid         | Le mois 13 est invalide (doit être compris entre 01 et 12).                                  |
+| 8  | 1840275123456 73   | invalid         | Clé de contrôle incorrecte (73 au lieu de 74).                                               |
+| 9  | 1840A75123456 74   | invalid         | Contient une lettre 'A' dans la chaîne, format strictement numérique attendu.                |
+| 10 | 1840275123456     | invalid         | Chaîne trop courte (13 chiffres sans clé). Le NIR doit comporter 15 chiffres.                |

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

@@ -2,12 +2,20 @@ import { mount } from '@vue/test-utils'
 import NirField from '../NirField.vue'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { useValidation } from '@/composables/validation/useValidation'
 
-const vuetify = createVuetify()
+const vuetify = createVuetify({
+	components,
+	directives,
+})
 
 describe('NirField.vue', () => {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-	let wrapper: any
+	let wrapper: ReturnType<typeof mount<typeof NirField & {
+		numberValidation: ReturnType<typeof useValidation>
+		keyValidation: ReturnType<typeof useValidation>
+	}>>
 
 	beforeEach(() => {
 		wrapper = mount(NirField, {
@@ -15,106 +23,134 @@ describe('NirField.vue', () => {
 				plugins: [vuetify],
 			},
 			props: {
-				modelValue: '',
+				modelValue: undefined,
 				required: true,
 				showSuccessMessages: true,
+				outlined: true,
 			},
 		})
 	})
 
 	it('renders correctly', () => {
 		expect(wrapper.exists()).toBe(true)
-		expect(wrapper.find('.vd-number-field').exists()).toBe(true)
-		expect(wrapper.find('.vd-key-field').exists()).toBe(true)
+		expect(wrapper.find('.number-field').exists()).toBe(true)
+		expect(wrapper.find('.key-field').exists()).toBe(true)
 	})
 
 	it('displays error message for invalid NIR length', async () => {
-		const numberField = wrapper.find('.vd-number-field input')
-		await numberField.setValue('123') // Invalid length
-		await numberField.trigger('blur')
-		expect(wrapper.find('.v-messages__message').text()).toContain('Le numéro de sécurité sociale doit contenir 13 caractères.')
+		await wrapper.find('.number-field input').setValue('123')
+		await wrapper.find('.number-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.numberValidation.errors.value[0]).toBe('Le numéro de sécurité sociale est invalide.')
 	})
 
 	it('validates the NIR field successfully', async () => {
-		const numberField = wrapper.find('.vd-number-field input')
-		await numberField.setValue('2940375120005') // Valid NIR length
-		expect(wrapper.find('.v-messages__message--success').exists()).toBe(true)
+		await wrapper.find('.number-field input').setValue('2940375120005')
+		await wrapper.find('.number-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.numberValidation.successes.value).toContain('Le numéro de sécurité sociale est valide.')
 	})
 
 	it('displays error message for invalid key length', async () => {
-		const numberField = wrapper.find('.vd-number-field input')
-		await numberField.setValue('2940375120005') // Valid NIR length
-		const keyField = wrapper.find('.vd-key-field input')
-		await keyField.setValue('1') // Invalid length
-		await keyField.trigger('blur')
-		expect(wrapper.find('.v-messages__message').text()).toContain('La clé du numéro de sécurité sociale doit contenir 2 caractères.')
+		await wrapper.find('.number-field input').setValue('2940375120005')
+		await wrapper.find('.key-field input').setValue('1')
+		await wrapper.find('.key-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.keyValidation.errors.value[0]).toBe('La clé du numéro de sécurité sociale est invalide.')
 	})
 
 	it('validates the key field successfully', async () => {
-		const numberField = wrapper.find('.vd-number-field input')
-		const keyField = wrapper.find('.vd-key-field input')
-		await numberField.setValue('2940375120005')
-		await keyField.setValue('91')
-		expect(wrapper.find('.v-messages__message--success').exists()).toBe(true)
+		await wrapper.find('.number-field input').setValue('2940375120005')
+		await wrapper.find('.key-field input').setValue('91')
+		await wrapper.find('.key-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.keyValidation.successes.value).toContain('Le champ Clé est valide.')
 	})
 
 	it('hides the key field when displayKey is false', async () => {
 		await wrapper.setProps({ displayKey: false })
-		expect(wrapper.find('.vd-key-field').exists()).toBe(false)
+		expect(wrapper.find('.key-field').exists()).toBe(false)
 	})
 
 	it('calls validateOnSubmit and returns true if no errors', async () => {
-		const numberField = wrapper.find('.vd-number-field input')
-		const keyField = wrapper.find('.vd-key-field input')
+		wrapper = mount(NirField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: undefined,
+				required: false,
+				outlined: true,
+			},
+		})
 
+		const numberField = wrapper.find('.number-field input')
 		await numberField.setValue('2940375120005')
-		await keyField.setValue('91')
+		await numberField.trigger('blur')
 
 		await wrapper.vm.$nextTick()
-
-		wrapper.vm.validateFields()
-
-		const isValid = wrapper.vm.validateOnSubmit()
+		const isValid = await wrapper.vm.validateOnSubmit()
 
 		expect(isValid).toBe(true)
-		expect(wrapper.vm.errors.length).toBe(0)
 	})
+
 	it('applies custom key rules when provided', async () => {
-		const customKeyRules = [
-			{
-				type: 'custom',
-				options: {
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-					validate: (value: any) => value === '91',
-					message: 'Custom key validation failed.',
-					successMessage: 'Custom key validation passed.',
-				},
+		const customKeyRules = [{
+			type: 'custom',
+			options: {
+				validate: (value: string) => value === '91',
+				message: 'Custom key validation failed.',
+				successMessage: 'Custom key validation passed.',
+				fieldIdentifier: 'clé',
 			},
-		]
+		}]
 
 		wrapper = mount(NirField, {
 			global: {
 				plugins: [vuetify],
 			},
 			props: {
-				modelValue: '',
-				required: true,
+				modelValue: undefined,
 				customKeyRules,
+				showSuccessMessages: true,
+				outlined: true,
 			},
 		})
-		const numberField = wrapper.find('.vd-number-field input')
-		const keyField = wrapper.find('.vd-key-field input')
+
+		const numberField = wrapper.find('.number-field input')
+		const keyField = wrapper.find('.key-field input')
 		await numberField.setValue('2940375120005')
 		await keyField.setValue('91')
-
+		await keyField.trigger('blur')
 		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.keyValidation.successes.value).toContain('Custom key validation passed.')
+	})
 
-		expect(wrapper.vm.errors.length).toBe(0)
-		expect(wrapper.vm.successes).toContain('Custom key validation passed.')
+	it('emits update:modelValue with correct format', async () => {
+		const numberField = wrapper.find('.number-field input')
+		const keyField = wrapper.find('.key-field input')
+		await numberField.setValue('2940375120005')
+		await wrapper.vm.$nextTick()
+		await keyField.setValue('91')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('update:modelValue')?.slice(-1)[0]).toEqual(['294037512000591'])
+	})
 
-		await keyField.setValue('11')
+	it('emits undefined when both fields are empty', async () => {
+		const numberField = wrapper.find('.number-field input')
+		const keyField = wrapper.find('.key-field input')
+		await numberField.setValue('')
+		await keyField.setValue('')
 		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([undefined])
+	})
 
-		expect(wrapper.vm.errors).toContain('Custom key validation failed.')
+	it('splits modelValue correctly when provided', async () => {
+		await wrapper.setProps({ modelValue: '294037512000591' })
+		await wrapper.vm.$nextTick()
+		const numberInput = wrapper.find('.number-field input').element as HTMLInputElement
+		const keyInput = wrapper.find('.key-field input').element as HTMLInputElement
+		expect(numberInput.value.replace(/\s/g, '')).toBe('2940375120005')
+		expect(keyInput.value).toBe('91')
 	})
 })

package/src/components/NirField/tests/config.spec.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest'
+import defaultOptions from '../config'
+
+describe('NirField config', () => {
+	it('should have the correct default options structure', () => {
+		expect(defaultOptions).toHaveProperty('persistentHint')
+		expect(defaultOptions).toHaveProperty('validateOn')
+		expect(defaultOptions).toHaveProperty('icon')
+		expect(defaultOptions).toHaveProperty('tooltip')
+	})
+
+	it('should have the correct persistentHint configuration', () => {
+		expect(defaultOptions.persistentHint).toEqual({
+			persistentHint: true,
+		})
+	})
+
+	it('should have the correct validateOn configuration', () => {
+		expect(defaultOptions.validateOn).toEqual({
+			validateOn: 'blur',
+		})
+	})
+
+	it('should have the correct icon configuration', () => {
+		expect(defaultOptions.icon).toEqual({
+			color: '',
+		})
+	})
+
+	it('should have the correct tooltip configuration', () => {
+		expect(defaultOptions.tooltip).toEqual({
+			location: 'top',
+		})
+	})
+
+	it('should be immutable when imported', () => {
+		// Vérifier que l'objet ne peut pas être modifié après import
+		const originalTooltipLocation = defaultOptions.tooltip.location
+
+		// Tentative de modification
+		const testFunc = () => {
+			defaultOptions.tooltip.location = 'bottom'
+		}
+
+		// En mode strict, la modification d'une propriété en lecture seule devrait lever une erreur
+		// En mode non-strict, la modification ne devrait pas être effective
+		try {
+			testFunc()
+			// Si pas d'erreur, vérifions que la valeur n'a pas changé
+			expect(defaultOptions.tooltip.location).toBe(originalTooltipLocation)
+		}
+		catch (e) {
+			// Si une erreur est levée, c'est que l'objet est correctement protégé
+			expect(e).toBeTruthy()
+		}
+	})
+
+	it('should be used correctly in the component', () => {
+		// Ce test est un placeholder pour vérifier l'intégration avec le composant
+		// Dans un cas réel, on pourrait monter le composant et vérifier que les options
+		// par défaut sont correctement appliquées
+		expect(defaultOptions.validateOn.validateOn).toBe('blur')
+		expect(defaultOptions.persistentHint.persistentHint).toBe(true)
+	})
+})

package/src/components/NotificationBar/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/NotificationBar.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Correctifs en cours (<a href="https://github.com/assurance-maladie-digital/design-system/issues/3967" target="_blank" style="color:#0C41BD;">issue #3967</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/NotificationBar/NotificationBar.mdx

@@ -31,8 +31,8 @@ import * as NotificationBarStories from './NotificationBar.stories';
 <script setup lang="ts">
 	import { VBtn } from 'vuetify/components'
 	import { NotificationBar } from '@cnamts/synapse'
-	import { useNotificationService } from '@cnamts/synapse/src/services/NotificationService'
-	import type { Notification } from '@cnamts/synapse/src/components/NotificationBar/types'
+	import { useNotificationService } from '@cnamts/synapse'
+	import type { Notification } from '@cnamts/synapse'
 
 	const { addNotification } = useNotificationService()
 

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -115,7 +115,6 @@ Default.args = {
 	closeBtnText: 'Fermer',
 	type: 'info',
 	bottom: false,
-	rounded: 'rounded',
 }
 
 Default.parameters = {
@@ -128,7 +127,6 @@ Default.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="rounded"
 					:type="type"
 				>
 					<template #default>This is a {{ type }} notification</template>
@@ -150,7 +148,7 @@ Default.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -186,7 +184,6 @@ Success.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="rounded"
 					type="success"
 				>
 					<template #default>This is a success notification</template>
@@ -208,7 +205,7 @@ Success.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -244,7 +241,6 @@ Warning.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="rounded"
 					type="warning"
 				>
 					<template #default>This is a warning notification</template>
@@ -266,7 +262,7 @@ Warning.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -302,7 +298,6 @@ Error.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="rounded"
 					type="error"
 				>
 					<template #default>This is an error notification</template>
@@ -324,7 +319,7 @@ Error.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -360,7 +355,6 @@ Bottom.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="true"
-					:rounded="rounded"
 					:type="type"
 				>
 					<template #default>This is a bottom-positioned notification</template>
@@ -382,7 +376,7 @@ Bottom.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -418,7 +412,7 @@ CustomCloseBtnText.parameters = {
 					v-model="showNotification"
 					close-btn-text="Masquer"
 					:bottom="bottom"
-					:rounded="rounded"
+					:rounded="pill"
 					:type="type"
 				>
 					<template #default>This is a notification with custom close button text</template>
@@ -440,7 +434,7 @@ CustomCloseBtnText.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -460,3 +454,62 @@ CustomCloseBtnText.parameters = {
 		},
 	],
 }
+
+export const Customization: Story = Default.bind({})
+Customization.args = {
+	...Default.args,
+	rounded: 'pill',
+	type: 'success',
+}
+Customization.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<div class="d-flex flex-wrap align-center justify-center">
+				<NotificationBar
+					v-model="showNotification"
+					:close-btn-text="closeBtnText"
+					:bottom="bottom"
+					:rounded="pill"
+					type="success"
+				>
+					<template #default>This is a success notification</template>
+				</NotificationBar>
+				<VBtn
+					color="success"
+					@click="envoyerNotification('This is a success notification')"
+					class="ma-6"
+				>
+					Afficher la notification
+				</VBtn>
+			</div>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { VBtn } from 'vuetify/components'
+				import { NotificationBar } from '@cnamts/synapse'
+				import { ref } from 'vue'
+				import { useNotificationService } from '@cnamts/synpase'
+
+				const { addNotification } = useNotificationService()
+				const showNotification = ref(false)
+
+				const envoyerNotification = (message: string) => {
+					const notification = {
+						id: Date.now().toString(),
+						message,
+						type: 'success',
+						timeout: -1,
+					}
+					addNotification(notification)
+					showNotification.value = true
+				}
+			</script>
+			`,
+		},
+	],
+}