CEC-180 Cache Control (#30)

* Set cache expire to 1 day Add snapshot tests for new screens * Fix table pagniation random ids for snapshot tests * Auto reload on chunk load error * OTA Admin Portal => Admin Portal
2021-04-13 17:52:10 -07:00
parent 1f9db5454f
commit 7a1125cb1f
13 changed files with 3180 additions and 173 deletions
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Fisker OTA Admin Portal
+# Fisker Admin Portal

 Front-end web application for administarting OTA services

--- a/nginx.conf
+++ b/nginx.conf
@@ -3,6 +3,8 @@ server {
    root  /usr/share/nginx/html;
    include /etc/nginx/mime.types;

+    expires 1d;
+
    location / {
        try_files $uri /index.html;
    }
--- a/package-lock.json
+++ b/package-lock.json
@@ -2177,25 +2177,26 @@
      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
    },
    "@types/react": {
-      "version": "17.0.1",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.1.tgz",
-      "integrity": "sha512-w8t9f53B2ei4jeOqf/gxtc2Sswnc3LBK5s0DyJcg5xd10tMHXts2N31cKjWfH9IC/JvEPa/YF1U4YeP1t4R6HQ==",
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
+      "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
      "requires": {
        "@types/prop-types": "*",
+        "@types/scheduler": "*",
        "csstype": "^3.0.2"
      },
      "dependencies": {
        "csstype": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
-          "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+          "version": "3.0.7",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
        }
      }
    },
    "@types/react-transition-group": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
-      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
      "requires": {
        "@types/react": "*"
      }
@@ -2208,6 +2209,11 @@
        "@types/node": "*"
      }
    },
+    "@types/scheduler": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
+    },
    "@types/source-list-map": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -4655,9 +4661,9 @@
      }
    },
    "csstype": {
-      "version": "2.6.14",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
-      "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+      "version": "2.6.16",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
+      "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
    },
    "cyclist": {
      "version": "1.0.1",
@@ -4998,9 +5004,9 @@
      },
      "dependencies": {
        "csstype": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
-          "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+          "version": "3.0.7",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
        }
      }
    },
@@ -8942,9 +8948,9 @@
      }
    },
    "jss": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.1.tgz",
-      "integrity": "sha512-hbbO3+FOTqVdd7ZUoTiwpHzKXIo5vGpMNbuXH1a0wubRSWLWSBvwvaq4CiHH/U42CmjOnp6lVNNs/l+Z7ZdDmg==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.6.0.tgz",
+      "integrity": "sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw==",
      "requires": {
        "@babel/runtime": "^7.3.1",
        "csstype": "^3.0.2",
@@ -8954,77 +8960,77 @@
      },
      "dependencies": {
        "csstype": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
-          "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+          "version": "3.0.7",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
        }
      }
    },
    "jss-plugin-camel-case": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.1.tgz",
-      "integrity": "sha512-9+oymA7wPtswm+zxVti1qiowC5q7bRdCJNORtns2JUj/QHp2QPXYwSNRD8+D2Cy3/CEMtdJzlNnt5aXmpS6NAg==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz",
+      "integrity": "sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A==",
      "requires": {
        "@babel/runtime": "^7.3.1",
        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.5.1"
+        "jss": "10.6.0"
      }
    },
    "jss-plugin-default-unit": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.1.tgz",
-      "integrity": "sha512-D48hJBc9Tj3PusvlillHW8Fz0y/QqA7MNmTYDQaSB/7mTrCZjt7AVRROExoOHEtd2qIYKOYJW3Jc2agnvsXRlQ==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz",
+      "integrity": "sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w==",
      "requires": {
        "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1"
+        "jss": "10.6.0"
      }
    },
    "jss-plugin-global": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.1.tgz",
-      "integrity": "sha512-jX4XpNgoaB8yPWw/gA1aPXJEoX0LNpvsROPvxlnYe+SE0JOhuvF7mA6dCkgpXBxfTWKJsno7cDSCgzHTocRjCQ==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz",
+      "integrity": "sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w==",
      "requires": {
        "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1"
+        "jss": "10.6.0"
      }
    },
    "jss-plugin-nested": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.1.tgz",
-      "integrity": "sha512-xXkWKOCljuwHNjSYcXrCxBnjd8eJp90KVFW1rlhvKKRXnEKVD6vdKXYezk2a89uKAHckSvBvBoDGsfZrldWqqQ==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz",
+      "integrity": "sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g==",
      "requires": {
        "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1",
+        "jss": "10.6.0",
        "tiny-warning": "^1.0.2"
      }
    },
    "jss-plugin-props-sort": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.1.tgz",
-      "integrity": "sha512-t+2vcevNmMg4U/jAuxlfjKt46D/jHzCPEjsjLRj/J56CvP7Iy03scsUP58Iw8mVnaV36xAUZH2CmAmAdo8994g==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz",
+      "integrity": "sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw==",
      "requires": {
        "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1"
+        "jss": "10.6.0"
      }
    },
    "jss-plugin-rule-value-function": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.1.tgz",
-      "integrity": "sha512-3gjrSxsy4ka/lGQsTDY8oYYtkt2esBvQiceGBB4PykXxHoGRz14tbCK31Zc6DHEnIeqsjMUGbq+wEly5UViStQ==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz",
+      "integrity": "sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA==",
      "requires": {
        "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1",
+        "jss": "10.6.0",
        "tiny-warning": "^1.0.2"
      }
    },
    "jss-plugin-vendor-prefixer": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.1.tgz",
