@cnamts/synapse 1.0.10 → 1.0.11

package/src/components/HeaderToolbar/tests/HeaderToolBar.spec.ts

@@ -1,14 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { expect, describe, it } from 'vitest'
 import HeaderToolbar from '../HeaderToolbar.vue'
-import { vuetify } from '@tests/unit/setup'
 
 describe('HeaderToolbar', () => {
 	it('renders the component with default props', () => {
 		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				leftMenu: [
 					{
@@ -33,9 +29,6 @@ describe('HeaderToolbar', () => {
 
 	it('returns a link component with href', () => {
 		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				leftMenu: [
 					{
@@ -52,9 +45,6 @@ describe('HeaderToolbar', () => {
 
 	it('returns a link component with to', () => {
 		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				leftMenu: [
 					{
@@ -70,22 +60,14 @@ describe('HeaderToolbar', () => {
 	})
 
 	it('hides the overlay', async () => {
-		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(HeaderToolbar)
 
 		await wrapper.vm.hideOverlay()
 		expect(wrapper.vm.showOverlay).toBe(false)
 	})
 
 	it('toggles the overlay when handleLink is called', async () => {
-		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(HeaderToolbar)
 
 		await wrapper.vm.handleLink(1)
 		expect(wrapper.vm.showOverlay).toBe(true)
@@ -95,22 +77,14 @@ describe('HeaderToolbar', () => {
 	})
 
 	it('sets the active link correctly', async () => {
-		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(HeaderToolbar)
 
 		await wrapper.vm.checkActiveLink(1)
 		expect(wrapper.vm.activeIndex).toBe(1)
 	})
 
 	it('should set showOverlay to true when handleLink is called', async () => {
-		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(HeaderToolbar)
 
 		await wrapper.vm.handleLink(1)
 		await wrapper.vm.checkActiveLink(1)
@@ -120,11 +94,7 @@ describe('HeaderToolbar', () => {
 	})
 
 	it('hides the overlay when hideOverlay is called', async () => {
-		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(HeaderToolbar)
 
 		wrapper.vm.showOverlay = true
 		await wrapper.vm.hideOverlay()
@@ -133,11 +103,7 @@ describe('HeaderToolbar', () => {
 	})
 
 	it('should set showOverlay to false when handleLink is called', async () => {
-		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(HeaderToolbar)
 
 		await wrapper.vm.handleLink(0)
 		await wrapper.vm.checkActiveLink(0)
@@ -148,9 +114,6 @@ describe('HeaderToolbar', () => {
 
 	it('should set highlightMenu to false when handleLink is called', async () => {
 		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				leftMenu: [
 					{
@@ -183,11 +146,7 @@ describe('HeaderToolbar', () => {
 	})
 
 	it('should set activeIndex to -1 when deleteActiveLink is called', async () => {
-		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(HeaderToolbar)
 
 		await wrapper.vm.deleteActiveLink()
 
@@ -196,9 +155,6 @@ describe('HeaderToolbar', () => {
 
 	it('should set highlightMenu to false when activeSelected is equal to Professionnel de santé', async () => {
 		const wrapper = mount(HeaderToolbar, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				leftMenu: [
 					{

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

@@ -1,16 +1,8 @@
 import { mount, VueWrapper } from '@vue/test-utils'
 import LangBtn from '../LangBtn.vue'
 import { describe, it, expect, afterEach, vi } from 'vitest'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
 import ISO6391 from 'iso-639-1'
 
-const vuetify = createVuetify({
-	components,
-	directives,
-})
-
 describe('LangBtn', () => {
 	let wrapper: VueWrapper
 
@@ -25,9 +17,6 @@ describe('LangBtn', () => {
 			props: {
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		expect(wrapper.html()).toMatchSnapshot()
@@ -38,9 +27,6 @@ describe('LangBtn', () => {
 			props: {
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 		expect(wrapper.find('.vd-lang-btn').text()).toBe('Français')
 	})
@@ -51,9 +37,6 @@ describe('LangBtn', () => {
 				modelValue: 'co',
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 		expect(wrapper.find('.vd-lang-btn').text()).toBe('corsu')
 	})
@@ -64,9 +47,6 @@ describe('LangBtn', () => {
 				modelValue: 'fr',
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		expect(wrapper.find('.vd-lang-btn').text()).toBe('Français')
@@ -83,9 +63,6 @@ describe('LangBtn', () => {
 				availableLanguages: ['fr', 'co', 'es'],
 				modelValue: 'es',
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -107,9 +84,6 @@ describe('LangBtn', () => {
 			props: {
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -129,9 +103,6 @@ describe('LangBtn', () => {
 				hideDownArrow: true,
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 		expect(wrapper.find('.v-icon').exists()).toBe(false)
 	})
@@ -142,9 +113,6 @@ describe('LangBtn', () => {
 				hideDownArrow: false,
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 		expect(wrapper.find('.v-icon').exists()).toBe(true)
 	})
@@ -154,9 +122,6 @@ describe('LangBtn', () => {
 			props: {
 				availableLanguages: '*',
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -177,9 +142,6 @@ describe('LangBtn', () => {
 			props: {
 				availableLanguages: languages,
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -205,9 +167,6 @@ describe('LangBtn', () => {
 			props: {
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		const button = wrapper.find('.vd-lang-btn')
@@ -220,9 +179,6 @@ describe('LangBtn', () => {
 				ariaLabel: 'Language selection',
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		const button = wrapper.find('.vd-lang-btn')
@@ -235,9 +191,6 @@ describe('LangBtn', () => {
 				modelValue: 'unknown',
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		expect(wrapper.find('.vd-lang-btn').text()).toBe('unknown')
@@ -254,9 +207,6 @@ describe('LangBtn', () => {
 				modelValue: 'xx',
 				availableLanguages: ['xx'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		expect(wrapper.find('.vd-lang-btn').text()).toBe('xx')
@@ -270,9 +220,6 @@ describe('LangBtn', () => {
 			props: {
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		expect(wrapper.find('.vd-lang-btn').text()).toBe('Français')
@@ -290,9 +237,6 @@ describe('LangBtn', () => {
 			props: {
 				availableLanguages: ['fr', 'co', 'es'],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 

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

@@ -2,15 +2,12 @@ import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 
 import LogoBrandSection from '../LogoBrandSection.vue'
-import { vuetify } from '@tests/unit/setup'
 
 describe('LogoBrandSection', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				serviceTitle: 'Service Title',
@@ -29,9 +26,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with service computed', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				serviceTitle: 'Service Title',
@@ -45,9 +40,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with service computed', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'compte-entreprise',
 			},
@@ -59,9 +52,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with height', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				serviceTitle: 'Service Title',
@@ -81,9 +72,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with showServiceSubTitle', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				serviceTitle: 'Service Title',
@@ -97,9 +86,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with no showServiceSubTitle', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				serviceTitle: 'Service Title',
@@ -113,9 +100,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with default theme', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -129,9 +114,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with cnam theme', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'cnam',
 				serviceTitle: 'Service Title',
@@ -146,9 +129,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with compte entreprise theme', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'compte-entreprise',
 				serviceTitle: 'Service Title',
@@ -163,9 +144,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with risquePro if no reduceLogo', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'risque-pro',
 				reduceLogo: false,
@@ -179,9 +158,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with risquePro', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'risque-pro',
 				reduceLogo: true,
@@ -194,9 +171,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with isCompteEntreprise', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'compte-entreprise',
 			},
@@ -208,9 +183,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with isCompteAmeliMobile', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'compte-ameli',
 				mobileVersion: true,
@@ -224,9 +197,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly without signature', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				reduceLogo: true,
@@ -239,9 +210,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly without hideSignature', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				reduceLogo: false,
@@ -254,9 +223,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with secondaryLogo', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				stubs: ['RouterLink', 'Logo'],
-				plugins: [vuetify],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'compte-ameli',
 			},
@@ -268,9 +235,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with logoContainerComponent', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				homeLink: {
@@ -285,9 +250,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly RouterLink with logoContainerComponent', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				homeLink: {
@@ -302,9 +265,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with logoContainerComponent', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 				homeLink: {
@@ -320,9 +281,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with secondaryLogoCtnComponent', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'default',
 			},
@@ -334,9 +293,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with secondaryLogoCtnComponent', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'ameli-pro',
 			},
@@ -348,9 +305,7 @@ describe('LogoBrandSection', () => {
 	it('renders correctly with secondaryLogoCtnComponent', () => {
 		const wrapper = mount(LogoBrandSection, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink', 'Logo'],
-			},
+				stubs: ['RouterLink', 'Logo'] },
 			props: {
 				theme: 'ameli',
 				homeLink: {

package/src/components/NirField/NirField.stories.ts

@@ -1148,6 +1148,7 @@ Cette story montre l'utilisation du NirField dans un formulaire avec validation.
 		v-model="value"
 		label="NirField"
 		required
+		:displayKey="false"
 		showSuccessMessages
 		ref="nirField"
 	/>
@@ -1210,6 +1211,7 @@ const onSubmit = async () => {
 					label="NirField"
 					required
 					showSuccessMessages
+                    :displayKey="false"
 					ref="nirField"
 				/>
 				<v-btn

package/src/components/NirField/NirField.vue

@@ -86,6 +86,9 @@
 	const numberValue = ref('')
 	const keyValue = ref('')
 
+	// Flag pour éviter les boucles infinies lors de la synchronisation
+	const isInternalUpdate = ref(false)
+
 	// Refs pour les champs
 	const keyField = ref<InstanceType<typeof SyTextField> | null>(null)
 	const numberField = ref<InstanceType<typeof SyTextField> | null>(null)
@@ -154,13 +157,15 @@
 	})
 
 	watch(unmaskedKeyValue, (newValue) => {
-		if (newValue.length === 0) {
+		if (newValue.length === 0 && props.displayKey) {
 			focusField(numberField)
 		}
 	})
 
 	// Watch pour détecter la suppression des chiffres de la clé
 	watch(keyValue, (newValue, oldValue) => {
+		if (!props.displayKey) return
+
 		// Si l'ancienne valeur avait des chiffres et la nouvelle est vide ou ne contient que des espaces
 		if (oldValue && newValue !== null && oldValue.trim() && !newValue.trim()) {
 			focusField(numberField)
@@ -279,6 +284,9 @@
 
 	// Synchronisation avec modelValue
 	watch(modelValueRef, (newValue) => {
+		// Ignorer les mises à jour internes pour éviter les boucles infinies
+		if (isInternalUpdate.value) return
+
 		if (newValue === undefined || newValue === null) {
 			numberValue.value = ''
 			keyValue.value = ''
@@ -308,12 +316,20 @@
 		const number = unmaskedNumberValue.value
 		const key = unmaskedKeyValue.value
 
+		// Marquer comme mise à jour interne pour éviter la boucle
+		isInternalUpdate.value = true
+
 		if (!number && !key) {
 			emit('update:modelValue', undefined)
-			return
+		}
+		else {
+			emit('update:modelValue', `${number}${key}`)
 		}
 
-		emit('update:modelValue', `${number}${key}`)
+		// Réactiver la synchronisation au prochain tick
+		nextTick(() => {
+			isInternalUpdate.value = false
+		})
 	}
 
 	// État pour suivre si une validation est en cours
@@ -416,7 +432,7 @@
 		debouncedValidate()
 
 		// Si on supprime le contenu de la clé, on revient au champ NIR
-		if (unmaskedKeyValue.value.length === 0) {
+		if (props.displayKey && unmaskedKeyValue.value.length === 0) {
 			nextTick(() => {
 				numberField.value?.$el?.querySelector?.('input')?.focus()
 			})
@@ -454,30 +470,37 @@
 
 	// Ajouter des écouteurs d'événements keydown aux champs NIR après le montage du composant
 	onMounted(() => {
-		// Attendre que les refs soient disponibles
-		nextTick(() => {
-			// Ajouter l'écouteur d'événement au premier champ NIR
-			const numberInput = numberField.value?.$el?.querySelector?.('input')
-			if (numberInput) {
-				numberInput.addEventListener('keydown', handleNumberKeydown)
-			}
-
-			// Si le composant est en mode withoutFieldset, ajouter l'écouteur au deuxième champ NIR
-			if (props.withoutFieldset) {
-				// Attendre un peu pour s'assurer que le DOM est complètement rendu
-				setTimeout(() => {
-					const fieldsetNumberInput = container.value?.querySelector('.number-field input')
-					if (fieldsetNumberInput) {
-						fieldsetNumberInput.addEventListener('keydown', handleNumberKeydown)
-					}
-				}, 100)
-			}
-		})
+		// N'ajouter l'écouteur keydown QUE si on affiche la clé
+		if (props.displayKey) {
+			// Attendre que les refs soient disponibles
+			nextTick(() => {
+				// Ajouter l'écouteur d'événement au premier champ NIR
+				const numberInput = numberField.value?.$el?.querySelector?.('input')
+				if (numberInput) {
+					numberInput.addEventListener('keydown', handleNumberKeydown)
+				}
+
+				// Si le composant est en mode withoutFieldset, ajouter l'écouteur au deuxième champ NIR
+				if (props.withoutFieldset) {
+					// Attendre un peu pour s'assurer que le DOM est complètement rendu
+					setTimeout(() => {
+						const fieldsetNumberInput = container.value?.querySelector('.number-field input')
+						if (fieldsetNumberInput) {
+							fieldsetNumberInput.addEventListener('keydown', handleNumberKeydown)
+						}
+					}, 100)
+				}
+			})
+		}
 	})
 
 	onBeforeUnmount(() => {
-		const numberInput = numberField.value?.$el?.querySelector?.('input')
-		numberInput.removeEventListener('keydown', handleNumberKeydown)
+		if (props.displayKey) {
+			const numberInput = numberField.value?.$el?.querySelector?.('input')
+			if (numberInput) {
+				numberInput.removeEventListener('keydown', handleNumberKeydown)
+			}
+		}
 	})
 
 	// Rendre le composant auto-validable dans un SyForm