Added setup tests file & react lazy loading + suspense.

client/src/App/App.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, Suspense, lazy } from "react";
 import { useApolloClient, useQuery } from "@apollo/react-hooks";
 import { Switch, Route, Redirect } from "react-router-dom";
 import firebase from "../firebase/firebase.utils";
@@ -6,18 +6,20 @@ import firebase from "../firebase/firebase.utils";
 import "./App.css";
 
 //Component Imports
-import LandingPage from "../pages/landing/landing.page";
-import ManagePage from "../pages/manage/manage.page";
-import PrivateRoute from "../utils/private-route";
-import SignInPage from "../pages/sign-in/sign-in.page";
-import Unauthorized from "../pages/unauthorized/unauthorized.component";
+import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
+import AlertComponent from "../components/alert/alert.component";
 
 import { auth } from "../firebase/firebase.utils";
 import { UPSERT_USER } from "../graphql/user.queries";
 import { GET_CURRENT_USER } from "../graphql/local.queries";
 import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
-import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
-import AlertComponent from "../components/alert/alert.component";
+
+import PrivateRoute from "../utils/private-route";
+
+const LandingPage = lazy(() => import("../pages/landing/landing.page"));
+const ManagePage = lazy(() => import("../pages/manage/manage.page"));
+const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
+const Unauthorized = lazy(() => import("../pages/unauthorized/unauthorized.component"));
 
 export default () => {
   const apolloClient = useApolloClient();
@@ -103,24 +105,26 @@ export default () => {
   return (
     <div>
       <Switch>
-        <Route exact path="/" component={LandingPage} />
-        <Route exact path="/unauthorized" component={Unauthorized} />
-        <Route
-          exact
-          path="/signin"
-          render={() =>
-            HookCurrentUser.data.currentUser ? (
-              <Redirect to="/manage" />
-            ) : (
-              <SignInPage />
-            )
-          }
-        />
-        <PrivateRoute
-          isAuthorized={HookCurrentUser.data.currentUser ? true : false}
-          path="/manage"
-          component={ManagePage}
-        />
+        <Suspense fallback={<div>Suspended Loading...</div>}>
+          <Route exact path="/" component={LandingPage} />
+          <Route exact path="/unauthorized" component={Unauthorized} />
+          <Route
+            exact
+            path="/signin"
+            render={() =>
+              HookCurrentUser.data.currentUser ? (
+                <Redirect to="/manage" />
+              ) : (
+                <SignInPage />
+              )
+            }
+          />
+          <PrivateRoute
+            isAuthorized={HookCurrentUser.data.currentUser ? true : false}
+            path="/manage"
+            component={ManagePage}
+          />
+        </Suspense>
       </Switch>
     </div>
   );

client/src/pages/manage/manage.page.jsx

@@ -1,14 +1,18 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import { Route } from "react-router";
+import { Layout, BackTop } from "antd";
 
 //Component Imports
-import WhiteBoardPage from "../white-board/white-board.page";
-import JobsPage from "../jobs/jobs.page";
-import JobsDetailPage from "../jobs-detail/jobs-detail.page";
+// import WhiteBoardPage from "../white-board/white-board.page";
+// import JobsPage from "../jobs/jobs.page";
+// import JobsDetailPage from "../jobs-detail/jobs-detail.page";
+
 import HeaderContainer from "../../components/header/header.container";
 import FooterComponent from "../../components/footer/footer.component";
 
-import { Layout, BackTop } from "antd";
+const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
+const JobsPage = lazy(() => import("../jobs/jobs.page"));
+const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page"));
 
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
@@ -20,10 +24,17 @@ export default function Manage({ match }) {
       </Header>
 
       <Content>
-        <Route exact path={`${match.path}`} component={WhiteBoardPage} />
+        <Suspense
+          fallback={<div>TODO: Suspended Loading in Manage Page...</div>}
+        >
+          <Route exact path={`${match.path}`} component={WhiteBoardPage} />
 
-        <Route exact path={`${match.path}/jobs`} component={JobsPage} />
-        <Route path={`${match.path}/jobs/:jobId`} component={JobsDetailPage} />
+          <Route exact path={`${match.path}/jobs`} component={JobsPage} />
+          <Route
+            path={`${match.path}/jobs/:jobId`}
+            component={JobsDetailPage}
+          />
+        </Suspense>
       </Content>
 
       <Footer>

client/src/setupTest.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });