Internalizing proprietary <Errors> methods and adding unit tests for wrapper and component props

Author: davidkpiano

src/components/errors-component.js

@@ -5,38 +5,10 @@ import map from 'lodash/map';
 import compact from 'lodash/compact';
 import iteratee from 'lodash/iteratee';
 import isArray from 'lodash/isArray';
+import isPlainObject from 'lodash/isPlainObject';
 
 import { getFieldFromState } from '../utils';
 
-function createErrorComponent(component, message, modelValue, key) {
-  const messageString = typeof message === 'function'
-    ? message(modelValue)
-    : message;
-
-  return React.createElement(
-    component,
-    { key },
-    messageString);
-}
-
-function mapErrorMessages(errors, messages, modelValue, component) {
-  return compact(map(errors, (error, key) => {
-    const message = messages[key];
-
-    if (error) {
-      if (message) {
-        return createErrorComponent(component, message, modelValue, key);
-      } else if (typeof error === 'string') {
-        return createErrorComponent(component, error, modelValue, key);
-      } else if (typeof error === 'object') {
-        return mapErrorMessages(error, messages, modelValue, component);
-      }
-    }
-
-    return false;
-  })).reduce((a, b) => a.concat(b), []);
-}
-
 function showErrors(field, show = true) {
   if (typeof show === 'function') {
     return show(field);
@@ -56,19 +28,62 @@ class Errors extends Component {
     return fieldValue !== this.props.fieldValue;
   }
 
-  render() {
+  mapErrorMessages(errors) {
+    const { messages } = this.props;
+
+    return compact(map(errors, (error, key) => {
+      const message = messages[key];
+
+      if (error) {
+        if (message) {
+          return this.renderError(message, key);
+        } else if (typeof error === 'string') {
+          return this.renderError(error, key);
+        } else if (isPlainObject(error)) {
+          return this.mapErrorMessages(error);
+        }
+      }
+
+      return false;
+    })).reduce((a, b) => a.concat(b), []);
+  }
+
+  renderError(message, key) {
     const {
-      // model,
+      component,
+      model,
+      modelValue,
+      fieldValue,
+    } = this.props;
+
+    const errorProps = {
+      key,
+      model,
       modelValue,
       fieldValue,
+    };
+
+    const messageString = typeof message === 'function'
+      ? message(modelValue)
+      : message;
+
+    if (!messageString) return null;
+
+    return React.createElement(
+      component,
+      errorProps,
+      messageString);
+  }
+
+  render() {
+    const {
+      fieldValue,
       fieldValue: {
         valid,
         errors,
       },
-      messages,
       show,
       wrapper,
-      component,
     } = this.props;
 
     if (!showErrors(fieldValue, show)) {
@@ -77,7 +92,7 @@ class Errors extends Component {
 
     const errorMessages = valid
       ? null
-      : mapErrorMessages(errors, messages, modelValue, component);
+      : this.mapErrorMessages(errors);
 
     return React.createElement(
       wrapper,
@@ -87,13 +102,24 @@ class Errors extends Component {
 }
 
 Errors.propTypes = {
-  model: PropTypes.string.isRequired,
+  // Computed props
   modelValue: PropTypes.any,
   fieldValue: PropTypes.object,
-  messages: PropTypes.object,
+
+  // Provided props
+  model: PropTypes.string.isRequired,
+  messages: PropTypes.objectOf(PropTypes.oneOf([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.bool,
+  ])),
   show: PropTypes.any,
   wrapper: PropTypes.string,
-  component: PropTypes.string,
+  component: PropTypes.oneOf([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.element,
+  ]),
 };
 
 Errors.defaultProps = {

src/index.js

@@ -3,7 +3,7 @@ import actionTypes from './action-types';
 
 import Field, { controlPropsMap, createFieldClass } from './components/field-component';
 import Form from './components/form-component';
-// import Errors from './components/errors-component';
+import Errors from './components/errors-component';
 
 import modeled from './enhancers/modeled-enhancer';
 
@@ -34,7 +34,7 @@ export {
   createModelReducer,
   Field,
   Form,
-  // Errors,
+  Errors,
   getField,
   initialFieldState,
   modeled,