Rules: Updates field prop references in sync rules using new API

Author: kettanaito

cypress/integration/validation/SyncValidation/Form.props.rules.spec.jsx

@@ -10,7 +10,7 @@ describe('Form.props.rules', function () {
       .focus()
       .blur()
       .should('not.have.class', 'is-valid')
-      .should('not.have.class', 'is-invalid');
+      .should('not.have.class', 'is-invalid')
   });
 
   it('clearing optional unexpected field resets validation status', () => {
@@ -19,7 +19,7 @@ describe('Form.props.rules', function () {
       .should('have.class', 'is-invalid')
       .clear()
       .should('not.have.class', 'is-invalid')
-      .should('not.have.class', 'is-valid');
+      .should('not.have.class', 'is-valid')
   });
 
   it('clearing required unexpected field retains validation status', () => {
@@ -30,35 +30,35 @@ describe('Form.props.rules', function () {
       .should('have.class', 'is-invalid')
       .clear()
       .should('have.class', 'is-invalid')
-      .should('not.have.class', 'is-valid');
+      .should('not.have.class', 'is-valid')
   });
 
   it('optional field with name-specific matching value resolves', () => {
     cy.get(fieldSelector)
       .clear().type('some').should('have.value', 'some')
       .should('have.class', 'is-valid')
-      .should('not.have.class', 'is-invalid');
+      .should('not.have.class', 'is-invalid')
   });
 
   it('optional field with name-specific unmatching value rejects', () => {
     cy.get(fieldSelector)
       .clear().type('foo').should('have.value', 'foo')
       .should('have.class', 'is-invalid')
-      .should('not.have.class', 'is-valid');
+      .should('not.have.class', 'is-valid')
   });
 
   it('optional field with type-specific matching value resolves', () => {
     cy.get(fieldSelector)
       .clear().type('some').should('have.value', 'some')
       .should('have.class', 'is-valid')
-      .should('not.have.class', 'is-invalid');
+      .should('not.have.class', 'is-invalid')
   });
 
   it('optional field with type-specific unmatching value rejects', () => {
     cy.get(fieldSelector)
       .clear().type('123').should('have.value', '123')
       .should('have.class', 'is-invalid')
-      .should('not.have.class', 'is-valid');
+      .should('not.have.class', 'is-valid')
   });
 
   it('required field with name-specific matching value resolves', () => {
@@ -67,7 +67,7 @@ describe('Form.props.rules', function () {
     cy.get(fieldSelector)
       .clear().type('some').should('have.value', 'some')
       .should('have.class', 'is-valid')
-      .should('not.have.class', 'is-invalid');
+      .should('not.have.class', 'is-invalid')
   });
 
   it('required field with name-specific unmatching value rejects', () => {
@@ -76,6 +76,19 @@ describe('Form.props.rules', function () {
     cy.get(fieldSelector)
       .clear().type('foo').should('have.value', 'foo')
       .should('have.class', 'is-invalid')
-      .should('not.have.class', 'is-valid');
+      .should('not.have.class', 'is-valid')
   });
+
+  it('re-evaluates rule when referenced field prop updates', () => {
+    cy.get('[name="fieldOne"]')
+      .clear()
+      .type('something').should('have.value', 'something')
+
+    cy.get('[name="fieldTwo"]')
+      .type('foo').should('have.value', 'foo')
+      .should('have.class', 'is-invalid')
+      .clear()
+      .type('something').should('have.value', 'something')
+      .should('have.class', 'is-valid')
+    });
 });

examples/validation/SyncValidation/Form.props.rules.jsx

@@ -12,6 +12,9 @@ const rules = {
     fieldOne: ({ value, fieldProps }) => {
       const { ref: { props } } = fieldProps;
       return (value !== 'foo');
+    },
+    fieldTwo: ({ value, getFieldProp }) => {
+      return (value === getFieldProp(['fieldOne', 'value']));
     }
   }
 };
@@ -25,6 +28,10 @@ export default class FormPropsRules extends React.Component {
           name="fieldOne"
           label="Field one"
           hint="Must be more than 3 characters and not equal to `foo`" />
+        <Input
+          name="fieldTwo"
+          label="Field two"
+          hint="Valid when equals to `fieldOne` value" />
       </Form>
     );
   }

src/utils/fieldUtils/validateSync.js

@@ -1,9 +1,9 @@
 /**
  * Synchronous validation of a field.
  */
+import createPropGetter from './createPropGetter';
 import { commonErrorTypes, createRejectedRule, composeResult } from './validate';
 import { ruleSelectors } from '../formUtils/getFieldRules';
-import ensafeMap from '../ensafeMap';
 import dispatch from '../dispatch';
 
 /**
@@ -18,7 +18,7 @@ import dispatch from '../dispatch';
  */
 function getRejectedRules(resolverArgs) {
   const rejectedRules = [];
-  const { fieldProps, fields: fieldsOrigin, form } = resolverArgs;
+  const { fieldProps, form } = resolverArgs;
 
   /* Iterating through each rule selector ("name" and "type") */
   ruleSelectors.forEach((ruleSelector) => {
@@ -33,11 +33,8 @@ function getRejectedRules(resolverArgs) {
     }
 
     rules.forEach((rule) => {
-      const { refs, name, selector, resolver } = rule;
-      const fields = ensafeMap(fieldsOrigin, refs);
-
-      // Cannot use Immutable instances in the resolver since it's unclear how to proxy them
-      const isExpected = dispatch(resolver, { ...resolverArgs, fields }, { withImmutable: false });
+      const { name, selector, resolver } = rule;
+      const isExpected = dispatch(resolver, resolverArgs, form.context);
 
       if (isExpected) {
         return;
@@ -90,20 +87,21 @@ export default function validateSync({ fieldProps, fields, form }) {
     return composeResult(true);
   }
 
+  const resolverArgs = {
+    [valuePropName]: value,
+    fieldProps,
+    getFieldProp: createPropGetter(fields),
+    fields,
+    form
+  };
+
   if (rule) {
     //
     // TODO Make observable and ensafe {Field.props.rule} resolver as well.
     //
     const isExpected = (typeof rule === 'function')
       /* Enfore mutability of args for fields proxying */
-      ? dispatch(rule, {
-        [valuePropName]: value,
-        fieldProps,
-        fields,
-        form
-      }, {
-        withImmutable: false
-      })
+      ? dispatch(rule, resolverArgs, { withImmutable: false })
       : rule.test(value);
 
     if (!isExpected) {
@@ -118,12 +116,7 @@ export default function validateSync({ fieldProps, fields, form }) {
    * A form-wide validation provided by "rules" property of the Form.
    * The latter property is also inherited from the context passed by FormProvider.
    */
-  const rejectedRules = getRejectedRules({
-    [valuePropName]: value,
-    fieldProps,
-    fields,
-    form
-  });
+  const rejectedRules = getRejectedRules(resolverArgs);
 
   if (rejectedRules.length > 0) {
     return composeResult(false, rejectedRules);

src/utils/rxUtils/createRulesSubscriptions.js

@@ -2,17 +2,30 @@ import makeObservable from './makeObservable';
 import flushFieldRefs from '../flushFieldRefs';
 import getFieldRules from '../formUtils/getFieldRules';
 
+//
+// TODO
+// Change rule subscriptions according to new "getFieldProp" API
+//
+
 export default function createRulesSubscriptions({ fieldProps, fields, form }) {
   const { rxRules } = form.state;
   const value = fieldProps.get(fieldProps.get('valuePropName'));
-  const resolverArgs = { value, fieldProps, fields, form };
+
+  const resolverArgs = {
+    value,
+    fieldProps,
+    fields,
+    form
+  };
 
   const ruleGroups = getFieldRules({
     fieldProps,
     schema: form.formRules,
-    transformRule(defaultProps) {
-      const { refs } = flushFieldRefs(defaultProps.resolver, resolverArgs);
-      return { ...defaultProps, refs };
+    transformRule(ruleParams) {
+      return {
+        ...ruleParams,
+        refs: flushFieldRefs(ruleParams.resolver, resolverArgs)
+      };
     }
   });
 
@@ -21,7 +34,9 @@ export default function createRulesSubscriptions({ fieldProps, fields, form }) {
   }
 
   /**
-   * Create observable for each rule resolver function to watch for the referenced fields.
+   * Create observable for each rule where another field(s) is referenced.
+   * The observable will listen for the referenced props change event and re-evaluate
+   * the validation rule(s) where that prop is referenced.
    */
   ruleGroups.forEach((ruleGroup) => {
     ruleGroup.forEach((rule) => {
@@ -31,7 +46,10 @@ export default function createRulesSubscriptions({ fieldProps, fields, form }) {
 
       makeObservable(rule.resolver, resolverArgs, {
         subscribe() {
-          form.eventEmitter.emit('validateField', { fieldProps, force: true });
+          form.eventEmitter.emit('validateField', {
+            fieldProps,
+            force: true
+          });
         }
       });
     });