Merge pull request #758 from data-driven-forms/manager-field-configs

fix(manager): allow multiple field listener validators

Author: rvsia

packages/form-state-manager/src/files/compose-validators.ts

@@ -0,0 +1,48 @@
+import { isPromise } from '../utils/validate';
+import ComposeValidators from '../types/compose-validators';
+
+/**
+ * Function that allows running mulple validation functions on a single field.
+ * Pass an array of validators as an argument.
+ * New validation will be returned, that runs all validation until first one fails, or every validator is sucessfull.
+ * @param validators Array of Validators. First rejected validator error message will be returned as validation error.
+ * Synchronous validators are run in synchrounously and sync error is prioritized over async errors.
+ * @returns {Function} New validation function
+ */
+const composeValidators: ComposeValidators = (validators = []) => (value, allValues) => {
+  const promises: Promise<string | undefined>[] = [];
+  let index = 0;
+  let error: string | undefined;
+  while (validators.length > 0 && !error && index < validators.length) {
+    const result = validators[index](value, allValues);
+    if (isPromise(result)) {
+      promises.push(result as Promise<string | undefined>);
+    } else {
+      error = result as string | undefined;
+    }
+
+    index = index + 1;
+  }
+
+  if (error) {
+    return error;
+  }
+
+  if (promises.length > 0) {
+    return Promise.all(promises)
+      .catch((asyncError) => {
+        throw error || asyncError;
+      })
+      .then(() => {
+        if (error) {
+          throw error;
+        }
+
+        return undefined;
+      });
+  }
+
+  return undefined;
+};
+
+export default composeValidators;

packages/form-state-manager/src/tests/files/compose-validators.test.js

@@ -0,0 +1,76 @@
+import composeValidators from '../../files/compose-validators';
+import { isPromise } from '../../utils/validate';
+
+describe('composeValidators', () => {
+  const one = (value) => new Promise((res, rej) => setTimeout(() => (value === 'one' ? rej('error-one') : res()), 200));
+  const two = (value) => new Promise((res, rej) => setTimeout(() => (value === 'two' ? rej('error-two') : res()), 200));
+  const three = (value) => (value === 'three' ? 'error-three' : undefined);
+  const threeCopy = (value) => (value === 'three' ? 'error-three-copy' : undefined);
+
+  it('should fail last sync validator', () => {
+    expect.assertions(2);
+    const validator = composeValidators([one, two, three]);
+    const result = validator('three');
+    expect(isPromise(validator)).toBe(false);
+    expect(result).toEqual('error-three');
+  });
+
+  it('should fail second async validator', (done) => {
+    expect.assertions(2);
+    const validator = composeValidators([one, two, three]);
+    const result = validator('two');
+    expect(isPromise(result)).toEqual(true);
+    return result.catch((result) => {
+      expect(result).toEqual('error-two');
+      done();
+    });
+  });
+
+  it('should fail first async validator', (done) => {
+    expect.assertions(2);
+    const validator = composeValidators([one, two, three]);
+    const result = validator('one');
+    expect(isPromise(result)).toBe(true);
+    return result.catch((result) => {
+      expect(result).toEqual('error-one');
+      done();
+    });
+  });
+
+  it('should pass all validators', (done) => {
+    expect.assertions(2);
+    const validator = composeValidators([one, two, three]);
+    const result = validator('ok');
+    expect(isPromise(result)).toEqual(true);
+    return result.then((result) => {
+      expect(result).toBeUndefined();
+      done();
+    });
+  });
+
+  it('should pass all async validators', (done) => {
+    expect.assertions(2);
+    const validator = composeValidators([one, two]);
+    const result = validator('ok');
+    expect(isPromise(result)).toEqual(true);
+    return result.then((result) => {
+      expect(result).toBeUndefined();
+      done();
+    });
+  });
+
+  it('should return error message of sync validators in order of validators', () => {
+    expect.assertions(2);
+    const validator = composeValidators([three, threeCopy]);
+    const result = validator('three');
+    expect(isPromise(result)).toEqual(false);
+    expect(result).toEqual('error-three');
+  });
+
+  it('should pass when no argument is passed to the function', () => {
+    expect.assertions(1);
+    const validator = composeValidators();
+    const result = validator();
+    expect(result).toBeUndefined();
+  });
+});

packages/form-state-manager/src/tests/files/use-field.test.js

