Register tests

package.json

@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
     "cross-env": "^5.1.4",
-    "react-scripts": "3.4.3"
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "react-scripts": "3.4.3",
+    "superagent-mock": "^3.7.0"
   },
   "dependencies": {
     "history": "^4.6.3",
@@ -27,7 +29,7 @@
   "scripts": {
     "start": "cross-env PORT=4100 react-scripts start",
     "build": "react-scripts build",
-    "test": "cross-env PORT=4100 react-scripts test --env=jsdom",
+    "test": "cross-env PORT=4100 react-scripts test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject"
   },
   "browserslist": {

src/components/__tests__/Register.test.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { ConnectedRouter } from 'react-router-redux';
+import { Provider } from "react-redux";
+import { store, history } from "../../store";
+import Register from "../Register";
+
+describe("<Register />", () => {
+  describe("Given that I'm in the Sign up page", () => {
+    beforeEach(() => {
+      render(
+        <Provider store={store}>
+          <ConnectedRouter history={history}>
+            <Register />
+          </ConnectedRouter>
+        </Provider>
+      );
+    });
+
+    describe("when I have inserted a valid username", () => {
+      beforeEach(() => {
+        fireEvent.change(screen.getByPlaceholderText(/username/i), { target: { value: 'test08102020' } });
+      });
+
+      describe("and clicking sign up", () => {
+        beforeEach(() => {
+          fireEvent.click(screen.getByRole("button", { name: "Sign up" }));
+        });
+
+        test("then the email can't be blank error is shown", async () => {
+          await waitFor(() => expect(screen.getByText("email can't be blank")).toBeInTheDocument());
+        });
+
+        test("then the password can't be blank error is shown", async () => {
+          await waitFor(() => expect(screen.getByText("password can't be blank")).toBeInTheDocument());
+        });
+      });
+
+      describe("and I have inserted an invalid email", () => {
+        beforeEach(() => {
+          fireEvent.change(screen.getByPlaceholderText(/email/i), { target: { value: 'test@test' } });
+        });
+
+        describe("and clicking sign up", () => {
+          beforeEach(() => {
+            fireEvent.click(screen.getByRole("button", { name: "Sign up" }));
+          });
+
+          test("then the email is invalid error is shown", async () => {
+            await waitFor(() => expect(screen.getByText("email is invalid")).toBeInTheDocument());
+          });
+
+          test("then the password can't be blank error is shown", async () => {
+            await waitFor(() => expect(screen.getByText("password can't be blank")).toBeInTheDocument());
+          });
+        });
+      });
+
+      describe("and I have inserted a valid email", () => {
+        beforeEach(() => {
+          fireEvent.change(screen.getByPlaceholderText(/email/i), { target: { value: 'testbruno2@test.com' } });
+        });
+
+        describe("and clicking sign up", () => {
+          beforeEach(() => {
+            fireEvent.click(screen.getByRole("button", { name: "Sign up" }));
+          });
+
+          test("then the password can't be blank error is shown", async () => {
+            await waitFor(() => expect(screen.getByText("password can't be blank")).toBeInTheDocument());
+          });
+        });
+
+        describe("and I have inserted a short password", () => {
+          beforeEach(() => {
+            fireEvent.change(screen.getByPlaceholderText(/password/i), { target: { value: '123456' } });
+          });
+
+          describe("and clicking sign up", () => {
+            beforeEach(() => {
+              fireEvent.click(screen.getByRole("button", { name: "Sign up" }));
+            });
+
+            test("then the password is too short error is shown", async () => {
+              await waitFor(() => expect(screen.getByText("password is too short (minimum is 8 characters)")).toBeInTheDocument());
+            });
+          });
+        });
+
+        describe("and I have inserted a good password", () => {
+          beforeEach(() => {
+            fireEvent.change(screen.getByPlaceholderText(/password/i), { target: { value: '123456789' } });
+          });
+
+          describe("and clicking sign up", () => {
+            beforeEach(() => {
+              fireEvent.click(screen.getByRole("button", { name: "Sign up" }));
+            });
+
+            test("then I should be redirected to the main page", async () => {
+              // check if redirected
+            });
+          });
+        });
+      });
+    });
+  });
+});

src/components/__tests__/__snapshots__/Register.test.js.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Register /> should render 1`] = `
+<div
+  class="auth-page"
+>
+  <div
+    class="container page"
+  >
+    <div
+      class="row"
+    >
+      <div
+        class="col-md-6 offset-md-3 col-xs-12"
+      >
+        <h1
+          class="text-xs-center"
+        >
+          Sign Up
+        </h1>
+        <p
+          class="text-xs-center"
+        >
+          <a
+            href="/login"
+          >
+            Have an account?
+          </a>
+        </p>
+        <form>
+          <fieldset>
+            <fieldset
+              class="form-group"
+            >
+              <input
+                class="form-control form-control-lg"
+                placeholder="Username"
+                type="text"
+                value=""
+              />
+            </fieldset>
+            <fieldset
+              class="form-group"
+            >
+              <input
+                class="form-control form-control-lg"
+                placeholder="Email"
+                type="email"
+                value=""
+              />
+            </fieldset>
+            <fieldset
+              class="form-group"
+            >
+              <input
+                class="form-control form-control-lg"
+                placeholder="Password"
+                type="password"
+                value=""
+              />
+            </fieldset>
+            <button
+              class="btn btn-lg btn-primary pull-xs-right"
+              type="submit"
+            >
+              Sign up
+            </button>
+          </fieldset>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/middleware.js

@@ -20,7 +20,9 @@ const promiseMiddleware = store => next => action => {
         if (!skipTracking && currentState.viewChangeCounter !== currentView) {
           return
         }
-        console.log('RESULT', res);
+        if(process.env.NODE_ENV === "development") {
+          console.log('RESULT', res);
+        }
         action.payload = res;
         store.dispatch({ type: ASYNC_END, promise: action.payload });
         store.dispatch(action);
@@ -30,7 +32,9 @@ const promiseMiddleware = store => next => action => {
         if (!skipTracking && currentState.viewChangeCounter !== currentView) {
           return
         }
-        console.log('ERROR', error);
+        if(process.env.NODE_ENV === "development") {
+          console.log('ERROR', error);
+        }
         action.error = true;
         action.payload = error.response.body;
         if (!action.skipTracking) {

src/store.js

@@ -13,11 +13,11 @@ export const history = createHistory();
 const myRouterMiddleware = routerMiddleware(history);
 
 const getMiddleware = () => {
-  if (process.env.NODE_ENV === 'production') {
-    return applyMiddleware(myRouterMiddleware, promiseMiddleware, localStorageMiddleware);
-  } else {
+  if (process.env.NODE_ENV === 'development') {
     // Enable additional logging in non-production environments.
     return applyMiddleware(myRouterMiddleware, promiseMiddleware, localStorageMiddleware, createLogger())
+  } else {
+    return applyMiddleware(myRouterMiddleware, promiseMiddleware, localStorageMiddleware);
   }
 };