From ab0453c09b88c4e35d27962e036a17f1bfd34648 Mon Sep 17 00:00:00 2001
From: jwu-fisker <jwu@fiskerinc.com>
Date: Thu, 7 Jan 2021 21:34:39 -0800
Subject: [PATCH] Add 404 page

---
 src/components/404/index.jsx                  | 17 +++++++++
 src/components/App/App.test.js                | 27 +++++++++-----
 .../App/__snapshots__/App.test.js.snap        | 36 +++++++++++++++++++
 src/components/Routes/SiteRoutes.jsx          |  2 ++
 4 files changed, 73 insertions(+), 9 deletions(-)
 create mode 100644 src/components/404/index.jsx

diff --git a/src/components/404/index.jsx b/src/components/404/index.jsx
new file mode 100644
index 0000000..9d266a0
--- /dev/null
+++ b/src/components/404/index.jsx
@@ -0,0 +1,17 @@
+import { Typography } from "@material-ui/core";
+import React from "react";
+import useStyles from '../Styles';
+
+const PageNotFound = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.paper}>
+      <Typography component="h1" variant="h2">
+        Page Not Found
+      </Typography>
+    </div>
+  );
+}
+
+export default PageNotFound;
diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index 0cb2b76..d741738 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -19,28 +19,27 @@ const renderRoute = async (route) => {
 
 describe("App", () => {
 
-  it("Route / unauthenticated", async () => {
+  afterEach(() => {
     setToken(null);
+    cleanup();
+  });
+
+  it("Route / unauthenticated", async () => {
     const container = await renderRoute("/");
     expect(container.querySelector("h1").innerHTML).toEqual("Sign in");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route /signup unauthenticated", async () => {
-    setToken(null);
     const container = await renderRoute("/signup");
     expect(container.querySelector("h1").innerHTML).toEqual("Sign up");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route /home unauthenticated", async () => {
-    setToken(null);
     const container = await renderRoute("/home");
     expect(container.querySelector("h1").innerHTML).toEqual("Sign in");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route / authenticated", async () => {
@@ -48,7 +47,6 @@ describe("App", () => {
     const container = await renderRoute("/");
     expect(container.querySelector("h1").innerHTML).toEqual("Upload file");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route /signup authenticated", async () => {
@@ -56,7 +54,6 @@ describe("App", () => {
     const container = await renderRoute("/signup");
     expect(container.querySelector("h1").innerHTML).toEqual("Upload file");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route /home authenticated", async () => {
@@ -64,7 +61,19 @@ describe("App", () => {
     const container = await renderRoute("/home");
     expect(container.querySelector("h1").innerHTML).toEqual("Upload file");
     expect(container).toMatchSnapshot();
-    cleanup();
+  });
+
+  it("Route /page-not-found unauthenticated", async () => {
+    const container = await renderRoute("/page-not-found");
+    expect(container.querySelector("h1").innerHTML).toEqual("Page Not Found");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Route /page-not-found authenticated", async () => {
+    setToken(TEST_TOKEN);
+    const container = await renderRoute("/page-not-found");
+    expect(container.querySelector("h1").innerHTML).toEqual("Page Not Found");
+    expect(container).toMatchSnapshot();
   });
 
 })
\ No newline at end of file
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index f4284ec..156f1dc 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -466,6 +466,42 @@ exports[`App Route /home unauthenticated 1`] = `
 </div>
 `;
 
+exports[`App Route /page-not-found authenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-paper-41"
+    >
+      <h1
+        class="MuiTypography-root MuiTypography-h2"
+      >
+        Page Not Found
+      </h1>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /page-not-found unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-paper-37"
+    >
+      <h1
+        class="MuiTypography-root MuiTypography-h2"
+      >
+        Page Not Found
+      </h1>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`App Route /signup authenticated 1`] = `
 <div>
   <div
diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx
index f269c39..728f33e 100644
--- a/src/components/Routes/SiteRoutes.jsx
+++ b/src/components/Routes/SiteRoutes.jsx
@@ -11,6 +11,7 @@ import { useUserContext }  from '../Contexts/UserContext';
 const SignInForm = React.lazy(() => import('../SignInForm'));
 const SignUpForm = React.lazy(() => import('../SignUpForm'));
 const FileUploadForm = React.lazy(() => import('../FileUploadForm'));
+const PageNotFound = React.lazy(() => import('../404'));
 
 const SiteRoutes = () => {
   const { token } = useUserContext();
@@ -22,6 +23,7 @@ const SiteRoutes = () => {
           <AuthRoute path="/" exact render={() => <SignInForm />} type={TYPES.GUEST} token={token} />
           <AuthRoute path="/signup" exact render={() => <SignUpForm />} type={TYPES.GUEST} token={token} />
           <AuthRoute path="/home" render={() => <FileUploadForm />} type={TYPES.PROTECTED} token={token} />
+          <PageNotFound />
         </Switch>    
       </BrowserRouter>
     </Suspense>