@@ -70,37 +70,45 @@ describe('useField', () => {
     expect(unregisterSpy).toHaveBeenCalledWith(unregisterArguments);
   });
 
-  it('should set correct value on input type text', () => {
+  it('should set correct value on input type text', async () => {
     const wrapper = mount(<DummyComponent subscriberProps={{ name: 'spy' }} managerApi={managerApi} />);
     const input = wrapper.find('input');
-    input.simulate('change', { target: { value: 'foo' } });
+    await act(async () => {
+      input.simulate('change', { target: { value: 'foo' } });
+    });
     wrapper.update();
     expect(wrapper.find(SpyComponent).prop('value')).toEqual('foo');
   });
 
-  it('should set correct value on input type checkbox', () => {
+  it('should set correct value on input type checkbox', async () => {
     const wrapper = mount(<DummyComponent subscriberProps={{ name: 'spy', type: 'checkbox' }} managerApi={managerApi} />);
     const input = wrapper.find('input');
-    input.simulate('change', { target: { checked: true, type: 'checkbox' } });
+    await act(async () => {
+      input.simulate('change', { target: { checked: true, type: 'checkbox' } });
+    });
     wrapper.update();
     expect(wrapper.find(SpyComponent).prop('checked')).toEqual(true);
   });
 
-  it('should set correct array value', () => {
+  it('should set correct array value', async () => {
     const wrapper = mount(<DummyComponent subscriberProps={{ fakeComponent: true, name: 'spy', changeValue: [] }} managerApi={managerApi} />);
     const input = wrapper.find('button#fake-change');
-    input.simulate('click');
+    await act(async () => {
+      input.simulate('click');
+    });
     wrapper.update();
     expect(wrapper.find(NonInputSpyComponent).prop('value')).toEqual([]);
   });
 
-  it('should set correct on non event object value', () => {
+  it('should set correct on non event object value', async () => {
     const nonEventObject = { value: 1, label: 'bar' };
     const wrapper = mount(
       <DummyComponent subscriberProps={{ fakeComponent: true, name: 'spy', changeValue: nonEventObject }} managerApi={managerApi} />
     );
     const input = wrapper.find('button#fake-change');
-    input.simulate('click');
+    await act(async () => {
+      input.simulate('click');
+    });
     wrapper.update();
     expect(wrapper.find(NonInputSpyComponent).prop('value')).toEqual(nonEventObject);
   });
@@ -431,38 +439,44 @@ describe('useField', () => {
         name: 'async-validate',
         validate: asyncValidator
       };
+
       const wrapper = mount(<DummyComponent managerApi={managerApi} subscriberProps={subscriberProps} />);
-      const spy = wrapper.find(SpyComponent);
       const input = wrapper.find('input');
-      expect(spy.prop('meta')).toEqual(expect.objectContaining({ validating: true, valid: true }));
+      expect(wrapper.find(SpyComponent).prop('meta')).toEqual(expect.objectContaining({ validating: true, valid: true }));
 
       await act(async () => {
         jest.runAllTimers(); // skip initial validation
       });
+      wrapper.update();
 
-      expect(spy.prop('meta')).toEqual(expect.objectContaining({ validating: false, valid: true }));
+      expect(wrapper.find(SpyComponent).prop('meta')).toEqual(expect.objectContaining({ validating: false, valid: true }));
 
-      input.simulate('change', { target: { value: 'foo' } });
+      await act(() => {
+        input.simulate('change', { target: { value: 'foo' } });
+      });
       /**
        * All validations are pending
        */
       await act(async () => {
         jest.advanceTimersByTime(10);
       });
+      wrapper.update();
       expect(wrapper.find(SpyComponent).prop('meta')).toEqual(expect.objectContaining({ validating: true, valid: true }));
       /**
        * Second faster async validation has finished
        */
       await act(async () => {
         jest.advanceTimersByTime(290);
       });
+      wrapper.update();
       expect(wrapper.find(SpyComponent).prop('meta')).toEqual(expect.objectContaining({ validating: true, valid: true }));
       /**
        * First slow async validation has finished
        */
       await act(async () => {
         jest.advanceTimersByTime(200);
       });
+      wrapper.update();
       expect(wrapper.find(SpyComponent).prop('meta')).toEqual(expect.objectContaining({ validating: false, valid: true }));
     });
   });