chore: Add legacy test [part 1] (#8)

* add legacy test

* sync logic with legacy validate

* update test case & doc

* support rule be a validator function directly

* throw if out of date

* add clean-field test

* fix prettier

* mainly test

* add dynamic-binding test

Author: zombieJ

.eslintrc.js

@@ -3,6 +3,7 @@ const base = require('father/template/.eslintrc.js');
 base.rules['no-template-curly-in-string'] = 0;
 base.rules['promise/always-return'] = 0;
 base.rules['promise/catch-or-return'] = 0;
+base.rules['promise/no-callback-in-promise'] = 0;
 base.rules['prefer-promise-reject-errors'] = 0;
 
 module.exports = base;

README.md

@@ -194,3 +194,58 @@ Validate Messages provides a list of error template. You can ref [here](https://
 | name    | Field name          |
 | pattern | Rule `pattern` prop |
 | type    | Rule `type` prop    |
+
+# Different with `rc-form`
+
+`rc-field-form` is try to keep sync with `rc-form` in api level, but there still have something to change:
+
+## 🔥 Remove Field will not clean up related value
+
+We do lots of logic to clean up the value when Field removed before. But with user feedback, remove exist value increase the additional work to keep value back with conditional field.
+
+## 🔥 Nest name use array instead of string
+
+In `rc-form`, we support like `user.name` to be a name and convert value to `{ user: { name: 'Bamboo' } }`. This makes '.' always be the route of variable, this makes developer have to do additional work if name is real contains a point like `app.config.start` to be `app_config_start` and parse back to point when submit.
+
+Field Form will only trade `['user', 'name']` to be `{ user: { name: 'Bamboo' } }`, and `user.name` to be `{ ['user.name']: 'Bamboo' }`.
+
+## 🔥 `getFieldsError` always return array
+
+`rc-form` returns `null` when no error happen. This makes user have to do some additional code like:
+
+```js
+(form.getFieldsError('fieldName') || []).forEach(() => {
+  // Do something...
+});
+```
+
+Now `getFieldsError` will return `[]` if no errors.
+
+## 🔥 Remove `callback` with `validateFields`
+
+Since ES8 is support `async/await`, that's no reason not to use it. Now you can easily handle your validate logic:
+
+```js
+async function() {
+  try {
+    const values = await form.validateFields();
+    console.log(values);
+  } catch (errorList) {
+    errorList.forEach(({ name, errors }) => {
+      // Do something...
+    });
+  }
+}
+```
+
+**Notice: Now if your validator return an `Error(message)`, not need to get error by `e => e.message`. FieldForm will handle this.**
+
+## 🔥 `preserve` is no need anymore
+
+In `rc-form` you should use `preserve` to keep a value cause Form will auto remove a value from Field removed. Field Form will always keep the value in the Form whatever Field removed.
+
+## 🔥 `setFields` not trigger `onFieldsChange` and `setFieldsValue` not trigger `onValuesChange`
+
+In `rc-form`, we hope to help user auto trigger change event by setting to make redux dispatch easier, but it's not good design since it makes code logic couping.
+
+Additionally, user control update trigger `onFieldsChange` & `onValuesChange` event has potential dead loop risk.

src/Field.tsx

@@ -214,7 +214,12 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
 
     let filteredRules = rules || [];
     if (triggerName) {
-      filteredRules = filteredRules.filter(({ validateTrigger }: Rule) => {
+      filteredRules = filteredRules.filter((rule: Rule) => {
+        if (typeof rule === 'function') {
+          return true;
+        }
+
+        const { validateTrigger } = rule;
         if (!validateTrigger) {
           return true;
         }

src/FieldContext.ts

@@ -15,6 +15,7 @@ const Context = React.createContext<InternalFormInstance>({
   isFieldsTouched: warningFunc,
   isFieldTouched: warningFunc,
   isFieldValidating: warningFunc,
+  isFieldsValidating: warningFunc,
   resetFields: warningFunc,
   setFields: warningFunc,
   setFieldsValue: warningFunc,

src/interface.ts

@@ -37,7 +37,14 @@ export type RuleType =
   | 'hex'
   | 'email';
 
-export interface Rule {
+type Validator = (
+  rule: Rule,
+  value: any,
+  callback: (error?: string) => void,
+  context: FormInstance, // TODO: Maybe not good place to export this?
+) => Promise<void> | void;
+
+export interface RuleObject {
   enum?: any[];
   len?: number;
   max?: number;
@@ -47,18 +54,15 @@ export interface Rule {
   required?: boolean;
   transform?: (value: any) => any;
   type?: RuleType;
-  validator?: (
-    rule: Rule,
-    value: any,
-    callback: (error?: string) => void,
-    context: FormInstance, // TODO: Maybe not good place to export this?
-  ) => Promise<void> | void;
+  validator?: Validator;
   whitespace?: boolean;
 
   /** Customize rule level `validateTrigger`. Must be subset of Field `validateTrigger` */
   validateTrigger?: string | string[];
 }
 
+export type Rule = RuleObject | Validator;
+
 export interface FieldEntity {
   onStoreChange: (store: any, namePathList: InternalNamePath[] | null, info: NotifyInfo) => void;
   isFieldTouched: () => boolean;
@@ -132,6 +136,7 @@ export interface FormInstance {
   isFieldsTouched: (nameList?: NamePath[]) => boolean;
   isFieldTouched: (name: NamePath) => boolean;
   isFieldValidating: (name: NamePath) => boolean;
+  isFieldsValidating: (nameList: NamePath[]) => boolean;
   resetFields: (fields?: NamePath[]) => void;
   setFields: (fields: FieldData[]) => void;
   setFieldsValue: (value: Store) => void;

src/useForm.ts

@@ -26,7 +26,6 @@ import {
   containsNamePath,
   getNamePath,
   getValue,
-  matchNamePath,
   setValue,
   setValues,
 } from './utils/valueUtil';
@@ -56,6 +55,8 @@ export class FormStore {
 
   private validateMessages: ValidateMessages = null;
 
+  private lastValidatePromise: Promise<FieldError[]> = null;
+
   constructor(forceRootUpdate: () => void) {
     this.forceRootUpdate = forceRootUpdate;
   }
@@ -68,10 +69,12 @@ export class FormStore {
     isFieldsTouched: this.isFieldsTouched,
     isFieldTouched: this.isFieldTouched,
     isFieldValidating: this.isFieldValidating,
+    isFieldsValidating: this.isFieldsValidating,
     resetFields: this.resetFields,
     setFields: this.setFields,
     setFieldsValue: this.setFieldsValue,
     validateFields: this.validateFields,
+    // TODO: validateFieldsAndScroll
 
     getInternalHooks: this.getInternalHooks,
   });
@@ -185,14 +188,21 @@ export class FormStore {
     return this.isFieldsTouched([name]);
   };
 
-  private isFieldValidating = (name: NamePath) => {
-    const namePath: InternalNamePath = getNamePath(name);
-    const field = this.getFieldEntities().find(testField => {
+  private isFieldsValidating = (nameList?: NamePath[]) => {
+    const fieldEntities = this.getFieldEntities();
+    if (!nameList) {
+      return fieldEntities.some(testField => testField.isFieldValidating());
+    }
+
+    const namePathList: InternalNamePath[] = nameList.map(getNamePath);
+    return fieldEntities.some(testField => {
       const fieldNamePath = testField.getNamePath();
-      return matchNamePath(fieldNamePath, namePath);
+      return containsNamePath(namePathList, fieldNamePath) && testField.isFieldValidating();
     });
+  };
 
-    return field && field.isFieldValidating();
+  private isFieldValidating = (name: NamePath) => {
+    return this.isFieldsValidating([name]);
   };
 
   private resetFields = (nameList?: NamePath[]) => {
@@ -397,12 +407,25 @@ export class FormStore {
   };
 
   // =========================== Validate ===========================
+  // TODO: Cache validate result to avoid duplicated validate???
   private validateFields: InternalValidateFields = (
     nameList?: NamePath[],
     options?: ValidateOptions,
   ) => {
     const namePathList: InternalNamePath[] | undefined = nameList && nameList.map(getNamePath);
 
+    // Clean up origin errors
+    if (namePathList) {
+      this.errorCache.updateError(
+        namePathList.map(name => ({
+          name,
+          errors: [],
+        })),
+      );
+    } else {
+      this.errorCache = new ErrorCache();
+    }
+
     // Collect result in promise list
     const promiseList: Promise<any>[] = [];
 
@@ -437,6 +460,7 @@ export class FormStore {
     });
 
     const summaryPromise = allPromiseFinish(promiseList);
+    this.lastValidatePromise = summaryPromise;
 
     // Notify fields with rule that validate has finished and need update
     summaryPromise
@@ -450,10 +474,19 @@ export class FormStore {
       });
 
     const returnPromise = summaryPromise
-      .then(() => this.store)
-      .catch((results: any) => {
-        const errorList = results.filter((result: any) => result);
-        return Promise.reject(errorList);
+      .then(() => {
+        if (this.lastValidatePromise === summaryPromise) {
+          return this.store;
+        }
+        return Promise.reject([]);
+      })
+      .catch((results: { name: InternalNamePath; errors: string[] }[]) => {
+        const errorList = results.filter(result => result);
+        return Promise.reject({
+          values: this.store,
+          errorFields: errorList,
+          outOfDate: this.lastValidatePromise !== summaryPromise,
+        });
       });
 
     // Do not throw in console

src/utils/asyncUtil.ts

@@ -1,8 +1,14 @@
-export function allPromiseFinish(promiseList: Promise<any>[]) {
+import { FieldError } from '../interface';
+
+export function allPromiseFinish(promiseList: Promise<FieldError>[]): Promise<FieldError[]> {
   let hasError = false;
   let count = promiseList.length;
   const results: any[] = [];
 
+  if (!promiseList.length) {
+    return Promise.resolve([]);
+  }
+
   return new Promise((resolve, reject) => {
     promiseList.forEach((promise, index) => {
       promise

src/utils/validateUtil.ts

@@ -28,11 +28,16 @@ function replaceMessage(template: string, kv: { [name: string]: any }): string {
  * { required: '${name} is required' } => { required: () => 'field is required' }
  */
 function convertMessages(messages: ValidateMessages, name: string, rule: Rule) {
-  const kv: { [name: string]: any } = {
-    ...rule,
-    name,
-    enum: (rule.enum || []).join(', '),
-  };
+  const kv: { [name: string]: any } =
+    typeof rule === 'function'
+      ? {
+          name,
+        }
+      : {
+          ...rule,
+          name,
+          enum: (rule.enum || []).join(', '),
+        };
 
   const replaceFunc = (template: string, additionalKV?: Record<string, any>) => {
     if (!template) return null;
@@ -101,7 +106,10 @@ export function validateRules(
 
   // Fill rule with context
   const filledRules: Rule[] = rules.map(currentRule => {
-    if (!currentRule.validator) {
+    const originValidatorFunc =
+      typeof currentRule === 'function' ? currentRule : currentRule.validator;
+
+    if (!originValidatorFunc) {
       return currentRule;
     }
     return {
@@ -125,7 +133,7 @@ export function validateRules(
         };
 
         // Get promise
-        const promise = currentRule.validator(rule, val, wrappedCallback, context);
+        const promise = originValidatorFunc(rule, val, wrappedCallback, context);
         hasPromise =
           promise && typeof promise.then === 'function' && typeof promise.catch === 'function';
 

tests/common/index.js

@@ -1,5 +1,6 @@
 import timeout from './timeout';
-import InfoField, { Input } from './InfoField';
+import { Field } from '../../src';
+import { getNamePath, matchNamePath } from '../../src/utils/valueUtil';
 
 export async function changeValue(wrapper, value) {
   wrapper.find('input').simulate('change', { target: { value } });
@@ -20,9 +21,42 @@ export function matchError(wrapper, error) {
 }
 
 export function getField(wrapper, index = 0) {
-  return wrapper.find(InfoField).at(index);
+  if (typeof index === 'number') {
+    return wrapper.find(Field).at(index);
+  }
+
+  const name = getNamePath(index);
+  const fields = wrapper.find(Field);
+  for (let i = 0; i < fields.length; i += 1) {
+    const field = fields.at(i);
+    const fieldName = getNamePath(field.props().name);
+
+    if (matchNamePath(name, fieldName)) {
+      return field;
+    }
+  }
+  return null;
 }
 
-export function getInput(wrapper, index = 0) {
-  return wrapper.find(Input).at(index);
+export function matchArray(source, target, matchKey) {
+  expect(matchKey).toBeTruthy();
+
+  try {
+    expect(source.length).toBe(target.length);
+  } catch (err) {
+    throw new Error(
+      `
+Array length not match.
+source(${source.length}): ${JSON.stringify(source)}
+target(${target.length}): ${JSON.stringify(target)}
+`.trim(),
+    );
+  }
+
+  target.forEach(tgt => {
+    const matchValue = tgt[matchKey];
+    const src = source.find(item => matchNamePath(item[matchKey], matchValue));
+    expect(src).toBeTruthy();
+    expect(src).toMatchObject(tgt);
+  });
 }

tests/dependencies.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Form, { Field } from '../src';
 import InfoField, { Input } from './common/InfoField';
-import { changeValue, matchError, getField, getInput } from './common';
+import { changeValue, matchError, getField } from './common';
 
 describe('dependencies', () => {
   it('touched', async () => {
@@ -65,7 +65,7 @@ describe('dependencies', () => {
     ]);
 
     rendered = false;
-    await changeValue(getInput(wrapper), '1');
+    await changeValue(getField(wrapper), '1');
 
     expect(rendered).toBeTruthy();
   });