fix: support for YUP .ref() and .when() methods

fix: #626

Author: foxhound87

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 6.12.1 (master)
+
+- Feat: Support for YUP .ref() and .when() methods
+- Fix: #626
+
 # 6.12.0 (master)
 
 - Feat: validation package type inference when extending validation plugins

src/utils.ts

@@ -164,13 +164,11 @@ const hasFiles = ($: any): boolean =>
 const isBool = ($: any, val: any): boolean =>
   _.isBoolean(val) && _.isBoolean($.target.checked);
 
-const $try = (...args: any) => {
-  let found: any | null | undefined = undefined;
-
-  args.map(( val: any ) =>
-    found === undefined && !_.isUndefined(val) && (found = val));
-
-  return found;
+const $try = (...args: any[]) => {
+  for (const val of args) {
+    if (val !== undefined) return val;
+  }
+  return undefined;
 };
 
 export {

src/validators/YUP.ts

@@ -46,16 +46,13 @@ class YUP<TValidator = any> implements ValidationPluginInterface {
 
   // Creazione della promise per la validazione
   private createValidationPromise(field: any): Promise<any> {
-    return new Promise((resolve) =>
-      (this.validator as any)
-        .reach(this.schema, field.path)
-        .label(field.label)
-        .validate(field.validatedValue, { strict: true })
+    return new Promise((resolve) => {
+      this.schema
+        .validateAt(field.path, this.state.form.values(), { strict: true })
         .then(() => this.handleAsyncPasses(field, resolve))
-        .catch((error) => this.handleAsyncFails(field, resolve, error))
-    );
+        .catch((error) => this.handleAsyncFails(field, resolve, error));
+    });
   }
-
   // Gestione dei successi della validazione asincrona
   private handleAsyncPasses(field: any, resolve: Function): void {
     field.setValidationAsyncData(true);
@@ -64,9 +61,16 @@ class YUP<TValidator = any> implements ValidationPluginInterface {
 
   // Gestione dei fallimenti della validazione asincrona
   private handleAsyncFails(field: any, resolve: Function, error: any): void {
-    field.setValidationAsyncData(false, error.errors[0]);
-    this.executeAsyncValidation(field);
-    resolve();
+    // Yup a volte restituisce errori senza path (es. array vuoti)
+    const isSameField = error.path === field.path || error.path === undefined;
+
+    if (isSameField) {
+      const message = error.message?.replace(error.path ?? field.path, field.label);
+      field.setValidationAsyncData(false, message);
+      this.executeAsyncValidation(field);
+    }
+
+    resolve(undefined);
   }
 
   // Esecuzione della validazione asincrona

tests/data/_.fixes.ts

@@ -47,6 +47,9 @@ import $519 from "./forms/fixes/form.519";
 import $585 from "./forms/fixes/form.585";
 import $531 from "./forms/fixes/form.531";
 
+import { form626a as $626a } from "./forms/fixes/form.626a";
+import { form626b as $626b } from "./forms/fixes/form.626b";
+
 export default {
   $formEmptyConstructor,
   $A,
@@ -92,4 +95,7 @@ export default {
 
   $585,
   $531,
+
+  $626a,
+  $626b,
 };

tests/data/forms/fixes/form.626a.ts

@@ -0,0 +1,60 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import * as yup from 'yup';
+import Form from '../../../../src';
+import $yup from "../../../../src/validators/YUP";
+
+const plugins = {
+  dvr: $yup({
+    package: yup,
+    schema: (y: any) =>
+      y.object().shape({
+        password: y.string().required('Password is required'),
+        passwordConfirm: y
+          .string()
+          .required('Confirm password is required')
+          .oneOf([y.ref('password')], 'Passwords must match'),
+      }),
+  }),
+};
+
+const fields = [
+  {
+    name: 'password',
+    label: 'Password',
+    placeholder: 'Enter password',
+  },
+  {
+    name: 'passwordConfirm',
+    label: 'Confirm Password',
+    placeholder: 'Confirm password',
+  },
+];
+
+export const form626a = new Form({ fields }, { plugins });
+
+
+describe('Yup plugin with yup.ref()', () => {
+  it('should invalidate passwordConfirm when different from password', async () => {
+    form626a.reset()
+    form626a.$('password').set('123456');
+    form626a.$('passwordConfirm').set('654321');
+
+    await form626a.validate();
+
+    expect(form626a.isValid).to.be.false;
+    expect(form626a.$('passwordConfirm').hasError).to.be.true;
+    expect(form626a.$('passwordConfirm').error).to.equal('Passwords must match');
+  });
+
+  it('should validate when password and passwordConfirm match', async () => {
+    form626a.reset()
+    form626a.$('password').set('123456');
+    form626a.$('passwordConfirm').set('123456');
+
+    await form626a.validate();
+
+    expect(form626a.isValid).to.be.true;
+    expect(form626a.$('passwordConfirm').hasError).to.be.false;
+  });
+});

tests/data/forms/fixes/form.626b.ts

@@ -0,0 +1,72 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import * as yup from 'yup';
+import Form from '../../../../src';
+import $yup from "../../../../src/validators/YUP";
+
+const plugins = {
+  dvr: $yup({
+    package: yup,
+    schema: (y: any) =>
+      y.object().shape({
+        subscribe: y.boolean(),
+        email: y.string().when('subscribe', {
+          is: true,
+          then: (schema: any) => schema.required('Email is required if subscribed'),
+          otherwise: (schema: any) => schema.notRequired(),
+        }),
+      }),
+  }),
+};
+
+const fields = [
+  {
+    name: 'subscribe',
+    label: 'Subscribe',
+    type: 'checkbox',
+  },
+  {
+    name: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+  },
+];
+
+export const form626b = new Form({ fields }, { plugins });
+
+
+describe('Yup plugin with yup.when()', () => {
+  it('should require email when subscribe is true', async () => {
+    form626b.reset();
+    form626b.$('subscribe').set(true);
+    form626b.$('email').set('');
+
+    await form626b.validate();
+
+    expect(form626b.isValid).to.be.false;
+    expect(form626b.$('email').hasError).to.be.true;
+    expect(form626b.$('email').error).to.equal('Email is required if subscribed');
+  });
+
+  it('should not require email when subscribe is false', async () => {
+    form626b.reset();
+    form626b.$('subscribe').set(false);
+    form626b.$('email').set('');
+
+    await form626b.validate();
+
+    expect(form626b.isValid).to.be.true;
+    expect(form626b.$('email').hasError).to.be.false;
+  });
+
+  it('should pass validation if email is set when subscribe is true', async () => {
+    form626b.reset();
+    form626b.$('subscribe').set(true);
+    form626b.$('email').set('test@example.com');
+
+    await form626b.validate();
+
+    expect(form626b.isValid).to.be.true;
+    expect(form626b.$('email').hasError).to.be.false;
+  });
+});