Allow passing an empty array of messages to VerificationMessages (#216)

* Allow passing an empty array of messages to VerificationMessages

* Update src/shared-components/verificationMessages/test.js

Co-Authored-By: Diego Fortes <[email protected]>

Co-authored-by: Diego Fortes <[email protected]>

src/shared-components/verificationMessages/__snapshots__/test.js.snap

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VerificationMessages /> UI snapshot renders content and children 1`] = `
+.emotion-6 {
+  list-style-type: none;
+  margin: 0;
+}
+
+.emotion-0 {
+  color: #706D87;
+  font-size: 0.875rem;
+  line-height: 1.71;
+  color: #BD200F;
+  line-height: 24px;
+}
+
+.emotion-0:last-of-type {
+  margin: 0 0 0.125rem 0;
+}
+
+<ul
+  className="emotion-6 emotion-7"
+>
+  <li
+    className="emotion-0 emotion-1"
+    style={
+      Object {
+        "maxHeight": "48px",
+        "opacity": "1",
+        "transitionDuration": "350ms",
+        "transitionProperty": "max-height, opacity",
+        "transitionTimingFunction": "ease-in-out",
+      }
+    }
+    type="error"
+  >
+    <strong>
+      Uh oh!
+    </strong>
+     This field is required
+  </li>
+  <li
+    className="emotion-0 emotion-1"
+    style={
+      Object {
+        "maxHeight": "48px",
+        "opacity": "1",
+        "transitionDuration": "350ms",
+        "transitionProperty": "max-height, opacity",
+        "transitionTimingFunction": "ease-in-out",
+      }
+    }
+    type="error"
+  >
+    <strong>
+      Uh oh!
+    </strong>
+     Must be at least 3 characters
+  </li>
+  <li
+    className="emotion-0 emotion-1"
+    style={
+      Object {
+        "maxHeight": "48px",
+        "opacity": "1",
+        "transitionDuration": "350ms",
+        "transitionProperty": "max-height, opacity",
+        "transitionTimingFunction": "ease-in-out",
+      }
+    }
+    type="error"
+  >
+    Must contain 1 number
+    , 
+    Must contain 1 symbol
+  </li>
+</ul>
+`;

src/shared-components/verificationMessages/index.js

@@ -13,13 +13,17 @@ const VerificationMessages = ({ messages, centered, type }) => {
   return (
     <TransitionGroup component={centered ? CenteredMessageList : MessageList}>
       {showMessages &&
-        messageKeys.map(key => (
-          <HelperTransition key={key}>
-            <MessageItem type={type}>
-              {formatMessage(messages[key])}
-            </MessageItem>
-          </HelperTransition>
-        ))}
+        messageKeys
+          .filter(
+            key => !Array.isArray(messages[key]) || messages[key].length >= 1,
+          )
+          .map(key => (
+            <HelperTransition key={key}>
+              <MessageItem type={type}>
+                {formatMessage(messages[key])}
+              </MessageItem>
+            </HelperTransition>
+          ))}
     </TransitionGroup>
   );
 };

src/shared-components/verificationMessages/test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+
+import VerificationMessages from './index';
+
+describe('<VerificationMessages />', () => {
+  describe('UI snapshot', () => {
+    it('renders content and children', () => {
+      const messages = {
+        required: (
+          <React.Fragment>
+            <strong>Uh oh!</strong> This field is required
+          </React.Fragment>
+        ),
+        maxLength: (
+          <React.Fragment>
+            <strong>Uh oh!</strong> Must be at least 3 characters
+          </React.Fragment>
+        ),
+        charactersRequired: ['Must contain 1 number', 'Must contain 1 symbol'],
+      };
+      const component = renderer.create(
+        <VerificationMessages messages={messages} />,
+      );
+
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('when message value is an empty array', () => {
+    it('renders nothing', () => {
+      const messages = {
+        required: [],
+      };
+      const wrapper = shallow(<VerificationMessages messages={messages} />);
+      expect(wrapper.html().indexOf('li') === -1).toBe(true);
+    });
+  });
+});