Sync development into main (#31)

* Sync development into main

* Fix

src/components/App/App.test.js

@@ -1,6 +1,8 @@
-jest.mock("../Contexts/UserContext");
 jest.mock("../Contexts/FileUploadContext");
 jest.mock("../Contexts/VehicleContext");
+jest.mock("../Contexts/UpdatesContext");
+jest.mock("../Contexts/UserContext");
+jest.mock("../../services/monitoring");
 
 import { render, screen, cleanup, waitForElementToBeRemoved } from "@testing-library/react";
 import { setToken } from "../Contexts/UserContext";
@@ -18,7 +20,27 @@ const renderRoute = async (route) => {
   return container;
 };
 
+const check = async (path, selector, compare) => {
+  const container = await renderRoute(path);
+  expect(container.querySelector(selector).innerHTML).toEqual(compare);
+  expect(container).toMatchSnapshot();
+};
+
 describe("App", () => {
+  beforeAll(() => {
+    // Stablize Table Pagination control ids 
+    expect.addSnapshotSerializer({
+      test: function(val) {
+          return val && typeof val === "string" && val.indexOf("mui-") >= 0;
+      },
+      print: function(val) {
+          let str = val;
+          str = str.replace(/mui-[0-9]*/g, "mui-00000");        
+          
+          return `"${str}"`;
+      }
+    });
+  });
 
   afterEach(() => {
     setToken(null);
@@ -26,15 +48,15 @@ describe("App", () => {
   });
 
   it("Route / unauthenticated", async () => {
-    const container = await renderRoute("/");
-    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
-    expect(container).toMatchSnapshot();
+    await check("/", "span.MuiButton-label", "Sign In");
   });
 
   it("Route /home unauthenticated", async () => {
-    const container = await renderRoute("/home");
-    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
-    expect(container).toMatchSnapshot();
+    await check("/home", "span.MuiButton-label", "Sign In");
+  });
+
+  it("Route /package-upload unauthenticated", async () => {
+    await check("/package-upload", "span.MuiButton-label", "Sign In");
   });
 
   it("Route /package-upload unauthenticated", async () => {
@@ -44,49 +66,89 @@ describe("App", () => {
   });
 
   it("Route /vehicle-add unauthenticated", async () => {
-    const container = await renderRoute("/vehicle-add");
-    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
-    expect(container).toMatchSnapshot();
+    await check("/vehicle-add", "span.MuiButton-label", "Sign In");
+  });
+
+  it("Route /updates unauthenticated", async () => {
+    await check("/updates", "span.MuiButton-label", "Sign In");
+  });
+
+  it("Route /update unauthenticated", async () => {
+    await check("/update/1", "span.MuiButton-label", "Sign In");
+  });
+
+  it("Route /carupdate-deploy unauthenticated", async () => {
+    await check("/carupdate-deploy/1", "span.MuiButton-label", "Sign In");
+  });
+
+  it("Route /carupdate-status unauthenticated", async () => {
+    await check("/carupdate-status/1", "span.MuiButton-label", "Sign In");
+  });
+
+  it("Route /vehicles unauthenticated", async () => {
+    await check("/vehicles", "span.MuiButton-label", "Sign In");
+  });
+
+  it("Route /vehicle-status unauthenticated", async () => {
+    await check("/vehicle-status/FISKER123", "span.MuiButton-label", "Sign In");
   });
 
   it("Route / authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    const container = await renderRoute("/");
-    expect(container.querySelector("h1").innerHTML).toEqual("Welcome John!");
-    expect(container).toMatchSnapshot();
+    await check("/", "h1", "Welcome John!");
   });
 
   it("Route /home authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    const container = await renderRoute("/home");
-    expect(container.querySelector("h1").innerHTML).toEqual("Welcome John!");
-    expect(container).toMatchSnapshot();
+    await check("/home", "h1", "Welcome John!");
   });
 
   it("Route /package-upload authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    const container = await renderRoute("/package-upload");
-    expect(container.querySelector("h1").innerHTML).toEqual("Upload Update Package");
-    expect(container).toMatchSnapshot();
+    await check("/package-upload", "h1", "Upload Update Package");
   });
 
   it("Route /vehicle-add authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    const container = await renderRoute("/vehicle-add");
-    expect(container.querySelector("h1").innerHTML).toEqual("Add Vehicle");
-    expect(container).toMatchSnapshot();
+    await check("/vehicle-add", "h1", "Add Vehicle");
+  });
+
+  it("Route /updates authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/updates", "h1", "Updates");
+  });
+
+  it("Route /update authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/update/1", "h1", "Update Package 1");
+  });
+
+  it("Route /carupdate-deploy authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/carupdate-deploy/1", "h1", "[1]  ");
+  });
+
+  it("Route /carupdate-status authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/carupdate-status/1", "h1", "");
+  });
+
+  it("Route /vehicles authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/vehicles", "h1", "Vehicles");
+  });
+
+  it("Route /vehicle-status authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/vehicle-status/FISKER123", "h1", "FISKER123 Updates");
   });
 
   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();
+    await check("/page-not-found", "h1", "Page Not Found");
   });
 
   it("Route /page-not-found authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    const container = await renderRoute("/page-not-found");
-    expect(container.querySelector("h1").innerHTML).toEqual("Page Not Found");
-    expect(container).toMatchSnapshot();
+    await check("/page-not-found", "h1", "Page Not Found");
   });
 })

src/components/App/index.jsx

@@ -5,6 +5,7 @@ import { StatusProvider } from "../Contexts/StatusContext";
 import { CssBaseline } from "@material-ui/core";
 import MenuDrawer from "../Layouts/MenuDrawer";
 import SiteRoutes from "../Routes/SiteRoutes";
+import {} from "../../services/monitoring";
 
 function App() {
   return (