From 885a724876d8e182c511d72c714071517d8ef15f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 29 Aug 2018 16:02:31 +0200
Subject: [PATCH] Make each test independent

---
 .../auth/containers/SignUpContainer.tsx       |   4 +-
 .../test/__snapshots__/signIn.spec.tsx.snap   |  27 +-
 .../test/__snapshots__/signUp.spec.tsx.snap   | 292 +++++++++++++++---
 src/core/client/auth/test/signIn.spec.tsx     |  70 +++--
 src/core/client/auth/test/signUp.spec.tsx     |  90 ++++--
 5 files changed, 390 insertions(+), 93 deletions(-)

diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
index 8be2d84ed..a4400863f 100644
--- a/src/core/client/auth/containers/SignUpContainer.tsx
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -17,8 +17,8 @@ interface SignUpContainerProps {
 class SignUpContainer extends Component<SignUpContainerProps> {
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
-      return await this.props.signUp(input);
-      form.reset();
+      await this.props.signUp(input);
+      return form.reset();
     } catch (error) {
       return { [FORM_ERROR]: error.message };
     }
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 33a6f001a..2f6fa4225 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -25,14 +25,27 @@ exports[`accepts correct password 1`] = `
           Email Address
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -155,6 +168,7 @@ exports[`accepts valid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -249,6 +263,7 @@ exports[`checks for invalid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -279,6 +294,7 @@ exports[`checks for invalid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -473,6 +489,7 @@ exports[`shows error when submitting empty form 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -503,6 +520,7 @@ exports[`shows error when submitting empty form 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -781,11 +799,6 @@ exports[`submits form successfully 1`] = `
       >
         Sign in to join the conversation
       </h1>
-      <div
-        className="CallOut-root CallOut-colorError CallOut-fullWidth"
-      >
-        Server Error
-      </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
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 0d13ca1bc..5a54d6e21 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -25,14 +25,27 @@ exports[`accepts correct password 1`] = `
           Email Address
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -48,14 +61,27 @@ exports[`accepts correct password 1`] = `
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="username"
           onChange={[Function]}
           placeholder="Username"
           type="text"
-          value="hans"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -101,6 +127,7 @@ exports[`accepts correct password 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -164,14 +191,27 @@ exports[`accepts correct password confirmation 1`] = `
           Email Address
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -187,14 +227,27 @@ exports[`accepts correct password confirmation 1`] = `
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="username"
           onChange={[Function]}
           placeholder="Username"
           type="text"
-          value="hans"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -210,14 +263,27 @@ exports[`accepts correct password confirmation 1`] = `
           Must be at least {$minLength} characters
         </p>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="password"
           onChange={[Function]}
           placeholder="Password"
           type="password"
-          value="testtest"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -228,7 +294,7 @@ exports[`accepts correct password confirmation 1`] = `
           Confirm Password
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="confirmPassword"
           onChange={[Function]}
@@ -236,6 +302,19 @@ exports[`accepts correct password confirmation 1`] = `
           type="password"
           value="testtest"
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Passwords do not match. Try again.
+          </span>
+        </div>
       </div>
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
@@ -326,6 +405,7 @@ exports[`accepts valid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -361,6 +441,7 @@ exports[`accepts valid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -391,6 +472,7 @@ exports[`accepts valid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -454,14 +536,27 @@ exports[`accepts valid username 1`] = `
           Email Address
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -512,6 +607,7 @@ exports[`accepts valid username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -542,6 +638,7 @@ exports[`accepts valid username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -605,14 +702,27 @@ exports[`checks for invalid characters in username 1`] = `
           Email Address
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -640,6 +750,7 @@ exports[`checks for invalid characters in username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -675,6 +786,7 @@ exports[`checks for invalid characters in username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -705,6 +817,7 @@ exports[`checks for invalid characters in username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -780,6 +893,7 @@ exports[`checks for invalid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -815,6 +929,7 @@ exports[`checks for invalid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -850,6 +965,7 @@ exports[`checks for invalid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -880,6 +996,7 @@ exports[`checks for invalid email 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -943,14 +1060,27 @@ exports[`checks for too long username 1`] = `
           Email Address
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -978,6 +1108,7 @@ exports[`checks for too long username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1013,6 +1144,7 @@ exports[`checks for too long username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1043,6 +1175,7 @@ exports[`checks for too long username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1106,14 +1239,27 @@ exports[`checks for too short password 1`] = `
           Email Address
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -1129,14 +1275,27 @@ exports[`checks for too short password 1`] = `
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="username"
           onChange={[Function]}
           placeholder="Username"
           type="text"
-          value="hans"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -1164,6 +1323,7 @@ exports[`checks for too short password 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1194,6 +1354,7 @@ exports[`checks for too short password 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1257,14 +1418,27 @@ exports[`checks for too short username 1`] = `
           Email Address
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -1292,6 +1466,7 @@ exports[`checks for too short username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1327,6 +1502,7 @@ exports[`checks for too short username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1357,6 +1533,7 @@ exports[`checks for too short username 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1420,14 +1597,27 @@ exports[`checks for wrong password confirmation 1`] = `
           Email Address
         </label>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -1443,14 +1633,27 @@ exports[`checks for wrong password confirmation 1`] = `
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="username"
           onChange={[Function]}
           placeholder="Username"
           type="text"
-          value="hans"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -1466,14 +1669,27 @@ exports[`checks for wrong password confirmation 1`] = `
           Must be at least {$minLength} characters
         </p>
         <input
-          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          className="TextField-root TextField-colorError TextField-fullWidth"
           disabled={false}
           name="password"
           onChange={[Function]}
           placeholder="Password"
           type="password"
-          value="testtest"
+          value=""
         />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
       </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
@@ -1496,6 +1712,7 @@ exports[`checks for wrong password confirmation 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1698,6 +1915,7 @@ exports[`shows error when submitting empty form 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1733,6 +1951,7 @@ exports[`shows error when submitting empty form 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1768,6 +1987,7 @@ exports[`shows error when submitting empty form 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -1798,6 +2018,7 @@ exports[`shows error when submitting empty form 1`] = `
           className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
         >
           <span
+            aria-hidden="true"
             className="Icon-root ValidationMessage-icon Icon-sm"
           >
             warning
@@ -2111,11 +2332,6 @@ exports[`submits form successfully 1`] = `
       >
         Sign up to join the conversation
       </h1>
-      <div
-        className="CallOut-root CallOut-colorError CallOut-fullWidth"
-      >
-        Server Error
-      </div>
       <div
         className="HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
@@ -2258,7 +2474,7 @@ exports[`submits form successfully 2`] = `
           onChange={[Function]}
           placeholder="Email Address"
           type="text"
-          value="hans@test.com"
+          value=""
         />
       </div>
       <div
@@ -2281,7 +2497,7 @@ exports[`submits form successfully 2`] = `
           onChange={[Function]}
           placeholder="Username"
           type="text"
-          value="hans"
+          value=""
         />
       </div>
       <div
@@ -2304,7 +2520,7 @@ exports[`submits form successfully 2`] = `
           onChange={[Function]}
           placeholder="Password"
           type="password"
-          value="testtest"
+          value=""
         />
       </div>
       <div
@@ -2322,7 +2538,7 @@ exports[`submits form successfully 2`] = `
           onChange={[Function]}
           placeholder="Confirm Password"
           type="password"
-          value="testtest"
+          value=""
         />
       </div>
       <button
diff --git a/src/core/client/auth/test/signIn.spec.tsx b/src/core/client/auth/test/signIn.spec.tsx
index 90447438a..cef7a1574 100644
--- a/src/core/client/auth/test/signIn.spec.tsx
+++ b/src/core/client/auth/test/signIn.spec.tsx
@@ -1,5 +1,8 @@
 import React from "react";
-import TestRenderer, { ReactTestInstance } from "react-test-renderer";
+import TestRenderer, {
+  ReactTestInstance,
+  ReactTestRenderer,
+} from "react-test-renderer";
 import { RecordProxy } from "relay-runtime";
 import sinon from "sinon";
 
@@ -12,32 +15,36 @@ import { createInMemoryStorage } from "talk-framework/lib/storage";
 
 import createEnvironment from "./createEnvironment";
 
-const environment = createEnvironment({
-  initLocalState: (localRecord: RecordProxy) => {
-    localRecord.setValue("SIGN_IN", "view");
-  },
-});
-
-const context: TalkContext = {
-  relayEnvironment: environment,
-  localeBundles: [],
-  localStorage: createInMemoryStorage(),
-  sessionStorage: createInMemoryStorage(),
-  rest: new RestClient("http://localhost/api"),
-  postMessage: new PostMessageService(),
-};
-
-const testRenderer = TestRenderer.create(
-  <TalkContextProvider value={context}>
-    <AppContainer />
-  </TalkContextProvider>
-);
-
 const inputPredicate = (name: string) => (n: ReactTestInstance) => {
   return n.props.name === name && n.props.onChange;
 };
 
-const form = testRenderer.root.findByType("form");
+let context: TalkContext;
+let testRenderer: ReactTestRenderer;
+let form: ReactTestInstance;
+beforeEach(() => {
+  const environment = createEnvironment({
+    initLocalState: (localRecord: RecordProxy) => {
+      localRecord.setValue("SIGN_IN", "view");
+    },
+  });
+
+  context = {
+    relayEnvironment: environment,
+    localeBundles: [],
+    localStorage: createInMemoryStorage(),
+    sessionStorage: createInMemoryStorage(),
+    rest: new RestClient("http://localhost/api"),
+    postMessage: new PostMessageService(),
+  };
+
+  testRenderer = TestRenderer.create(
+    <TalkContextProvider value={context}>
+      <AppContainer />
+    </TalkContextProvider>
+  );
+  form = testRenderer.root.findByType("form");
+});
 
 it("renders sign in form", async () => {
   expect(testRenderer.toJSON()).toMatchSnapshot();
@@ -52,6 +59,7 @@ it("checks for invalid email", async () => {
   form
     .find(inputPredicate("email"))
     .props.onChange({ target: { value: "invalid-email" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -59,6 +67,7 @@ it("accepts valid email", async () => {
   form
     .find(inputPredicate("email"))
     .props.onChange({ target: { value: "hans@test.com" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -66,10 +75,18 @@ it("accepts correct password", async () => {
   form
     .find(inputPredicate("password"))
     .props.onChange({ target: { value: "testtest" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
 it("shows server error", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "hans@test.com" } });
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "testtest" } });
+
   const windowMock = sinon.mock(window);
   windowMock.expects("resizeTo");
 
@@ -105,6 +122,13 @@ it("shows server error", async () => {
 });
 
 it("submits form successfully", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "hans@test.com" } });
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "testtest" } });
+
   const windowMock = sinon.mock(window);
   windowMock.expects("close").once();
   windowMock.expects("resizeTo");
diff --git a/src/core/client/auth/test/signUp.spec.tsx b/src/core/client/auth/test/signUp.spec.tsx
index 307f2c4b2..3626dba34 100644
--- a/src/core/client/auth/test/signUp.spec.tsx
+++ b/src/core/client/auth/test/signUp.spec.tsx
@@ -1,5 +1,8 @@
 import React from "react";
-import TestRenderer, { ReactTestInstance } from "react-test-renderer";
+import TestRenderer, {
+  ReactTestInstance,
+  ReactTestRenderer,
+} from "react-test-renderer";
 import { RecordProxy } from "relay-runtime";
 import sinon from "sinon";
 
@@ -12,32 +15,37 @@ import { createInMemoryStorage } from "talk-framework/lib/storage";
 
 import createEnvironment from "./createEnvironment";
 
-const environment = createEnvironment({
-  initLocalState: (localRecord: RecordProxy) => {
-    localRecord.setValue("SIGN_UP", "view");
-  },
-});
-
-const context: TalkContext = {
-  relayEnvironment: environment,
-  localeBundles: [],
-  localStorage: createInMemoryStorage(),
-  sessionStorage: createInMemoryStorage(),
-  rest: new RestClient("http://localhost/api"),
-  postMessage: new PostMessageService(),
-};
-
-const testRenderer = TestRenderer.create(
-  <TalkContextProvider value={context}>
-    <AppContainer />
-  </TalkContextProvider>
-);
-
 const inputPredicate = (name: string) => (n: ReactTestInstance) => {
   return n.props.name === name && n.props.onChange;
 };
 
-const form = testRenderer.root.findByType("form");
+let context: TalkContext;
+let testRenderer: ReactTestRenderer;
+let form: ReactTestInstance;
+beforeEach(() => {
+  const environment = createEnvironment({
+    initLocalState: (localRecord: RecordProxy) => {
+      localRecord.setValue("SIGN_UP", "view");
+    },
+  });
+
+  context = {
+    relayEnvironment: environment,
+    localeBundles: [],
+    localStorage: createInMemoryStorage(),
+    sessionStorage: createInMemoryStorage(),
+    rest: new RestClient("http://localhost/api"),
+    postMessage: new PostMessageService(),
+  };
+
+  testRenderer = TestRenderer.create(
+    <TalkContextProvider value={context}>
+      <AppContainer />
+    </TalkContextProvider>
+  );
+
+  form = testRenderer.root.findByType("form");
+});
 
 it("renders sign up form", async () => {
   expect(testRenderer.toJSON()).toMatchSnapshot();
@@ -52,6 +60,7 @@ it("checks for invalid email", async () => {
   form
     .find(inputPredicate("email"))
     .props.onChange({ target: { value: "invalid-email" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -59,6 +68,7 @@ it("accepts valid email", async () => {
   form
     .find(inputPredicate("email"))
     .props.onChange({ target: { value: "hans@test.com" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -66,6 +76,7 @@ it("checks for too short username", async () => {
   form
     .find(inputPredicate("username"))
     .props.onChange({ target: { value: "u" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -73,6 +84,7 @@ it("checks for too long username", async () => {
   form
     .find(inputPredicate("username"))
     .props.onChange({ target: { value: "a".repeat(100) } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -80,6 +92,7 @@ it("checks for invalid characters in username", async () => {
   form
     .find(inputPredicate("username"))
     .props.onChange({ target: { value: "$%$§$%$§%" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -87,6 +100,7 @@ it("accepts valid username", async () => {
   form
     .find(inputPredicate("username"))
     .props.onChange({ target: { value: "hans" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -94,6 +108,7 @@ it("checks for too short password", async () => {
   form
     .find(inputPredicate("password"))
     .props.onChange({ target: { value: "pass" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -101,6 +116,7 @@ it("accepts correct password", async () => {
   form
     .find(inputPredicate("password"))
     .props.onChange({ target: { value: "testtest" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -108,6 +124,7 @@ it("checks for wrong password confirmation", async () => {
   form
     .find(inputPredicate("confirmPassword"))
     .props.onChange({ target: { value: "not-matching" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
@@ -115,10 +132,24 @@ it("accepts correct password confirmation", async () => {
   form
     .find(inputPredicate("confirmPassword"))
     .props.onChange({ target: { value: "testtest" } });
+  form.props.onSubmit();
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
 it("shows server error", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "hans@test.com" } });
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "hans" } });
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "testtest" } });
+  form
+    .find(inputPredicate("confirmPassword"))
+    .props.onChange({ target: { value: "testtest" } });
+
   const windowMock = sinon.mock(window);
   windowMock.expects("resizeTo");
 
@@ -155,6 +186,19 @@ it("shows server error", async () => {
 });
 
 it("submits form successfully", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "hans@test.com" } });
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "hans" } });
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "testtest" } });
+  form
+    .find(inputPredicate("confirmPassword"))
+    .props.onChange({ target: { value: "testtest" } });
+
   const windowMock = sinon.mock(window);
   windowMock.expects("close").once();
   windowMock.expects("resizeTo");