test: update testcase (#616)

Author: zombieJ

src/Field.tsx

@@ -1,24 +1,24 @@
 import toChildrenArray from 'rc-util/lib/Children/toArray';
-import warning from 'rc-util/lib/warning';
 import isEqual from 'rc-util/lib/isEqual';
+import warning from 'rc-util/lib/warning';
 import * as React from 'react';
+import FieldContext, { HOOK_MARK } from './FieldContext';
 import type {
+  EventArgs,
   FieldEntity,
   FormInstance,
+  InternalFormInstance,
   InternalNamePath,
+  InternalValidateOptions,
   Meta,
   NamePath,
   NotifyInfo,
   Rule,
-  Store,
-  InternalValidateOptions,
-  InternalFormInstance,
+  RuleError,
   RuleObject,
+  Store,
   StoreValue,
-  EventArgs,
-  RuleError,
 } from './interface';
-import FieldContext, { HOOK_MARK } from './FieldContext';
 import ListContext from './ListContext';
 import { toArray } from './utils/typeUtil';
 import { validateRules } from './utils/validateUtil';
@@ -74,6 +74,10 @@ export interface InternalFieldProps<Values = any> {
   shouldUpdate?: ShouldUpdate<Values>;
   trigger?: string;
   validateTrigger?: string | string[] | false;
+  /**
+   * Trigger will after configured milliseconds.
+   */
+  validateDebounce?: number;
   validateFirst?: boolean | 'parallel';
   valuePropName?: string;
   getValueProps?: (value: StoreValue) => Record<string, unknown>;
@@ -382,13 +386,14 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     const { triggerName, validateOnly = false } = options || {};
 
     // Force change to async to avoid rule OOD under renderProps field
-    const rootPromise = Promise.resolve().then(() => {
+    const rootPromise = Promise.resolve().then(async (): Promise<any[]> => {
       if (!this.mounted) {
         return [];
       }
 
-      const { validateFirst = false, messageVariables } = this.props;
+      const { validateFirst = false, messageVariables, validateDebounce } = this.props;
 
+      // Start validate
       let filteredRules = this.getRules();
       if (triggerName) {
         filteredRules = filteredRules
@@ -403,6 +408,18 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
           });
       }
 
+      // Wait for debounce. Skip if no `triggerName` since its from `validateFields / submit`
+      if (validateDebounce && triggerName) {
+        await new Promise(resolve => {
+          setTimeout(resolve, validateDebounce);
+        });
+
+        // Skip since out of date
+        if (this.validatePromise !== rootPromise) {
+          return [];
+        }
+      }
+
       const promise = validateRules(
         namePath,
         currentValue,

tests/validate.test.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
 import { fireEvent, render } from '@testing-library/react';
+import React, { useEffect } from 'react';
 import { act } from 'react-dom/test-utils';
 import Form, { Field, useForm } from '../src';
+import type { FormInstance, ValidateMessages } from '../src/interface';
+import { changeValue, getInput, matchError } from './common';
 import InfoField, { Input } from './common/InfoField';
-import { changeValue, matchError, getInput } from './common';
 import timeout from './common/timeout';
-import type { FormInstance, ValidateMessages } from '../src/interface';
 
 describe('Form.Validate', () => {
   it('required', async () => {
@@ -964,4 +964,73 @@ describe('Form.Validate', () => {
     await timeout();
     expect(container.querySelector('.errors').textContent).toEqual(`'test' is required`);
   });
+
+  it('validateDebounce', async () => {
+    jest.useFakeTimers();
+
+    const validator = jest.fn(
+      () =>
+        new Promise((_, reject) => {
+          setTimeout(() => {
+            reject(new Error('Not Correct'));
+          }, 100);
+        }),
+    );
+
+    const formRef = React.createRef<FormInstance>();
+
+    const { container } = render(
+      <Form ref={formRef}>
+        <InfoField name="test" rules={[{ validator }]} validateDebounce={1000}>
+          <Input />
+        </InfoField>
+      </Form>,
+    );
+
+    fireEvent.change(container.querySelector('input'), {
+      target: {
+        value: 'light',
+      },
+    });
+
+    // Debounce should wait
+    await act(async () => {
+      await Promise.resolve();
+      jest.advanceTimersByTime(900);
+      await Promise.resolve();
+    });
+    expect(validator).not.toHaveBeenCalled();
+
+    // Debounce should work
+    await act(async () => {
+      await Promise.resolve();
+      jest.advanceTimersByTime(1000);
+      await Promise.resolve();
+    });
+    expect(validator).toHaveBeenCalled();
+
+    // `validateFields` should ignore `validateDebounce`
+    validator.mockReset();
+    formRef.current.validateFields();
+
+    await act(async () => {
+      await Promise.resolve();
+      jest.advanceTimersByTime(200);
+      await Promise.resolve();
+    });
+    expect(validator).toHaveBeenCalled();
+
+    // `submit` should ignore `validateDebounce`
+    validator.mockReset();
+    fireEvent.submit(container.querySelector('form'));
+
+    await act(async () => {
+      await Promise.resolve();
+      jest.advanceTimersByTime(200);
+      await Promise.resolve();
+    });
+    expect(validator).toHaveBeenCalled();
+
+    jest.useRealTimers();
+  });
 });