Add tests for validator warnings

Author: rvsia

packages/react-form-renderer/src/files/compose-validators.js

@@ -5,6 +5,10 @@ const composeValidators = (validators = []) => (value, allValues, meta) => {
       return error;
     }
 
+    if (typeof validator !== 'function') {
+      return undefined;
+    }
+
     return validator(value, allValues, meta);
   };
 

packages/react-form-renderer/src/files/validator-mapper.d.ts

@@ -1,5 +1,7 @@
+import { ValidatorFunction } from "./validators";
+
 export interface ValidatorMapper {
-  [key: string]: (options?: object) => (value: any, allValues: object) => string | undefined;
+  [key: string]: (options?: object) => ValidatorFunction;
 }
 
 declare const validatorMapper: ValidatorMapper;

packages/react-form-renderer/src/files/validators.d.ts

@@ -9,6 +9,7 @@ export interface ValidatorConfiguration extends AnyObject {
   type: string;
   message?: string;
   msg?: string;
+  warning?: boolean;
 }
 
 export type Validator = ValidatorConfiguration | ValidatorFunction;

packages/react-form-renderer/src/form-renderer/validator-helpers.d.ts

@@ -2,8 +2,7 @@ import { ValidatorType } from "../files/use-field-api";
 import { ReactNode } from "react";
 import { ValidatorMapper } from "../files/validator-mapper";
 import { DataType } from "../files/data-types";
-
-export type ValidatorFunction = (value: any, allValues: object) => ReactNode | undefined;
+import { ValidatorFunction } from "../files/validators";
 
 export type convertToWarning = (validator: ValidatorType) => ValidatorFunction;
 

packages/react-form-renderer/src/tests/form-renderer/validator.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 
 import FormRenderer from '../../files/form-renderer';
 import componentTypes from '../../files/component-types';
 import FormTemplate from '../../../../../__mocks__/mock-form-template';
 import useFieldApi from '../../files/use-field-api';
-import { act } from 'react-dom/test-utils';
 
 describe('FormRenderer validator', () => {
   const TextField = (props) => {
@@ -18,11 +18,12 @@ describe('FormRenderer validator', () => {
     );
   };
 
+  const VALUE = 'some-value';
+  const NAME = 'field1';
+
   it('pass value, allvalues, meta to custom validator func', async () => {
     expect.assertions(3);
 
-    const VALUE = 'some-value';
-    const NAME = 'field1';
     const META = expect.any(Object);
 
     const validator = (value, allValues, meta) => {
@@ -55,4 +56,106 @@ describe('FormRenderer validator', () => {
       wrapper.find('input').simulate('change', { target: { value: VALUE } });
     });
   });
+
+  describe('warning validators', () => {
+    const TextFieldWarning = (props) => {
+      const { input, meta, ...rest } = useFieldApi(props);
+      return (
+        <div>
+          <input {...input} {...rest} />
+          {meta.warning && <div id="warning">{meta.warning}</div>}
+        </div>
+      );
+    };
+
+    let wrapper;
+
+    it('should not convert object validator to warning when warnings are not used', async () => {
+      await act(async () => {
+        wrapper = mount(
+          <FormRenderer
+            FormTemplate={FormTemplate}
+            componentMapper={{
+              [componentTypes.TEXT_FIELD]: TextFieldWarning
+            }}
+            schema={{
+              fields: [{ component: 'text-field', name: NAME, validate: [{ type: 'required', warning: true }] }]
+            }}
+            onSubmit={jest.fn()}
+          />
+        );
+      });
+      wrapper.update();
+
+      expect(wrapper.find('#warning')).toHaveLength(0);
+    });
+
+    it('should convert object validator to warning', async () => {
+      await act(async () => {
+        wrapper = mount(
+          <FormRenderer
+            FormTemplate={FormTemplate}
+            componentMapper={{
+              [componentTypes.TEXT_FIELD]: TextFieldWarning
+            }}
+            schema={{
+              fields: [{ useWarnings: true, component: 'text-field', name: NAME, validate: [{ type: 'required', warning: true }] }]
+            }}
+            onSubmit={jest.fn()}
+          />
+        );
+      });
+      wrapper.update();
+
+      expect(wrapper.find('#warning').text()).toEqual('Required');
+    });
+
+    it('should convert function validator to warning', async () => {
+      const ERROR = 'SOME-ERROR';
+
+      const customValidator = () => ({ type: 'warning', error: ERROR });
+
+      await act(async () => {
+        wrapper = mount(
+          <FormRenderer
+            FormTemplate={FormTemplate}
+            componentMapper={{
+              [componentTypes.TEXT_FIELD]: TextFieldWarning
+            }}
+            schema={{
+              fields: [{ useWarnings: true, component: 'text-field', name: NAME, validate: [customValidator] }]
+            }}
+            onSubmit={jest.fn()}
+          />
+        );
+      });
+      wrapper.update();
+
+      expect(wrapper.find('#warning').text()).toEqual(ERROR);
+    });
+
+    it('should convert async function validator to warning', async () => {
+      const ERROR = 'SOME-ERROR';
+
+      const customValidator = () => new Promise((res, rej) => setTimeout(() => rej({ type: 'warning', error: ERROR })));
+
+      await act(async () => {
+        wrapper = mount(
+          <FormRenderer
+            FormTemplate={FormTemplate}
+            componentMapper={{
+              [componentTypes.TEXT_FIELD]: TextFieldWarning
+            }}
+            schema={{
+              fields: [{ useWarnings: true, component: 'text-field', name: NAME, validate: [customValidator] }]
+            }}
+            onSubmit={jest.fn()}
+          />
+        );
+      });
+      wrapper.update();
+
+      expect(wrapper.find('#warning').text()).toEqual(ERROR);
+    });
+  });
 });