Merge pull request #354 from rvsia/fixFalsyInitialValue

Fixes falsy values for initialValue + initiliazeOnMount
data-driven-forms · Mar 5, 2020 · fa2da23 · fa2da23
2 parents e4c6550 + 43fd5ac
commit fa2da23
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 2 deletions.
diff --git a/packages/react-form-renderer/src/form-renderer/field-provider.js b/packages/react-form-renderer/src/form-renderer/field-provider.js
@@ -8,7 +8,9 @@ import { dataTypes } from '../constants';
 class FieldProvider extends Component{
   componentDidMount() {
     if (this.props.initializeOnMount) {
-      const initialValue = this.props.initialValue || this.props.formOptions.getFieldState(this.props.name).initial;
+      const initialValue = this.props.hasOwnProperty('initialValue') ?
+        this.props.initialValue :
+        this.props.formOptions.getFieldState(this.props.name).initial;
       this.props.formOptions.change(this.props.name, initialValue);
     }
   }

diff --git a/packages/react-form-renderer/src/tests/form-renderer/render-form.test.js b/packages/react-form-renderer/src/tests/form-renderer/render-form.test.js
@@ -739,7 +739,7 @@ describe('renderForm function', () => {
         component: componentTypes.TEXT_FIELD,
         name: INITIALIZED_FIELD,
         initializeOnMount,
-        initialValue,
+        ...(initialValue ? { initialValue } : {}),
         condition: {
           when: SHOWER_FIELD,
           is: SHOW_VALUE,
@@ -884,5 +884,133 @@ describe('renderForm function', () => {
       mountInitializedField(wrapper);
       expectSchemaInitialValue(wrapper);
     });
+
+    it('should set false value in initializeOnMount', () => {
+      layoutMapper = {
+        [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
+        [layoutComponents.BUTTON]: ({ label, ...rest }) =>  <button { ...rest }>{ label }</button>,
+        [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
+        [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
+        [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
+      };
+
+      const schema = {
+        fields: [{
+          component: components.TEXT_FIELD,
+          name: 'input',
+        }, {
+          component: components.TEXT_FIELD,
+          name: 'unmounted',
+          initialValue: false,
+          initializeOnMount: true,
+          condition: {
+            when: 'input',
+            is: 'show_false',
+          },
+        }, {
+          component: components.TEXT_FIELD,
+          name: 'unmounted',
+          initialValue: true,
+          initializeOnMount: true,
+          condition: {
+            when: 'input',
+            is: 'show_true',
+          },
+        }],
+      };
+
+      const onSubmit = jest.fn();
+
+      const wrapper = mount(
+        <FormRenderer
+          layoutMapper={ layoutMapper }
+          formFieldsMapper={{
+            [components.TEXT_FIELD]: TextField,
+          }}
+          schema={ schema }
+          onSubmit={ onSubmit }
+        />
+      );
+
+      wrapper.find('input').first().simulate('change', { target: { value: 'show_true' }});
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+
+      expect(onSubmit).toHaveBeenCalledWith({ input: 'show_true', unmounted: true }, expect.any(Object), expect.any(Function));
+      onSubmit.mockClear();
+
+      wrapper.find('input').first().simulate('change', { target: { value: 'show_false' }});
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+      wrapper.update();
+
+      expect(onSubmit).toHaveBeenCalledWith({ input: 'show_false', unmounted: false }, expect.any(Object), expect.any(Function));
+    });
+
+    it('should set unefined value in initializeOnMount', () => {
+      layoutMapper = {
+        [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
+        [layoutComponents.BUTTON]: ({ label, ...rest }) =>  <button { ...rest }>{ label }</button>,
+        [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
+        [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
+        [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
+      };
+
+      const schema = {
+        fields: [{
+          component: components.TEXT_FIELD,
+          name: 'input',
+        }, {
+          component: components.TEXT_FIELD,
+          name: 'unmounted',
+          initialValue: undefined,
+          initializeOnMount: true,
+          condition: {
+            when: 'input',
+            is: 'show_undef',
+          },
+        }, {
+          component: components.TEXT_FIELD,
+          name: 'unmounted',
+          initialValue: true,
+          initializeOnMount: true,
+          condition: {
+            when: 'input',
+            is: 'show_true',
+          },
+        }],
+      };
+
+      const onSubmit = jest.fn();
+
+      const wrapper = mount(
+        <FormRenderer
+          layoutMapper={ layoutMapper }
+          formFieldsMapper={{
+            [components.TEXT_FIELD]: TextField,
+          }}
+          schema={ schema }
+          onSubmit={ onSubmit }
+        />
+      );
+
+      wrapper.find('input').first().simulate('change', { target: { value: 'show_true' }});
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+
+      expect(onSubmit).toHaveBeenCalledWith({ input: 'show_true', unmounted: true }, expect.any(Object), expect.any(Function));
+      onSubmit.mockClear();
+
+      wrapper.find('input').first().simulate('change', { target: { value: 'show_undef' }});
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+      wrapper.update();
+
+      expect(onSubmit).toHaveBeenCalledWith({ input: 'show_undef', unmounted: undefined }, expect.any(Object), expect.any(Function));
+    });
   });
 });