Made FormBuilder.mergeFieldData do deep merge

admin/client/src/components/FormBuilder/FormBuilder.js

@@ -12,6 +12,7 @@ import GridField from 'components/GridField/GridField';
 import fetch from 'isomorphic-fetch';
 import deepFreeze from 'deep-freeze';
 import backend from 'lib/Backend';
+import merge from 'merge';
 
 import es6promise from 'es6-promise';
 es6promise.polyfill();
@@ -352,14 +353,13 @@ export class FormBuilderComponent extends SilverStripeComponent {
    * The structure of the objects being merged should match the structures
    * generated by the SilverStripe FormSchema.
    *
-   * @param object structure - Structural data for a single field.
-   * @param object state - State data for a single field.
-   *
-   * @return object
+   * @param {object} structure - Structural data for a single field.
+   * @param {object} state - State data for a single field.
+   * @return {object}
    */
   mergeFieldData(structure, state) {
-    return Object.assign({}, structure, {
-      data: Object.assign({}, structure.data, state.data),
+    return merge.recursive(true, structure, {
+      data: state.data,
       messages: state.messages,
       valid: state.valid,
       value: state.value,

admin/client/src/components/FormBuilder/tests/FormBuilder-test.js

@@ -1,27 +1,56 @@
-/* global jest, describe, beforeEach */
+/* global jest, describe, expect, it, beforeEach */
 
+jest.unmock('merge');
 jest.unmock('lib/SilverStripeComponent');
 jest.unmock('../FormBuilder');
 
-// import { FormBuilder } from '../';
+import { FormBuilderComponent } from '../FormBuilder';
 
-describe('FormBuilder', () => {
-  describe('getFormSchema()', () => {
-    /*
+describe('FormBuilderComponent', () => {
+  describe('mergeFieldData()', () => {
     let formBuilder;
 
     beforeEach(() => {
       const props = {
-        store: {
-          getState: () => {},
-        },
-        actions: {},
+        forms: {},
+        formsActions: {},
+        schemas: {},
+        schemaActions: {},
         schemaUrl: 'admin/assets/schema/1',
-        schema: { forms: [{ schema: { id: '1', schema_url: 'admin/assets/schema/1' } }] },
       };
 
-      formBuilder = new FormBuilder(props);
+      formBuilder = new FormBuilderComponent(props);
+    });
+
+    it('should deep merge properties on the origional object', () => {
+      const fieldStructure = {
+        component: 'TextField',
+        data: {
+          someCustomData: {
+            x: 1,
+          },
+        },
+      };
+
+      const fieldState = {
+        data: {
+          someCustomData: {
+            y: 2,
+          },
+        },
+        messages: [{ type: 'good' }],
+        valid: true,
+        value: 'My test field',
+      };
+
+      const field = formBuilder.mergeFieldData(fieldStructure, fieldState);
+
+      expect(field.component).toBe('TextField');
+      expect(field.data.someCustomData.x).toBe(1);
+      expect(field.data.someCustomData.y).toBe(2);
+      expect(field.messages[0].type).toBe('good');
+      expect(field.valid).toBe(true);
+      expect(field.value).toBe('My test field');
     });
-    */
   });
 });