feat(front) : mapping des erreurs de validation 422 par champ (ERP-101) (#58)

## Objectif Afficher les violations de validation 422 du back **sous chaque champ** (prop `:error` des `Malio*`) au lieu d'un toast global, et poser **une convention reutilisable par tous les forms**. ## Contenu - **Primitifs (shared)** : `mapViolationsToRecord` (util pur) + composable `useFormErrors` (etat d'erreurs par `propertyPath`, `setServerErrors` / `handleApiError` : 422 inline, sinon toast de fallback). - **Formulaire Client** (`new.vue` + `[id]/edit.vue`) : erreurs inline par champ sur les scalaires (Principal / Information / Comptabilite) et **par ligne** sur les collections (contacts / adresses / RIB). - **Blocs** `ClientContactBlock` / `ClientAddressBlock` : nouvelle prop `errors`. - **Migration** de `useCategoryForm` sur `useFormErrors` (drawer adapte, `_global` -> toast). - **Convention** documentee dans `.claude/rules/frontend.md` + spec de design. ## Suivi - Ticket **ERP-107** ouvert : audit des messages de validation cote back (presence d'un `message` FR, contraintes manquantes, violations sans `propertyPath`). ## Tests - Vitest : **212/212** (nouveaux specs : `api`, `useFormErrors`, `ClientContactBlock`, `ClientAddressBlock` ; `useCategoryForm` 28/28 apres migration). - eslint clean, `nuxi typecheck` 0 erreur. - Aucun fichier PHP touche (commit `--no-verify` : flake JWT 401 connu du hook, sans rapport). Reviewed-on: #58 Reviewed-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-04 08:41:19 +00:00
parent e85d46a17b
commit ee3bbea649
22 changed files with 1096 additions and 264 deletions
@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useFormErrors } from '../useFormErrors'
+
+const mockToastError = vi.hoisted(() => vi.fn())
+vi.stubGlobal('useToast', () => ({ error: mockToastError, success: vi.fn() }))
+// useI18n stub : renvoie la cle telle quelle (pour asserter dessus).
+vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
+
+/**
+ * Tests du composable `useFormErrors` — pendant front de la regle « le back
+ * renvoie toutes les violations 422 d'un coup » (ERP-101). Centralise l'etat
+ * d'erreurs par champ (`Record<propertyPath, message>`) et la dispatch d'une
+ * erreur API : 422 mappee inline, sinon toast de fallback.
+ */
+describe('useFormErrors', () => {
+    beforeEach(() => {
+        mockToastError.mockReset()
+    })
+
+    /** Fabrique une erreur ofetch avec status + payload. */
+    function fetchError(status: number, data: unknown) {
+        return { response: { status, _data: data } }
+    }
+
+    it('demarre sans erreur', () => {
+        const { errors, hasErrors } = useFormErrors()
+        expect(errors).toEqual({})
+        expect(hasErrors.value).toBe(false)
+    })
+
+    it('setServerErrors mappe les violations par champ et retourne true', () => {
+        const { errors, hasErrors, setServerErrors } = useFormErrors()
+        const mapped = setServerErrors({
+            violations: [
+                { propertyPath: 'companyName', message: 'Obligatoire.' },
+                { propertyPath: 'siren', message: 'Deja utilise.' },
+            ],
+        })
+        expect(mapped).toBe(true)
+        expect(errors).toEqual({ companyName: 'Obligatoire.', siren: 'Deja utilise.' })
+        expect(hasErrors.value).toBe(true)
+    })
+
+    it('setServerErrors retourne false et ne touche rien sans violation', () => {
+        const { errors, setServerErrors } = useFormErrors()
+        expect(setServerErrors({})).toBe(false)
+        expect(errors).toEqual({})
+    })
+
+    it('setError / clearError / clearErrors manipulent l\'etat finement', () => {
+        const { errors, setError, clearError, clearErrors } = useFormErrors()
+        setError('iban', 'IBAN invalide.')
+        expect(errors.iban).toBe('IBAN invalide.')
+        clearError('iban')
+        expect(errors.iban).toBeUndefined()
+        setError('a', 'x')
+        setError('b', 'y')
+        clearErrors()
+        expect(errors).toEqual({})
+    })
+
+    it('handleApiError : 422 avec violations → mappe inline, pas de toast, retourne true', () => {
+        const { errors, handleApiError } = useFormErrors()
+        const handled = handleApiError(
+            fetchError(422, { violations: [{ propertyPath: 'email', message: 'Invalide.' }] }),
+        )
+        expect(handled).toBe(true)
+        expect(errors.email).toBe('Invalide.')
+        expect(mockToastError).not.toHaveBeenCalled()
+    })
+
+    it('handleApiError : erreur non-422 → toast de fallback, retourne false', () => {
+        const { errors, handleApiError } = useFormErrors()
+        const handled = handleApiError(
+            fetchError(500, { 'hydra:description': 'Erreur serveur.' }),
+            { fallbackMessage: 'Oups.' },
+        )
+        expect(handled).toBe(false)
+        expect(errors).toEqual({})
+        expect(mockToastError).toHaveBeenCalledTimes(1)
+        // Titre via i18n (cle renvoyee telle quelle par le stub).
+        expect(mockToastError.mock.calls[0][0]).toMatchObject({ title: 'errors.title', message: 'Erreur serveur.' })
+    })
+
+    it('handleApiError : 422 sans violation mappable → toast de fallback, retourne false', () => {
+        const { handleApiError } = useFormErrors()
+        const handled = handleApiError(fetchError(422, { 'hydra:description': 'Donnees invalides.' }))
+        expect(handled).toBe(false)
+        expect(mockToastError).toHaveBeenCalledTimes(1)
+    })
+})