Merge pull request #216 from spalger/getFieldFromState/nestedFieldsAndForms

Fix handling of nested fields/forms in getFieldFromState

Author: davidkpiano

src/utils/index.js

@@ -72,7 +72,9 @@ function getFieldFromState(state, model) {
 
   if (!form) return null;
 
-  return getField(form, toPath(model).slice(1));
+  const formPath = toPath(form.model);
+  const fieldPath = toPath(model).slice(formPath.length);
+  return getField(form, fieldPath.length ? [fieldPath.join('.')] : []);
 }
 
 function getValidity(validators, value) {

test/errors-component-spec.js

@@ -577,26 +577,28 @@ describe('<Errors />', () => {
         }),
       }));
 
-      assert.doesNotThrow(() => {      
-        const form = TestUtils.renderIntoDocument(
-          <Provider store={store}>
-            <form>
-              <Errors model="forms.test.foo" 
-                messages={{
-                  required: 'This field is required',
-                }}
-              />
-              <Field model="forms.test.foo"
-                validators={{
-                  required: (v) => v && v.length,
-                }}
-              >
-                <input type="text" />
-              </Field>
-            </form>
-          </Provider>
-        );
-      });
+      const form = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <form>
+            <Errors model="forms.test.foo"
+              messages={{
+                required: 'This field is required',
+              }}
+            />
+            <Field model="forms.test.foo"
+              validators={{
+                required: (v) => v && v.length,
+              }}
+            >
+              <input type="text" />
+            </Field>
+          </form>
+        </Provider>
+      );
+
+      const spans = TestUtils.scryRenderedDOMComponentsWithTag(form, 'span')
+      assert.lengthOf(spans, 1);
+      assert.equal(spans[0].innerHTML, 'This field is required')
     });
   });
 

test/utils-spec.js

@@ -7,7 +7,7 @@ import mapValues from 'lodash/mapValues';
 import _get from 'lodash/get';
 import { assert } from 'chai';
 
-import { utils } from '../src/index';
+import { actions, formReducer, utils } from '../src';
 
 describe('utils', () => {
   describe('invertValidators()', () => {
@@ -79,5 +79,35 @@ describe('utils', () => {
     it('should exist', () => {
       assert.isFunction(utils.getFieldFromState);
     });
+
+    context('standard form', () => {
+      it('finds the field in state', () => {
+        const reducer = formReducer('person');
+        const personForm = reducer(undefined, actions.change('person.name', 'john'));
+
+        const field = utils.getFieldFromState({ personForm }, 'person.name');
+        assert.strictEqual(personForm.fields.name, field);
+      });
+    });
+
+    context('nested form', () => {
+      it('finds the field in state', () => {
+        const reducer = formReducer('app.car');
+        const carForm = reducer(undefined, actions.change('app.car.make', 'mazda'));
+
+        const field = utils.getFieldFromState({ carForm }, 'app.car.make');
+        assert.strictEqual(carForm.fields.make, field);
+      });
+    });
+
+    context('nested field', () => {
+      it('finds the field in state', () => {
+        const reducer = formReducer('district.library');
+        const libraryForm = reducer(undefined, actions.change('district.library.hours.open', 8));
+
+        const field = utils.getFieldFromState({ libraryForm }, 'district.library.hours.open');
+        assert.strictEqual(libraryForm.fields['hours.open'], field);
+      });
+    });
   });
 });