fix validateFirst (#74)

* update fix

* update test case

Author: zombieJ

src/utils/validateUtil.ts

@@ -182,15 +182,16 @@ export function validateRules(
 
   const rulePromises = filledRules.map(rule => validateRule(name, value, rule, options));
 
-  const summaryPromise: Promise<string[]> = validateFirst
+  const summaryPromise: Promise<string[]> = (validateFirst
     ? finishOnFirstFailed(rulePromises)
-    : finishOnAllFailed(rulePromises).then((errors: string[]): string[] | Promise<string[]> => {
-        if (!errors.length) {
-          return [];
-        }
+    : finishOnAllFailed(rulePromises)
+  ).then((errors: string[]): string[] | Promise<string[]> => {
+    if (!errors.length) {
+      return [];
+    }
 
-        return Promise.reject<string[]>(errors);
-      });
+    return Promise.reject<string[]>(errors);
+  });
 
   // Internal catch error to avoid console error log.
   summaryPromise.catch(e => e);
@@ -207,12 +208,19 @@ async function finishOnAllFailed(rulePromises: Promise<string[]>[]): Promise<str
 }
 
 async function finishOnFirstFailed(rulePromises: Promise<string[]>[]): Promise<string[]> {
+  let count = 0;
+
   return new Promise(resolve => {
     rulePromises.forEach(promise => {
       promise.then(errors => {
         if (errors.length) {
           resolve(errors);
         }
+
+        count += 1;
+        if (count === rulePromises.length) {
+          resolve([]);
+        }
       });
     });
   });

tests/validate.test.js

@@ -328,26 +328,38 @@ describe('Form.Validate', () => {
 
   it('validateFirst', async () => {
     let form;
+    let canEnd = false;
+    const onFinish = jest.fn();
+
     const wrapper = mount(
       <div>
         <Form
           ref={instance => {
             form = instance;
           }}
+          onFinish={onFinish}
         >
           <InfoField
             name="username"
             validateFirst
             rules={[
               // Follow promise will never end
-              { validator: () => new Promise(() => null) },
               { required: true },
+              {
+                validator: () =>
+                  new Promise(resolve => {
+                    if (canEnd) {
+                      resolve();
+                    }
+                  }),
+              },
             ]}
           />
         </Form>
       </div>,
     );
 
+    // Not pass
     await changeValue(wrapper, '');
     matchError(wrapper, true);
     expect(form.getFieldError('username')).toEqual(["'username' is required"]);
@@ -357,6 +369,16 @@ describe('Form.Validate', () => {
         errors: ["'username' is required"],
       },
     ]);
+    expect(onFinish).not.toHaveBeenCalled();
+
+    // Should pass
+    canEnd = true;
+    await changeValue(wrapper, 'test');
+    wrapper.find('form').simulate('submit');
+    await timeout();
+
+    matchError(wrapper, false);
+    expect(onFinish).toHaveBeenCalledWith({ username: 'test' });
   });
 });
 /* eslint-enable no-template-curly-in-string */