Merge pull request #783 from rvsia/rerenderForm

feat(manager): rerender form on basic functions

Author: Hyperkid123

packages/form-state-manager/src/files/use-field.ts

@@ -66,6 +66,7 @@ const useField = ({
   beforeSubmit,
   afterSubmit,
   allowNull,
+  silent,
   ...props
 }: UseField): UseFieldData => {
   const { registerField, unregisterField, change, getFieldValue, blur, focus, formOptions, ...rest } = useContext(FormManagerContext);
@@ -83,7 +84,8 @@ const useField = ({
       internalId,
       defaultValue: dataType ? convertValue(defaultValue, dataType) : defaultValue,
       beforeSubmit,
-      afterSubmit
+      afterSubmit,
+      silent
     });
 
     return internalId;

packages/form-state-manager/src/tests/files/use-field-array.test.js

@@ -6,13 +6,13 @@ import useFieldArray from '../../files/use-field-array';
 import FormStateManager from '../../files/form-state-manager';
 
 const DummyInput = (props) => {
-  const { input, meta } = useField(props);
+  const { input, meta } = useField({ ...props, silent: true });
   return <input {...input} />;
 };
 
 const CompositeDummyInput = ({ name, ...props }) => {
-  const firstField = useField({ ...props, name: `${name}.first-field` });
-  const secondField = useField({ ...props, name: `${name}.second-field` });
+  const firstField = useField({ ...props, name: `${name}.first-field`, silent: true });
+  const secondField = useField({ ...props, name: `${name}.second-field`, silent: true });
   return (
     <Fragment>
       <input {...firstField.input} />

packages/form-state-manager/src/tests/performance/field-render-cycle.test.js

@@ -1,9 +1,10 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useContext, Fragment } from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 
 import useField from '../../files/use-field';
 import FormStateManager from '../../files/form-state-manager';
+import FormManagerContext from '../../files/form-manager-context';
 
 const Field = ({ fieldSpy, ...props }) => {
   const { input, id, ...rest } = useField(props);
@@ -70,4 +71,128 @@ describe('useField rendering cycle', () => {
     expect(fieldSpy.mock.calls[0][0]).toEqual('one');
     expect(fieldSpy.mock.calls[1][0]).toEqual('two');
   });
+
+  describe('callable function rerender forms', () => {
+    let Tester;
+    let renderSpy;
+
+    const Buttons = () => {
+      const { formOptions } = useContext(FormManagerContext);
+
+      return (
+        <Fragment>
+          <button id="initialize" onClick={() => formOptions().initialize({ one: 'changed' })} />
+          <button id="reset" onClick={() => formOptions().reset()} />
+          <button id="resetfieldstate" onClick={() => formOptions().resetFieldState('one')} />
+          <button id="submit" type="submit" />
+        </Fragment>
+      );
+    };
+
+    beforeEach(() => {
+      renderSpy = jest.fn();
+
+      Tester = ({ subscription }) => (
+        <FormStateManager onSubmit={jest.fn()} subscription={subscription}>
+          {() => {
+            return (
+              <form onSubmit={jest.fn()}>
+                <Field fieldSpy={renderSpy} name="one" id="one" type="text" />
+                <Buttons />
+              </form>
+            );
+          }}
+        </FormStateManager>
+      );
+    });
+
+    it('should rerender on initilize', async () => {
+      const wrapper = mount(<Tester />);
+      renderSpy.mockReset();
+
+      await act(async () => {
+        wrapper.find('#initialize').simulate('click');
+      });
+      wrapper.update();
+
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+      expect(renderSpy.mock.calls[0][0]).toEqual('one');
+    });
+
+    it('should rerender on resetFieldState', async () => {
+      const wrapper = mount(<Tester />);
+      renderSpy.mockReset();
+
+      await act(async () => {
+        wrapper.find('input#one').prop('onChange')({ target: { value: 'foo', type: 'text' } });
+      });
+      wrapper.update();
+
+      renderSpy.mockReset();
+
+      await act(async () => {
+        wrapper.find('#resetfieldstate').simulate('click');
+      });
+      wrapper.update();
+
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+      expect(renderSpy.mock.calls[0][0]).toEqual('one');
+    });
+
+    it('should rerender on reset', async () => {
+      const wrapper = mount(<Tester />);
+
+      await act(async () => {
+        wrapper.find('input#one').prop('onChange')({ target: { value: 'foo', type: 'text' } });
+      });
+      wrapper.update();
+
+      renderSpy.mockReset();
+
+      await act(async () => {
+        wrapper.find('#reset').simulate('click');
+      });
+      wrapper.update();
+
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+      expect(renderSpy.mock.calls[0][0]).toEqual('one');
+    });
+
+    it('should rerender on focus & blur', async () => {
+      const wrapper = mount(<Tester />);
+      renderSpy.mockReset();
+
+      await act(async () => {
+        wrapper.find('input#one').simulate('focus');
+      });
+      wrapper.update();
+
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+      expect(renderSpy.mock.calls[0][0]).toEqual('one');
+      renderSpy.mockReset();
+
+      await act(async () => {
+        wrapper.find('input#one').simulate('focus');
+      });
+      wrapper.update();
+
+      expect(renderSpy).toHaveBeenCalledTimes(0);
+
+      await act(async () => {
+        wrapper.find('input#one').simulate('blur');
+      });
+      wrapper.update();
+
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+      expect(renderSpy.mock.calls[0][0]).toEqual('one');
+      renderSpy.mockReset();
+
+      await act(async () => {
+        wrapper.find('input#one').simulate('blur');
+      });
+      wrapper.update();
+
+      expect(renderSpy).toHaveBeenCalledTimes(0);
+    });
+  });
 });

packages/form-state-manager/src/tests/utils/manager-api.test.js

@@ -692,9 +692,11 @@ describe('managerApi', () => {
       managerApi().registerField({ ...field1 });
       managerApi().registerField({ ...field2 });
 
-      expect(renderField1).not.toHaveBeenCalled();
+      expect(renderField1).toHaveBeenCalled(); // registeredFields was changed
       expect(renderField2).not.toHaveBeenCalled();
 
+      renderField1.mockReset();
+
       managerApi().rerender(['values']);
 
       expect(renderField1).toHaveBeenCalled();
@@ -727,9 +729,11 @@ describe('managerApi', () => {
       managerApi().registerField({ ...field1 });
       managerApi().registerField({ ...field2, subscription: { valid: true } });
 
-      expect(renderField1).not.toHaveBeenCalled();
+      expect(renderField1).toHaveBeenCalled(); // registeredFields was changed
       expect(renderField2).not.toHaveBeenCalled();
 
+      renderField1.mockReset();
+
       managerApi().rerender(['values']);
 
       expect(renderField1).toHaveBeenCalled();

packages/form-state-manager/src/types/field-config.d.ts

@@ -1,5 +1,5 @@
 import AnyObject from './any-object';
-import { Subscription } from './use-subscription';
+import { Subscription } from './use-field';
 import { FieldRender } from './manager-api';
 import { Validator } from './validate';
 
@@ -25,6 +25,7 @@ export interface FieldConfig extends AnyObject {
   data?: AnyObject;
   afterSubmit?: AfterSubmit;
   beforeSubmit?: BeforeSubmit;
+  silent?: boolean;
 }
 
 export default FieldConfig;

packages/form-state-manager/src/types/use-field.d.ts

@@ -81,6 +81,7 @@ export interface UseField extends AnyObject {
   afterSubmit?: AfterSubmit;
   beforeSubmit?: BeforeSubmit;
   allowNull?: boolean;
+  silent?: boolean;
 }
 
 export default UseField;