From 5a8ce7655cb191316965d2c0b04630dfd35651e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 11 Sep 2018 13:09:49 -0300
Subject: [PATCH] Updated tests

---
 .../test/__snapshots__/signIn.spec.tsx.snap   |  54 ++-
 .../test/__snapshots__/signUp.spec.tsx.snap   | 369 ++++++++++++++----
 .../ui/components/Message/Message.spec.tsx    |   6 +-
 .../client/ui/components/Message/Message.tsx  |   3 -
 .../__snapshots__/Message.spec.tsx.snap       |   2 +-
 .../ValidationMessage/ValidationMessage.tsx   |   9 +-
 .../ValidationMessage.spec.tsx.snap           |   9 +-
 7 files changed, 341 insertions(+), 111 deletions(-)

diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index b4db66fc7..c21b65546 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -34,9 +34,14 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -175,9 +180,14 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -280,9 +290,14 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Please enter a valid email address.
           </span>
@@ -306,9 +321,14 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -526,9 +546,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -552,9 +577,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index e18788d70..88ec82da6 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -34,9 +34,14 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -65,9 +70,14 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -114,9 +124,14 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -200,9 +215,14 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -231,9 +251,14 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -262,9 +287,14 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -288,9 +318,14 @@ exports[`accepts correct password confirmation 1`] = `
           value="testtest"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Passwords do not match. Try again.
           </span>
@@ -397,9 +432,14 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -428,9 +468,14 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -454,9 +499,14 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -540,9 +590,14 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -594,9 +649,14 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -620,9 +680,14 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -706,9 +771,14 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -737,9 +807,14 @@ exports[`checks for invalid characters in username 1`] = `
           value="$%$§$%$§%"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Invalid characters. Try again.
           </span>
@@ -768,9 +843,14 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -794,9 +874,14 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -880,9 +965,14 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Please enter a valid email address.
           </span>
@@ -911,9 +1001,14 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -942,9 +1037,14 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -968,9 +1068,14 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1054,9 +1159,14 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1085,9 +1195,14 @@ exports[`checks for too long username 1`] = `
           value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Usernames cannot be longer than ⁨20⁩ characters.
           </span>
@@ -1116,9 +1231,14 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1142,9 +1262,14 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1228,9 +1353,14 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1259,9 +1389,14 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1290,9 +1425,14 @@ exports[`checks for too short password 1`] = `
           value="pass"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Password must contain at least ⁨8⁩ characters.
           </span>
@@ -1316,9 +1456,14 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1402,9 +1547,14 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1433,9 +1583,14 @@ exports[`checks for too short username 1`] = `
           value="u"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Username must contain at least ⁨3⁩ characters.
           </span>
@@ -1464,9 +1619,14 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1490,9 +1650,14 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1576,9 +1741,14 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1607,9 +1777,14 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1638,9 +1813,14 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1664,9 +1844,14 @@ exports[`checks for wrong password confirmation 1`] = `
           value="not-matching"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Passwords do not match. Try again.
           </span>
@@ -1892,9 +2077,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1923,9 +2113,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1954,9 +2149,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1980,9 +2180,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx
index 6f7bfc8cc..ac69cea85 100644
--- a/src/core/client/ui/components/Message/Message.spec.tsx
+++ b/src/core/client/ui/components/Message/Message.spec.tsx
@@ -16,12 +16,8 @@ it("renders correctly", () => {
 });
 
 it("renders icon", () => {
-  const props: PropTypesOf<typeof Message> = {
-    className: "custom",
-  };
-
   const renderer = TestRenderer.create(
-    <Message {...props}>
+    <Message>
       <MessageIcon>alert</MessageIcon>Alert Message
     </Message>
   );
diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx
index c3f4ea2e8..7547d8442 100644
--- a/src/core/client/ui/components/Message/Message.tsx
+++ b/src/core/client/ui/components/Message/Message.tsx
@@ -1,9 +1,6 @@
 import cn from "classnames";
 import React, { ReactNode, StatelessComponent } from "react";
-
 import { withStyles } from "talk-ui/hocs";
-
-import Icon from "../Icon";
 import * as styles from "./Message.css";
 
 export interface MessageProps {
diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
index ae81503dc..38381f0c6 100644
--- a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
+++ b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`renders correctly 1`] = `
 
 exports[`renders icon 1`] = `
 <div
-  className="Message-root Message-colorGrey custom"
+  className="Message-root Message-colorGrey"
 >
   <span
     aria-hidden="true"
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index 34782a29d..9a4819178 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode, StatelessComponent } from "react";
 import Message from "../Message";
+import MessageIcon from "../Message/MessageIcon";
 
 export interface ValidationMessageProps {
   /**
@@ -24,12 +25,8 @@ const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
   const { className, fullWidth, children, icon, ...rest } = props;
 
   return (
-    <Message
-      color="validation"
-      icon={icon ? icon : "warning"}
-      className={className}
-      {...rest}
-    >
+    <Message color="error" className={className} {...rest}>
+      <MessageIcon>warning</MessageIcon>
       {children}
     </Message>
   );
diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
index da5a985c1..c0e1861bb 100644
--- a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
+++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
@@ -2,9 +2,14 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Message-root custom"
-  icon="warning"
+  className="Message-root Message-colorError custom"
 >
+  <span
+    aria-hidden="true"
+    className="Icon-root MessageIcon-root Icon-sm"
+  >
+    warning
+  </span>
   Hello World
 </div>
 `;