@cnamts/synapse 1.0.10 → 1.0.11

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

@@ -0,0 +1,315 @@
+import { mount } from '@vue/test-utils'
+import NirField from '../NirField.vue'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+
+/**
+ * Tests spécifiques pour la préservation de la position du curseur
+ * quand displayKey=false
+ */
+describe('NirField - Cursor Position Preservation', () => {
+	let wrapper: ReturnType<typeof mount<typeof NirField>>
+	let activeWrappers: ReturnType<typeof mount>[] = []
+
+	async function flushPromises() {
+		return new Promise(resolve => setTimeout(resolve, 0))
+	}
+
+	beforeEach(async () => {
+		wrapper = mount(NirField, {
+			props: {
+				modelValue: undefined,
+				displayKey: false, // ⚠️ Mode sans clé
+				required: false,
+				outlined: true,
+			},
+		})
+
+		activeWrappers.push(wrapper)
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+	})
+
+	afterEach(async () => {
+		await flushPromises()
+		for (const wrapper of activeWrappers) {
+			if (wrapper && typeof wrapper.unmount === 'function') {
+				wrapper.unmount()
+				await flushPromises()
+			}
+		}
+		activeWrappers = []
+		vi.resetAllMocks()
+		await flushPromises()
+	})
+
+	it('should not reposition cursor when editing middle of NIR', async () => {
+		const numberInput = wrapper.find('.number-field input')
+		const inputElement = numberInput.element as HTMLInputElement
+
+		// 1. Saisir un NIR complet
+		await numberInput.setValue('2940375120005')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// 2. Positionner le curseur au milieu (après "2940")
+		inputElement.focus()
+		inputElement.setSelectionRange(4, 4)
+
+		// Vérifier la position initiale
+		expect(inputElement.selectionStart).toBe(4)
+
+		// 3. Spy sur les méthodes qui pourraient repositionner le curseur
+		const focusSpy = vi.spyOn(inputElement, 'focus')
+		const clickSpy = vi.spyOn(inputElement, 'click')
+
+		// 4. Simuler la suppression d'un chiffre au milieu
+		// Supprimer le "4" dans "2940" -> "290"
+		const currentValue = inputElement.value.replace(/\s/g, '') // Enlever les espaces
+		const newValue = currentValue.slice(0, 3) + currentValue.slice(4) // Supprimer le 4ème caractère
+
+		await numberInput.setValue(newValue)
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// 5. Vérifier qu'aucun focus/click automatique n'a été déclenché
+		expect(focusSpy).not.toHaveBeenCalled()
+		expect(clickSpy).not.toHaveBeenCalled()
+
+		focusSpy.mockRestore()
+		clickSpy.mockRestore()
+	})
+
+	it('should not trigger watchers when displayKey is false', async () => {
+		// Spy sur console.log pour détecter d'éventuels logs de debug
+		const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+		const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus')
+
+		const numberInput = wrapper.find('.number-field input')
+
+		// Simuler des modifications qui déclencheraient normalement les watchers
+		await numberInput.setValue('123')
+		await wrapper.vm.$nextTick()
+
+		// Effacer complètement
+		await numberInput.setValue('')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Vérifier qu'aucun focus automatique n'a été déclenché
+		expect(focusSpy).not.toHaveBeenCalled()
+
+		consoleSpy.mockRestore()
+		focusSpy.mockRestore()
+	})
+
+	it('should not add our custom keydown listeners when displayKey is false', async () => {
+		// Créer un nouveau wrapper pour tester onMounted
+		const addEventListenerSpy = vi.spyOn(HTMLElement.prototype, 'addEventListener')
+
+		const newWrapper = mount(NirField, {
+			props: {
+				displayKey: false,
+				required: false,
+			},
+		})
+		activeWrappers.push(newWrapper)
+
+		await newWrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Filtrer seulement nos appels keydown spécifiques (avec handleNumberKeydown)
+		const ourKeydownListeners = addEventListenerSpy.mock.calls.filter(
+			call => call[0] === 'keydown'
+				&& call[1]
+				&& call[1].toString().includes('handleNumberKeydown'),
+		)
+
+		// Aucun de nos listeners keydown ne devrait être ajouté
+		expect(ourKeydownListeners).toHaveLength(0)
+
+		addEventListenerSpy.mockRestore()
+	})
+
+	it('should handle input changes without cursor interference', async () => {
+		const numberInput = wrapper.find('.number-field input')
+		const inputElement = numberInput.element as HTMLInputElement
+
+		// Test avec plusieurs modifications successives
+		const testValues = [
+			'1',
+			'12',
+			'123',
+			'1234',
+			'12345',
+			'123456',
+			'1234567',
+			'12345678',
+			'123456789',
+			'1234567890',
+			'12345678901',
+			'123456789012',
+			'1234567890123',
+		]
+
+		const focusSpy = vi.spyOn(inputElement, 'focus')
+
+		for (const value of testValues) {
+			await numberInput.setValue(value)
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+		}
+
+		// Aucun focus automatique ne devrait avoir été déclenché
+		expect(focusSpy).not.toHaveBeenCalled()
+
+		focusSpy.mockRestore()
+	})
+
+	it('should emit correct modelValue without cursor side effects', async () => {
+		const numberInput = wrapper.find('.number-field input')
+
+		// Saisir un NIR complet
+		await numberInput.setValue('2940375120005')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Vérifier que la valeur émise est correcte
+		const emittedValues = wrapper.emitted('update:modelValue')
+		expect(emittedValues).toBeDefined()
+
+		// La dernière valeur émise devrait être le NIR complet
+		const lastEmittedValue = emittedValues?.[emittedValues.length - 1]?.[0]
+		expect(lastEmittedValue).toBe('2940375120005')
+
+		// Vérifier qu'il n'y a pas de champ clé
+		expect(wrapper.find('.key-field').exists()).toBe(false)
+	})
+
+	it('should preserve input behavior during rapid typing', async () => {
+		const numberInput = wrapper.find('.number-field input')
+		const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus')
+
+		// Simuler une saisie rapide
+		const rapidValues = ['1', '12', '123', '1234', '12345']
+
+		for (const value of rapidValues) {
+			await numberInput.setValue(value)
+			// Pas d'attente pour simuler la saisie rapide
+		}
+
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Aucun focus automatique ne devrait interférer
+		expect(focusSpy).not.toHaveBeenCalled()
+
+		focusSpy.mockRestore()
+	})
+
+	it('should not trigger watchers on keyValue changes when displayKey is false', async () => {
+		// Spy sur les watchers internes
+		const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus')
+
+		// Accéder aux valeurs internes du composant
+		const vm = wrapper.vm as { keyValue?: string }
+
+		// Simuler un changement de keyValue (qui ne devrait pas déclencher de focus)
+		if (vm.keyValue !== undefined) {
+			vm.keyValue = '12'
+			await wrapper.vm.$nextTick()
+			vm.keyValue = ''
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+		}
+
+		// Aucun focus ne devrait être déclenché
+		expect(focusSpy).not.toHaveBeenCalled()
+
+		focusSpy.mockRestore()
+	})
+
+	it('should not interfere with masked input behavior', async () => {
+		const numberInput = wrapper.find('.number-field input')
+		const inputElement = numberInput.element as HTMLInputElement
+
+		// Spy sur les méthodes de focus qui pourraient interférer
+		const focusSpy = vi.spyOn(inputElement, 'focus')
+		const clickSpy = vi.spyOn(inputElement, 'click')
+
+		// Saisir un NIR avec masque (le masque peut gérer sa propre logique de curseur)
+		await numberInput.setValue('123456789')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Simuler une modification
+		await numberInput.trigger('input')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Vérifier que notre logique NirField n'interfère pas avec le masque
+		expect(focusSpy).not.toHaveBeenCalled()
+		expect(clickSpy).not.toHaveBeenCalled()
+
+		focusSpy.mockRestore()
+		clickSpy.mockRestore()
+	})
+
+	it('should handle backspace and delete without cursor jump', async () => {
+		const numberInput = wrapper.find('.number-field input')
+		const inputElement = numberInput.element as HTMLInputElement
+
+		// Saisir un NIR complet
+		await numberInput.setValue('2940375120005')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Positionner le curseur au milieu
+		inputElement.focus()
+		inputElement.setSelectionRange(7, 7)
+
+		const focusSpy = vi.spyOn(inputElement, 'focus')
+
+		// Simuler une suppression (backspace)
+		const backspaceEvent = new KeyboardEvent('keydown', {
+			key: 'Backspace',
+			code: 'Backspace',
+			keyCode: 8,
+		})
+		inputElement.dispatchEvent(backspaceEvent)
+
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Vérifier qu'aucun focus automatique n'a été déclenché
+		expect(focusSpy).not.toHaveBeenCalled()
+
+		focusSpy.mockRestore()
+	})
+
+	it('should not interfere with normal input events', async () => {
+		const numberInput = wrapper.find('.number-field input')
+		const inputElement = numberInput.element as HTMLInputElement
+
+		// Spy sur les événements qui pourraient interférer
+		const focusSpy = vi.spyOn(inputElement, 'focus')
+		const clickSpy = vi.spyOn(inputElement, 'click')
+
+		// Simuler plusieurs événements input successifs
+		await numberInput.setValue('1')
+		await numberInput.trigger('input')
+		await numberInput.setValue('12')
+		await numberInput.trigger('input')
+		await numberInput.setValue('123')
+		await numberInput.trigger('input')
+
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Aucune interférence ne devrait avoir lieu
+		expect(focusSpy).not.toHaveBeenCalled()
+		expect(clickSpy).not.toHaveBeenCalled()
+
+		focusSpy.mockRestore()
+		clickSpy.mockRestore()
+	})
+})

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

