Adding tracking support for <Field>, <Form>, and <Errors> + unit tests

Author: davidkpiano

src/components/errors-component.js

@@ -130,11 +130,16 @@ Errors.defaultProps = {
 };
 
 function selector(state, { model }) {
-  const fieldValue = getFieldFromState(state, model);
+  const modelString = typeof model === 'function'
+    ? model(state)
+    : model;
+
+  const fieldValue = getFieldFromState(state, modelString);
 
   return {
     ...state,
-    modelValue: _get(state, model),
+    model: modelString,
+    modelValue: _get(state, modelString),
     fieldValue,
   };
 }

src/components/field-component.js

@@ -15,13 +15,13 @@ const {
 } = actions;
 
 function selector(state, { model }) {
-  const stringModel = typeof model === 'function'
+  const modelString = typeof model === 'function'
     ? model(state)
     : model;
 
   return {
-    model: stringModel,
-    modelValue: _get(state, stringModel),
+    model: modelString,
+    modelValue: _get(state, modelString),
   };
 }
 

src/components/form-component.js

@@ -140,10 +140,14 @@ Form.defaultProps = {
 };
 
 function selector(state, { model }) {
+  const modelString = typeof model === 'function'
+    ? model(state)
+    : model;
+
   return {
     ...state,
-    modelValue: _get(state, model),
-    formValue: getForm(state, model),
+    modelValue: _get(state, modelString),
+    formValue: getForm(state, modelString),
   };
 }
 

src/utils/track.js

@@ -6,7 +6,7 @@ function track(model, predicate) {
     const [
       parentModelPath,
       childModelPath = '',
-    ] = model.split('[]');
+    ] = model.split(/\[\]\.?/);
     const parentValue = get(state, parentModelPath);
 
     return [

test/tracking-spec.js

@@ -5,7 +5,7 @@ import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import TestUtils from 'react-addons-test-utils';
 
-import { Field, formReducer, modelReducer, track } from '../src';
+import { Field, Errors, formReducer, modelReducer, track } from '../src';
 
 const state = {
   deep: {
@@ -72,3 +72,39 @@ describe('track() with <Field model="...">', () => {
       { id: 2, value: 'testing' });
   });
 });
+
+describe('track() with <Errors model="...">', () => {
+  const store = applyMiddleware(thunk)(createStore)(combineReducers({
+    testForm: formReducer('test'),
+    test: modelReducer('test', state),
+  }));
+
+  const tracker = track('test.deep.deeper[].value', { id: 2 });
+
+  const form = TestUtils.renderIntoDocument(
+    <Provider store={store}>
+      <form>
+        <Field model={tracker}
+          errors={{
+            foo: () => 'foo error',
+            bar: () => 'bar error',
+          }}
+        >
+          <input type="text" />
+        </Field>
+        <Errors model={tracker} />
+      </form>
+    </Provider>
+  );
+
+  const input = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
+
+  it('should successfully show errors for the proper model', () => {
+    input.value = 'testing';
+    TestUtils.Simulate.change(input);
+
+    const errors = TestUtils.scryRenderedDOMComponentsWithTag(form, 'span');
+
+    assert.lengthOf(errors, 2);
+  });
+});