Ensuring sync/async validators work together if specified. Fixes #993 + unit tests

Author: davidkpiano

src/components/control-component-factory.js

@@ -274,7 +274,7 @@ function createControlClass(s) {
         model,
         modelValue,
         updateOn,
-        validateOn,
+        validateOn = updateOn,
         asyncValidateOn,
         dispatch,
         getValue,

test/control-component-spec.js

@@ -1042,6 +1042,77 @@ Object.keys(testContexts).forEach((testKey) => {
       });
     });
 
+    describe('simultaneous sync and async validation', () => {
+      it('should execute sync and async validation simultaneously'
+        + ' if specified', () => {
+        const initialState = getInitialState({ foo: '' });
+        const reducer = formReducer('test');
+        const store = testCreateStore({
+          testForm: reducer,
+          test: modelReducer('test', initialState),
+        });
+        const syncValid = () => true;
+        const asyncValid = () => true;
+        const syncValidSpy = sinon.spy(syncValid);
+        const asyncValidSpy = sinon.spy(asyncValid);
+
+        const field = TestUtils.renderIntoDocument(
+          <Provider store={store}>
+            <Control.text
+              model="test.foo"
+              validators={{ syncValidSpy }}
+              validateOn="change"
+              asyncValidators={{ asyncValidSpy }}
+              asyncValidateOn="change"
+            />
+          </Provider>
+        );
+
+        const control = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+        control.value = 'testing';
+
+        TestUtils.Simulate.change(control);
+
+        assert.isTrue(syncValidSpy.called);
+        assert.isTrue(asyncValidSpy.called);
+      });
+
+      it('should execute sync and async validation simultaneously'
+        + ' if specified (with default validateOn)', () => {
+        const initialState = getInitialState({ foo: '' });
+        const reducer = formReducer('test');
+        const store = testCreateStore({
+          testForm: reducer,
+          test: modelReducer('test', initialState),
+        });
+        const syncValid = () => true;
+        const asyncValid = () => true;
+        const syncValidSpy = sinon.spy(syncValid);
+        const asyncValidSpy = sinon.spy(asyncValid);
+
+        const field = TestUtils.renderIntoDocument(
+          <Provider store={store}>
+            <Control.text
+              model="test.foo"
+              validators={{ syncValidSpy }}
+              asyncValidators={{ asyncValidSpy }}
+              asyncValidateOn="change"
+            />
+          </Provider>
+        );
+
+        const control = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+        control.value = 'testing';
+
+        TestUtils.Simulate.change(control);
+
+        assert.isTrue(syncValidSpy.called);
+        assert.isTrue(asyncValidSpy.called);
+      });
+    });
+
     describe('validation after reset', () => {
       const initialState = getInitialState({ foo: '' });
       const reducer = formReducer('test');