-      "integrity": "sha512-cLkH6RaPZWHa1TqSfd2vszNNgxT1W0omlSjAd6hCFHp3KIocSrW21gaHjlMU26JpTHwkc+tJTCQOmE/O1A4FKQ==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz",
+      "integrity": "sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ==",
      "requires": {
        "@babel/runtime": "^7.3.1",
        "css-vendor": "^2.0.8",
-        "jss": "10.5.1"
+        "jss": "10.6.0"
      }
    },
    "jsx-ast-utils": {
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
  "private": true,
  "dependencies": {
    "@datadog/browser-rum": "^2.6.2",
-    "@material-ui/core": "^4.11.2",
+    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.2",
--- a/public/index.html
+++ b/public/index.html
@@ -7,13 +7,13 @@
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
-      content="Web site created using create-react-app"
+      content="Fisker Admin Portal"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-    <title>File Upload App</title>
+    <title>Fisker Admin Portal</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "OTA Admin Portal",
-  "name": "Fisker OTA Admin Portal",
+  "short_name": "Admin Portal",
+  "name": "Fisker Admin Portal",
  "icons": [
    {
      "src": "favicon.ico",
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -1,6 +1,7 @@
-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";
@@ -19,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);
@@ -27,67 +48,101 @@ 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 () => {
-    const container = await renderRoute("/package-upload");
-    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
-    expect(container).toMatchSnapshot();
+    await check("/package-upload", "span.MuiButton-label", "Sign In");
  });

  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");
  });
 })
--- a/src/components/App/snapshots/App.test.js.snap
+++ b/src/components/App/snapshots/App.test.js.snap
--- a/src/components/Cars/StatusModal/index.jsx
+++ b/src/components/Cars/StatusModal/index.jsx
@@ -49,7 +49,7 @@ export default function CarStatusModal(props) {
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
-        open={props.vin}
+        open={props.vin !== null && props.vin !== undefined}
        onClose={props.handleClose}
        BackdropComponent={Backdrop}
        BackdropProps={{
--- a/src/components/Contexts/UpdatesContext.test.jsx
+++ b/src/components/Contexts/UpdatesContext.test.jsx
@@ -7,8 +7,8 @@ import {
  fireEvent,
  waitFor,
 } from "@testing-library/react";
-import { UpdatesProvider, useUpdatesContext } from "../Contexts/UpdatesContext";
-import { StatusProvider, useStatusContext } from "../Contexts/StatusContext";
+import { UpdatesProvider, useUpdatesContext } from "./UpdatesContext";
+import { StatusProvider, useStatusContext } from "./StatusContext";
 import { TEST_AUTH_OBJECT } from "../../utils/testing";

 describe("UpdatesContext", () => {
--- a/src/components/Contexts/mocks/UpdatesContext.jsx
+++ b/src/components/Contexts/mocks/UpdatesContext.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+const UpdatesContext = React.createContext();
+
+let busy = false;
+let packages = [];
+let totalPackages = 0;
+let carUpdates = [];
+let totalCarUpdates = 0;
+
+export const UpdatesProvider = ({ children }) => {
+  return <div data-testid="mocked-updatesprovider">{children}</div>;
+};
+
+export const useUpdatesContext = () => ({
+  busy,
+  packages,
+  totalPackages,
+  carUpdates,
+  totalCarUpdates,
+  getPackages: jest.fn(() => packages),
+  updatePackage: jest.fn((data) => data),
+  createCarUpdates: jest.fn((data) => data),
+  getCarUpdates: jest.fn(() => carUpdates),
+  getVINUpdates: jest.fn(() => carUpdates),
+});
--- a/src/components/Contexts/mocks/VehicleContext.jsx
+++ b/src/components/Contexts/mocks/VehicleContext.jsx
@@ -2,6 +2,7 @@ import React from "react";

 let busy = false;
 let vehicles = [];
+let totalVehicles = 0;
 let error = null;

 export const VehicleProvider = ({ children }) => {
@@ -11,6 +12,7 @@ export const VehicleProvider = ({ children }) => {
 export const useVehicleContext = () => ({
  busy,
  vehicles,
+  totalVehicles,
  getVehicles: jest.fn(() => vehicles),
  addVehicle: jest.fn(),
 });
--- a/src/components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.jsx
@@ -2,25 +2,60 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Typography } from "@material-ui/core";

+const reload = () => {
+  window.location.reload();
+};
 export default class ErrorBoundary extends Component {
  state = {
    error: "",
    errorInfo: "",
    hasError: false,
  };
+
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
+
  componentDidCatch(error, errorInfo) {
    this.setState({ errorInfo });
  }
+
  render() {
-    if (this.state.hasError)
+    if (this.state.hasError) {
+      if (this.state.error && this.state.error.name === "ChunkLoadError") {
+        reload();
+        return;
+      }
+
      return (
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+        >
          <Typography variant="h3" align="center">
-          Client-side Error Occured and Logged
+            Sorry, an error has occured and been logged
          </Typography>
+          <Typography
+            variant="h5"
+            align="center"
+            style={{
+              cursor: "pointer",
+              textDecorationColor: "Blue",
+              textDecorationStyle: "solid",
+              textDecorationLine: "underline",
+              color: "Blue",
+            }}
+            onClick={reload}
+          >
+            Click to reload
+          </Typography>
+        </div>
      );
+    }
    return this.props.children;
  }
 }