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

- composable useFormErrors + util mapViolationsToRecord (shared) - formulaire Client (new + edit) : erreurs inline par champ (scalaires) et par ligne pour les collections (contacts / adresses / RIB) - blocs ClientContactBlock / ClientAddressBlock : prop errors - migration de useCategoryForm sur useFormErrors - convention documentee dans .claude/rules/frontend.md
2026-06-04 08:24:39 +02:00
parent e85d46a17b
commit 502d1a216b
15 changed files with 910 additions and 212 deletions
@@ -74,3 +74,59 @@ describe('ClientAddressBlock — affichage de l\'adresse persistee', () => {
        expect(values).toContain('8 Boulevard du Port')
    })
 })
+
+/**
+ * Stub MalioInputText qui re-expose `label` + `error` recus : permet de cibler
+ * un champ par son libelle et de verifier l'erreur 422 propagee (ERP-101).
+ */
+const MalioInputTextProbe = defineComponent({
+    name: 'MalioInputTextProbe',
+    props: {
+        modelValue: { type: [String, Number, null], default: undefined },
+        error: { type: String, default: '' },
+        label: { type: String, default: '' },
+        readonly: { type: Boolean, default: false },
+    },
+    setup(props) {
+        return () => h('div', {
+            'data-testid': 'addr-text',
+            'data-label': props.label,
+            'data-error': props.error,
+        })
+    },
+})
+
+describe('ClientAddressBlock — mapping erreur par champ (ERP-101)', () => {
+    function mountWithErrors(errors: Record<string, string>) {
+        return mount(ClientAddressBlock, {
+            props: {
+                modelValue: emptyAddress(),
+                title: 'Adresse',
+                categoryOptions: [],
+                siteOptions: [],
+                contactOptions: [],
+                countryOptions: [],
+                errors,
+            },
+            global: {
+                stubs: {
+                    MalioButtonIcon: true,
+                    MalioCheckbox: true,
+                    MalioSelect: true,
+                    MalioSelectCheckbox: true,
+                    MalioInputAutocomplete: MalioInputAutocompleteStub,
+                    MalioInputText: MalioInputTextProbe,
+                },
+            },
+        })
+    }
+
+    it('affiche l\'erreur serveur sur le champ code postal via la prop errors', () => {
+        const wrapper = mountWithErrors({ postalCode: 'Code postal invalide.' })
+
+        const field = wrapper.findAll('[data-testid="addr-text"]').find(
+            el => el.attributes('data-label') === 'commercial.clients.form.address.postalCode',
+        )
+        expect(field?.attributes('data-error')).toBe('Code postal invalide.')
+    })
+})