tests: authReducer, useForm, PrivateRouter and PublicRouter

src/auth/context/AuthProvider.jsx

@@ -34,7 +34,7 @@ export const AuthProvider = ({ children }) => {
   const logout = () => {
     localStorage.removeItem("user");
     const action = {
-      type: types.lougout,
+      type: types.logout,
     };
 
     dispatch(action);

src/auth/context/authReducer.js

@@ -8,7 +8,7 @@ export const authReducer = (state = {}, action) => {
         logged: true,
         user: action.payload,
       };
-    case types.lougout:
+    case types.logout:
       return {
         ...state,
         logged: false,

src/auth/types/types.js

@@ -1,4 +1,4 @@
 export const types = {
   login: "[Auth] Login",
-  lougout: "[Auth] Logout",
+  logout: "[Auth] Logout",
 };

tests/auth/context/authReducer.test.js

@@ -0,0 +1,38 @@
+import { authReducer } from "../../../src/auth";
+import { types } from "../../../src/auth/types/types";
+describe("authReducer", () => {
+  const user = {
+    id: "123",
+    name: "Jane Doe",
+  };
+
+  const initialState = {
+    logged: !!user,
+    user,
+  };
+
+  test("should return default values", () => {
+    const newState = authReducer(initialState, {});
+    expect(newState).toBe(initialState);
+  });
+
+  test("should login and set the user", () => {
+    const loginAction = {
+      type: types.login,
+      payload: user,
+    };
+
+    const newState = authReducer(initialState, loginAction);
+    expect(newState.logged).toBeTruthy();
+    expect(newState.user).toBe(user);
+  });
+
+  test("should logout and set logged in false", () => {
+    const logoutAction = {
+      type: types.logout,
+    };
+
+    const newState = authReducer(initialState, logoutAction);
+    expect(newState.logged).toBeFalsy();
+  });
+});

tests/auth/types/types.test.js

@@ -0,0 +1,10 @@
+import { types } from "../../../src/auth/types/types";
+
+describe("types", () => {
+  test("should return proper types", () => {
+    expect(types).toEqual({
+      login: "[Auth] Login",
+      logout: "[Auth] Logout",
+    });
+  });
+});

tests/hooks/useForm.test.js

@@ -0,0 +1,46 @@
+import { act, renderHook } from "@testing-library/react";
+import { useForm } from "../../src/hooks";
+
+describe("useForm", () => {
+  const initialForm = {
+    searchText: "Batman",
+  };
+  const newSearchText = "Superman";
+
+  test("should return default values", () => {
+    const { result } = renderHook(() => useForm(initialForm));
+    expect(result.current).toEqual({
+      ...initialForm,
+      formState: initialForm,
+      handleInputChange: expect.any(Function),
+      handleResetForm: expect.any(Function),
+    });
+  });
+
+  test("should change the form name", () => {
+    const { result } = renderHook(() => useForm(initialForm));
+    const { handleInputChange } = result.current;
+
+    act(() =>
+      handleInputChange({
+        target: { name: "searchText", value: newSearchText },
+      })
+    );
+
+    expect(result.current.searchText).toBe(newSearchText);
+  });
+
+  test("should reset the form name", () => {
+    const { result } = renderHook(() => useForm(initialForm));
+    const { handleInputChange, handleResetForm } = result.current;
+
+    act(() => {
+      handleInputChange({
+        target: { name: "searchText", value: newSearchText },
+      });
+      handleResetForm();
+    });
+
+    expect(result.current.searchText).toBe(initialForm.searchText);
+  });
+});

tests/router/PrivateRouter.test.jsx

@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import { PrivateRouter } from "../../src/router/PrivateRouter";
+import { AuthContext } from "../../src/auth";
+import { MemoryRouter } from "react-router-dom";
+
+describe("PublicRouter", () => {
+  test("if logged in, should render children", () => {
+    Storage.prototype.setItem = jest.fn();
+
+    const contextValue = {
+      logged: true,
+      user: {
+        id: "abc",
+        name: "Jane Doe",
+      },
+    };
+
+    const initialEntry = "/heroes-spa/home/search";
+
+    render(
+      <AuthContext.Provider value={contextValue}>
+        <MemoryRouter initialEntries={[initialEntry]}>
+          <PrivateRouter>
+            <h1>Private Route</h1>
+          </PrivateRouter>
+        </MemoryRouter>
+      </AuthContext.Provider>
+    );
+
+    expect(screen.getByText("Private Route")).toBeTruthy();
+    expect(localStorage.setItem).toHaveBeenCalledWith("lastPath", initialEntry);
+  });
+});

tests/router/PublicRouter.test.jsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import { PublicRouter } from "../../src/router/PublicRouter";
+import { AuthContext } from "../../src/auth";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+
+describe("PublicRouter", () => {
+  test("if logged out, should render children", () => {
+    const contextValue = {
+      logged: false,
+    };
+
+    render(
+      <AuthContext.Provider value={contextValue}>
+        <PublicRouter>
+          <h1>Public Route</h1>
+        </PublicRouter>
+      </AuthContext.Provider>
+    );
+
+    expect(screen.getByText("Public Route")).toBeTruthy();
+  });
+
+  test("if logged in, should navigate", () => {
+    const contextValue = {
+      logged: true,
+      user: {
+        id: "abc",
+        name: "Jane Doe",
+      },
+    };
+
+    render(
+      <AuthContext.Provider value={contextValue}>
+        <MemoryRouter initialEntries={["/login"]}>
+          <Routes>
+            <Route
+              path="/login"
+              element={
+                <PublicRouter>
+                  <h1>Public Route</h1>
+                </PublicRouter>
+              }
+            />
+            <Route
+              path="/heroes-spa/home/search"
+              element={<h1>Private Route</h1>}
+            />
+          </Routes>
+        </MemoryRouter>
+      </AuthContext.Provider>
+    );
+
+    expect(screen.getByText("Private Route")).toBeTruthy();
+  });
+});