feat: improve error reporting for fields inside arrays

Closes: #5
vinejs · Mar 28, 2024 · 3d59dad · 3d59dad
1 parent 8ff246f
commit 3d59dad
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 10 deletions.
diff --git a/src/messages_provider/simple_messages_provider.ts b/src/messages_provider/simple_messages_provider.ts
@@ -60,7 +60,7 @@ export class SimpleMessagesProvider implements MessagesProviderContact {
     /**
      * 1st priority is given to the field messages
      */
-    const fieldMessage = this.#messages[`${field.wildCardPath}.${rule}`]
+    const fieldMessage = this.#messages[`${field.getFieldPath()}.${rule}`]
     if (fieldMessage) {
       return this.#interpolate(fieldMessage, {
         field: fieldName,
@@ -69,7 +69,18 @@ export class SimpleMessagesProvider implements MessagesProviderContact {
     }
 
     /**
-     * 2nd priority is for rule messages
+     * 2nd priority is for the wildcard path messages
+     */
+    const wildcardMessage = this.#messages[`${field.wildCardPath}.${rule}`]
+    if (wildcardMessage) {
+      return this.#interpolate(wildcardMessage, {
+        field: fieldName,
+        ...args,
+      })
+    }
+
+    /**
+     * 3rd priority is for rule messages
      */
     const ruleMessage = this.#messages[rule]
     if (ruleMessage) {

diff --git a/src/reporters/simple_error_reporter.ts b/src/reporters/simple_error_reporter.ts
@@ -55,7 +55,7 @@ export class SimpleErrorReporter implements ErrorReporterContract {
     const error: SimpleError = {
       message,
       rule,
-      field: field.wildCardPath,
+      field: field.getFieldPath(),
     }
 
     if (meta) {

diff --git a/tests/integration/schema/array.spec.ts b/tests/integration/schema/array.spec.ts
@@ -22,13 +22,13 @@ test.group('Array | array of numbers', () => {
 
     await assert.validationErrors(vine.validate({ schema, data }), [
       {
-        field: 'categories.*',
+        field: 'categories.1',
         index: 1,
         message: 'The 1 field must be a number',
         rule: 'number',
       },
       {
-        field: 'categories.*',
+        field: 'categories.2',
         index: 2,
         message: 'The 2 field must be a number',
         rule: 'number',
@@ -68,7 +68,7 @@ test.group('Array | array of objects', () => {
 
     await assert.validationErrors(vine.validate({ schema, data }), [
       {
-        field: 'contacts.*',
+        field: 'contacts.0',
         index: 0,
         message: 'The 0 field must be an object',
         rule: 'object',
@@ -142,7 +142,7 @@ test.group('Array | array of unions', () => {
 
     await assert.validationErrors(vine.validate({ schema, data }), [
       {
-        field: 'contacts.*',
+        field: 'contacts.0',
         index: 0,
         message: 'Invalid value provided for 0 field',
         rule: 'union',
@@ -202,7 +202,7 @@ test.group('Array | array of unions', () => {
 
     await assert.validationErrors(vine.validate({ schema, data }), [
       {
-        field: 'contacts.*',
+        field: 'contacts.0',
         index: 0,
         message: 'Invalid contact. Either provide an email or a phone number',
         rule: 'unknown_contact_type',
@@ -267,7 +267,7 @@ test.group('Array | array of unions', () => {
 
     await assert.validationErrors(vine.validate({ schema, data }), [
       {
-        field: 'contacts.*.email',
+        field: 'contacts.0.email',
         message: 'The email field must be a valid email address',
         rule: 'email',
       },

diff --git a/tests/unit/simple_error_reporter.spec.ts b/tests/unit/simple_error_reporter.spec.ts
@@ -61,14 +61,17 @@ test.group('Simple error reporter', () => {
         isArrayMember: true,
         name: 0,
         wildCardPath: 'scores.*',
+        getFieldPath() {
+          return `scores.0`
+        },
         parent: [],
       },
     })
 
     assert.isTrue(reporter.hasErrors)
     assert.deepEqual(reporter.errors, [
       {
-        field: 'scores.*',
+        field: 'scores.0',
         message: 'Scores are required',
         index: 0,
         rule: 'required',

diff --git a/tests/unit/simple_messages_provider.spec.ts b/tests/unit/simple_messages_provider.spec.ts
@@ -41,6 +41,20 @@ test.group('Simple messages provider | resolving messages', () => {
     )
   })
 
+  test('give priority to wildcard path message', ({ assert }) => {
+    const provider = new SimpleMessagesProvider(
+      {
+        'required': 'The field is required',
+        'users.*.username.required': 'Username is required',
+      },
+      {}
+    )
+
+    const ctx = fieldContext.create('username', undefined)
+    ctx.wildCardPath = 'users.*.username'
+    assert.equal(provider.getMessage('Enter value', 'required', ctx), 'Username is required')
+  })
+
   test('use default message when no message is provided', ({ assert }) => {
     const provider = new SimpleMessagesProvider(
       {