From 8f6656705b5788426b495ee9aa0367a45499db6a Mon Sep 17 00:00:00 2001
From: Allen Wang <rovingbreeze@gmail.com>
Date: Fri, 17 Mar 2017 15:26:43 +0800
Subject: [PATCH] Display validation errors on toggles

---
 .../app/lib/components/redux-form/Toggle.js   | 21 ---------
 .../app/lib/components/redux-form/Toggle.jsx  | 42 +++++++++++++++++
 .../redux-form/__test__/Toggle.test.js        | 46 +++++++++++++++++++
 .../__snapshots__/Toggle.test.js.snap         | 18 ++++++++
 .../components/redux-form/createComponent.js  | 13 ++++--
 5 files changed, 116 insertions(+), 24 deletions(-)
 delete mode 100644 client/app/lib/components/redux-form/Toggle.js
 create mode 100644 client/app/lib/components/redux-form/Toggle.jsx
 create mode 100644 client/app/lib/components/redux-form/__test__/Toggle.test.js
 create mode 100644 client/app/lib/components/redux-form/__test__/__snapshots__/Toggle.test.js.snap

diff --git a/client/app/lib/components/redux-form/Toggle.js b/client/app/lib/components/redux-form/Toggle.js
deleted file mode 100644
index 2e35f5715a0..00000000000
--- a/client/app/lib/components/redux-form/Toggle.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Toggle from 'material-ui/Toggle';
-import createComponent from './createComponent';
-
-export default createComponent(
-  Toggle,
-  ({
-    input: {
-      onChange,
-      value,
-      ...inputProps
-    },
-    meta, // eslint-disable-line no-unused-vars
-    intl, // eslint-disable-line no-unused-vars
-    ...props
-  }) => ({
-    ...inputProps,
-    ...props,
-    toggled: !!value,
-    onToggle: onChange,
-  })
-);
diff --git a/client/app/lib/components/redux-form/Toggle.jsx b/client/app/lib/components/redux-form/Toggle.jsx
new file mode 100644
index 00000000000..8747042936d
--- /dev/null
+++ b/client/app/lib/components/redux-form/Toggle.jsx
@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react';
+import MaterialToggle from 'material-ui/Toggle';
+import createComponent from './createComponent';
+import mapError from './mapError';
+
+const errorStyle = {
+  color: 'red',
+};
+
+// Toggle implementation with an error displayed at the bottom.
+const Toggle = function ({ errorText, ...props }) {
+  return (
+    <div>
+      <MaterialToggle {...props} />
+      {
+        errorText &&
+        <div style={errorStyle}>{errorText}</div>
+      }
+    </div>
+  );
+};
+
+Toggle.propTypes = {
+  errorText: PropTypes.string,
+};
+
+export default createComponent(
+  Toggle,
+  ({
+    input: {
+      onChange,
+      value,
+      ...inputProps
+    },
+    ...props
+  }) => ({
+    // Take our the required fields and send the rest of the props to mapError().
+    ...mapError({ ...props, input: inputProps }),
+    toggled: !!value,
+    onToggle: onChange,
+  })
+);
diff --git a/client/app/lib/components/redux-form/__test__/Toggle.test.js b/client/app/lib/components/redux-form/__test__/Toggle.test.js
new file mode 100644
index 00000000000..6a8391d2602
--- /dev/null
+++ b/client/app/lib/components/redux-form/__test__/Toggle.test.js
@@ -0,0 +1,46 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Toggle from '../Toggle';
+
+describe('<Toggle />', () => {
+  it('renders a toggled toggle', () => {
+    const ToggleInput = shallow(
+      <Toggle
+        input={{
+          name: 'Awesome toggle',
+          value: true,
+          onChange: jest.fn(),
+        }}
+      />,
+      {
+        context: { intl },
+        childContextTypes: { intl: intlShape },
+      }
+    ).first().shallow();
+
+    expect(ToggleInput).toMatchSnapshot();
+  });
+
+
+  it('renders a toggle with an error', () => {
+    const ToggleInput = shallow(
+      <Toggle
+        input={{
+          name: 'Not very awesome toggle',
+          value: false,
+          onChange: jest.fn(),
+        }}
+        meta={{
+          error: 'Ooops',
+          touched: true,
+        }}
+      />,
+      {
+        context: { intl },
+        childContextTypes: { intl: intlShape },
+      }
+    ).first().shallow();
+
+    expect(ToggleInput).toMatchSnapshot();
+  });
+});
diff --git a/client/app/lib/components/redux-form/__test__/__snapshots__/Toggle.test.js.snap b/client/app/lib/components/redux-form/__test__/__snapshots__/Toggle.test.js.snap
new file mode 100644
index 00000000000..78431e866e5
--- /dev/null
+++ b/client/app/lib/components/redux-form/__test__/__snapshots__/Toggle.test.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Toggle /> renders a toggle with an error 1`] = `
+<Toggle
+  errorText="Ooops"
+  name="Not very awesome toggle"
+  onToggle={[Function]}
+  toggled={false}
+/>
+`;
+
+exports[`<Toggle /> renders a toggled toggle 1`] = `
+<Toggle
+  name="Awesome toggle"
+  onToggle={[Function]}
+  toggled={true}
+/>
+`;
diff --git a/client/app/lib/components/redux-form/createComponent.js b/client/app/lib/components/redux-form/createComponent.js
index 4150724cf87..b5e4a435bec 100755
--- a/client/app/lib/components/redux-form/createComponent.js
+++ b/client/app/lib/components/redux-form/createComponent.js
@@ -3,9 +3,16 @@ import { injectIntl } from 'react-intl';
 /**
  * Creates a component class that renders the given Material UI component
  *
- * @param MaterialUIComponent The material ui component to render
- * @param mapProps A mapping of props provided by redux-form to the props the Material UI
- * component needs
+ * @param {React.Component} MaterialUIComponent The material ui component to render
+ * @param {function} mapProps A function that maps props provided by redux-form to the props the
+ * Material UI component needs.
+ * Format of the redux-from props (input of the mapProps function):
+ * {
+ *   input: {name: stirng, value: any, onChange: function, ...},
+ *   meta: {touched: boolean, pristine: boolean, error: string, ...}
+ *   otherProps: {}  // Other props that passed to the <Field /> input: label, intl, etc...
+ * }
+ * See http://redux-form.com/6.5.0/docs/api/Field.md/ for the detailed props.
  */
 export default function createComponent(MaterialUIComponent, mapProps) {
   class InputComponent extends Component {