Adding formatter property to Field + unit tests

Author: davidkpiano

src/components/field-component.js

@@ -59,7 +59,7 @@ const controlPropsMap = {
     value: props.updateOn === 'change'
       && !props.defaultValue
       && !props.hasOwnProperty('value')
-      ? props.modelValue
+      ? props.formatter(props.modelValue)
       : props.value,
     name: props.model,
   }),
@@ -195,6 +195,7 @@ function createFieldClass(customControlPropsMap = {}, defaultProps = {}) {
       PropTypes.string,
     ]),
     parser: PropTypes.func,
+    formatter: PropTypes.func,
     updateOn: PropTypes.oneOf([
       'change',
       'blur',
@@ -221,6 +222,7 @@ function createFieldClass(customControlPropsMap = {}, defaultProps = {}) {
     validateOn: 'change',
     asyncValidateOn: 'blur',
     parser: identity,
+    formatter: identity,
     changeAction: change,
     ...defaultProps,
   };

src/utils/arrays-equal.js

@@ -0,0 +1,5 @@
+export default function arraysEqual(firstArray, secondArray) {
+  return firstArray && secondArray
+    && firstArray.length === secondArray.length
+    && firstArray.every((item, index) => item === secondArray[index]);
+}

test/field-component-spec.js

@@ -1524,4 +1524,35 @@ describe('<Field /> component', () => {
 
     assert.equal(input.value, 'changed');
   });
+
+  describe('formatter property', () => {
+    it('should format a raw value for text inputs', () => {
+      const store = applyMiddleware(thunk)(createStore)(combineReducers({
+        test: modelReducer('test', { foo: '' }),
+      }));
+
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Field
+            model="test.foo"
+            formatter={(val) => val + '!!!'}
+          >
+            <input />
+          </Field>
+        </Provider>
+      );
+
+      const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+      input.value = 'testing';
+
+      TestUtils.Simulate.change(input);
+
+      assert.equal(input.value, 'testing!!!',
+        'should format the view value');
+
+      assert.equal(store.getState().test.foo, 'testing',
+        'should not alter the model');
+    });
+  });
 });