@@ -1,16 +1,8 @@
 import { mount } from '@vue/test-utils'
 import NirField from '../NirField.vue'
 import { describe, it, expect, beforeEach, afterEach, vi } 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({
-	components,
-	directives,
-})
-
 describe('NirField.vue', () => {
 	let wrapper: ReturnType<typeof mount<typeof NirField & {
 		numberValidation: ReturnType<typeof useValidation>
@@ -27,9 +19,6 @@ describe('NirField.vue', () => {
 
 	beforeEach(async () => {
 		wrapper = mount(NirField, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: undefined,
 				required: true,
@@ -126,9 +115,6 @@ describe('NirField.vue', () => {
 
 	it('calls validateOnSubmit and returns true if no errors', async () => {
 		const testWrapper = mount(NirField, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: undefined,
 				required: false,
@@ -162,9 +148,6 @@ describe('NirField.vue', () => {
 		}]
 
 		const customWrapper = mount(NirField, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: undefined,
 				customKeyRules,
@@ -300,4 +283,219 @@ describe('NirField.vue', () => {
 		// Restaurer le spy
 		focusSpy.mockRestore()
 	})
+
+	describe('Internal update flag protection', () => {
+		it('prevents infinite loops between watch and emitValue', async () => {
+			// Spy sur emit pour compter les appels
+			const emitSpy = vi.spyOn(wrapper.vm, '$emit')
+
+			// Définir une valeur initiale
+			await wrapper.setProps({ modelValue: '294037512000591' })
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+
+			// Réinitialiser le spy pour ne compter que les nouveaux appels
+			emitSpy.mockClear()
+
+			// Simuler une saisie utilisateur qui devrait déclencher emitValue
+			const numberField = wrapper.find('.number-field input')
+			await numberField.setValue('2940375120006') // Changer le dernier chiffre
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+
+			// Vérifier qu'il n'y a qu'un seul appel à emit (pas de boucle infinie)
+			const updateModelValueCalls = emitSpy.mock.calls.filter(call => call[0] === 'update:modelValue')
+			expect(updateModelValueCalls.length).toBeLessThanOrEqual(2) // Maximum 2 appels (un pour chaque champ)
+
+			emitSpy.mockRestore()
+		})
+
+		it('allows external modelValue changes to update internal fields', async () => {
+			// Définir une valeur initiale
+			await wrapper.setProps({ modelValue: '294037512000591' })
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+
+			// Vérifier que les champs internes sont mis à jour
+			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')
+
+			// Changer la valeur externe
+			await wrapper.setProps({ modelValue: '123456789012345' })
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+
+			// Vérifier que les champs internes sont mis à jour correctement
+			expect(numberInput.value.replace(/\s/g, '')).toBe('1234567890123')
+			expect(keyInput.value).toBe('45')
+		})
+
+		it('handles null/undefined modelValue without triggering loops', async () => {
+			// Spy sur emit pour compter les appels
+			const emitSpy = vi.spyOn(wrapper.vm, '$emit')
+
+			// Définir une valeur initiale
+			await wrapper.setProps({ modelValue: '294037512000591' })
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+
+			// Réinitialiser le spy
+			emitSpy.mockClear()
+
+			// Changer vers null
+			await wrapper.setProps({ modelValue: null })
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+
+			// Vérifier que les champs sont vidés
+			const numberInput = wrapper.find('.number-field input').element as HTMLInputElement
+			const keyInput = wrapper.find('.key-field input').element as HTMLInputElement
+
+			expect(numberInput.value).toBe('')
+			expect(keyInput.value).toBe('')
+
+			// Vérifier qu'il n'y a pas d'appels emit supplémentaires (pas de boucle)
+			const updateModelValueCalls = emitSpy.mock.calls.filter(call => call[0] === 'update:modelValue')
+			expect(updateModelValueCalls.length).toBe(0) // Aucun emit car c'est un changement externe
+
+			emitSpy.mockRestore()
+		})
+	})
+
+	describe('Cursor position preservation when displayKey=false', () => {
+		let wrapperWithoutKey: ReturnType<typeof mount<typeof NirField>>
+
+		beforeEach(async () => {
+			wrapperWithoutKey = mount(NirField, {
+				props: {
+					modelValue: undefined,
+					displayKey: false,
+					required: false,
+					outlined: true,
+				},
+			})
+
+			activeWrappers.push(wrapperWithoutKey)
+			await wrapperWithoutKey.vm.$nextTick()
+			await flushPromises()
+		})
+
+		it('does not add our custom keydown event listener when displayKey is false', async () => {
+			// Spy spécifiquement sur notre fonction handleNumberKeydown
+			const handleNumberKeydownSpy = vi.spyOn(HTMLElement.prototype, 'addEventListener')
+
+			// Remonter le composant pour déclencher onMounted
+			wrapperWithoutKey.unmount()
+			activeWrappers.pop()
+
+			const newWrapper = mount(NirField, {
+				props: {
+					displayKey: false,
+					required: false,
+				},
+			})
+			activeWrappers.push(newWrapper)
+
+			await newWrapper.vm.$nextTick()
+			await flushPromises()
+
+			// Vérifier que notre logique onMounted n'a pas ajouté d'écouteur keydown
+			// (d'autres composants peuvent en ajouter, mais pas notre logique spécifique)
+			const ourKeydownCalls = handleNumberKeydownSpy.mock.calls.filter(call =>
+				call[0] === 'keydown'
+				&& call[1]
+				&& call[1].toString().includes('handleNumberKeydown'),
+			)
+			expect(ourKeydownCalls).toHaveLength(0)
+
+			handleNumberKeydownSpy.mockRestore()
+		})
+
+		it('does not trigger focus when editing NIR without key field', async () => {
+			// Spy sur la méthode focus
+			const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus')
+
+			// Saisir un NIR complet
+			const numberInput = wrapperWithoutKey.find('.number-field input')
+			await numberInput.setValue('2940375120005')
+			await wrapperWithoutKey.vm.$nextTick()
+			await flushPromises()
+
+			// Réinitialiser le spy pour ne compter que les appels suivants
+			focusSpy.mockClear()
+
+			// Modifier un chiffre au milieu (simuler l'édition)
+			await numberInput.setValue('2940375120006')
+			await wrapperWithoutKey.vm.$nextTick()
+			await flushPromises()
+
+			// Vérifier qu'aucun focus n'a été déclenché lors de l'édition
+			expect(focusSpy).not.toHaveBeenCalled()
+
+			focusSpy.mockRestore()
+		})
+
+		it('watchers do not execute when displayKey is false', async () => {
+			// Spy sur les méthodes internes pour vérifier qu'elles ne sont pas appelées
+			const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus')
+
+			// Simuler une modification qui déclencherait normalement les watchers
+			const numberInput = wrapperWithoutKey.find('.number-field input')
+
+			// Saisir puis effacer pour déclencher les watchers
+			await numberInput.setValue('123')
+			await wrapperWithoutKey.vm.$nextTick()
+			await numberInput.setValue('')
+			await wrapperWithoutKey.vm.$nextTick()
+			await flushPromises()
+
+			// Vérifier qu'aucun focus automatique n'a été déclenché
+			expect(focusSpy).not.toHaveBeenCalled()
+
+			focusSpy.mockRestore()
+		})
+
+		it('preserves cursor position during editing when displayKey is false', async () => {
+			const numberInput = wrapperWithoutKey.find('.number-field input')
+			const inputElement = numberInput.element as HTMLInputElement
+
+			// Saisir un NIR complet
+			await numberInput.setValue('2940375120005')
+			await wrapperWithoutKey.vm.$nextTick()
+			await flushPromises()
+
+			// Simuler le positionnement du curseur au milieu (position 7)
+			inputElement.setSelectionRange(7, 7)
+
+			// Simuler une modification (suppression d'un caractère)
+			const currentValue = inputElement.value
+			const newValue = currentValue.slice(0, 7) + currentValue.slice(8)
+			await numberInput.setValue(newValue.replace(/\s/g, ''))
+			await wrapperWithoutKey.vm.$nextTick()
+			await flushPromises()
+
+			// Dans un comportement correct, le curseur ne devrait pas être forcé à la fin
+			// On vérifie que la logique de focus automatique n'interfère pas
+			expect(wrapperWithoutKey.find('.key-field').exists()).toBe(false)
+		})
+
+		it('handleKeyInput does not trigger focus when displayKey is false', async () => {
+			const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus')
+
+			// Déclencher handleKeyInput via une saisie
+			const numberInput = wrapperWithoutKey.find('.number-field input')
+			await numberInput.setValue('123')
+			await numberInput.trigger('input')
+			await wrapperWithoutKey.vm.$nextTick()
+			await flushPromises()
+
+			// Vérifier qu'aucun focus n'a été déclenché
+			expect(focusSpy).not.toHaveBeenCalled()
+
+			focusSpy.mockRestore()
+		})
+	})
 })

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

@@ -1,17 +1,11 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-
-import { vuetify } from '@tests/unit/setup'
 import { locales } from '../locales'
 import NotFoundPage from '../NotFoundPage.vue'
 
 describe('NotFoundPage', () => {
 	it('renders correctly', () => {
-		const wrapper = mount(NotFoundPage, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(NotFoundPage)
 
 		expect(wrapper.text()).toContain(locales.code)
 		expect(wrapper.text()).toContain(locales.message)
@@ -24,11 +18,7 @@ describe('NotFoundPage', () => {
 			'',
 			'/not-found?support_id=1234567890123456789',
 		)
-		const wrapper = mount(NotFoundPage, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(NotFoundPage)
 
 		await wrapper.vm.$nextTick()
 

package/src/components/NotificationBar/NotificationBar.mdx

@@ -38,7 +38,7 @@ import * as NotificationBarStories from './NotificationBar.stories';
 	import type { Notification } from '@cnamts/synapse'
 
 	const { addNotification } = useNotificationService()
-import '../../stories/styles/shared.css';
+    import '../../stories/styles/shared.css';
 
 	const envoyerNotification = (message: string, type: Notification['type']) => {
 		const notification: Notification = {

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

@@ -16,6 +16,7 @@ const meta: Meta<typeof NotificationBar> = {
 	title: 'Composants/Feedback/NotificationBar',
 	parameters: {
 		layout: 'fullscreen',
+		controls: { exclude: ['currentNotification', 'isNotificationVisible', 'hasActionSlot', 'isMobileVersion', 'hasLongContent', 'color', 'icon', 'contentStyle', 'smallCloseBtn', 'isVertical'] },
 	},
 	component: NotificationBar,
 	argTypes: {