CEC-1230 Datascope opens iframe dashboard (#174)

* CEC-1230 Datascope opens iframe dashboard

* Clean up

src/components/Fleets/Add/__snapshots__/index.test.jsx.snap

@@ -15,11 +15,11 @@ exports[`FleetAddForm Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -55,10 +55,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Name
@@ -85,19 +85,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -111,7 +111,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -136,19 +136,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -187,20 +187,20 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70 PrivateRadioButtonIcon-checked-72"
+                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
                       >
                         <svg
                           aria-hidden="true"
@@ -214,7 +214,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -239,19 +239,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -265,7 +265,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -290,19 +290,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -316,7 +316,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -341,19 +341,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -367,7 +367,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -402,14 +402,14 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -468,10 +468,10 @@ exports[`FleetAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -486,13 +486,13 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -553,10 +553,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
@@ -567,7 +567,7 @@ exports[`FleetAddForm Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

src/components/Fleets/Add/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderFleetAdd = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderFleetAdd = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetAddForm", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetAdd();

src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap

@@ -15,11 +15,11 @@ exports[`FleetCANFilterAdd Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -56,10 +56,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Fleet Name
@@ -102,10 +102,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Interval
@@ -153,7 +153,7 @@ exports[`FleetCANFilterAdd Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

src/components/Fleets/Status/CANFilters/Add/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetCANFilterAdd = async () => {
   const { container } = render(
@@ -23,11 +24,15 @@ const renderFleetCANFilterAdd = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("FleetCANFilterAdd", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetCANFilterAdd();

src/components/Fleets/Status/CANFilters/Table/__snapshots__/index.test.jsx.snap

@@ -15,16 +15,16 @@ exports[`FleetCANFiltersTable Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-9"
+                  class="makeStyles-labelInline-0"
                   href="/fleet/undefined/filter-add"
                 >
                   <svg
@@ -41,10 +41,10 @@ exports[`FleetCANFiltersTable Render 1`] = `
               </div>
               <div
                 align="right"
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

src/components/Fleets/Status/CANFilters/Table/index.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../../../Contexts/FleetContext");
 jest.mock("../../../../Contexts/StatusContext");
 jest.mock("../../../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetCANFiltersTable = async () => {
   const { container } = render(
@@ -26,11 +27,15 @@ const renderFleetCANFiltersTable = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("FleetCANFiltersTable", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetCANFiltersTable();

src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap

@@ -15,11 +15,11 @@ exports[`FleetCANFilterUpdate Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -56,10 +56,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Fleet Name
@@ -103,10 +103,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Interval
@@ -163,7 +163,7 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

src/components/Fleets/Status/CANFilters/Update/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetCANFilterUpdate = async () => {
   const { container } = render(
@@ -23,11 +24,15 @@ const renderFleetCANFilterUpdate = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("FleetCANFilterUpdate", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetCANFilterUpdate();

src/components/Fleets/Status/CANFiltersTab.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -10,7 +10,8 @@ import { BrowserRouter } from "react-router-dom";
 
 import { setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import CANFiltersTab from "./CANFiltersTab"
+import CANFiltersTab from "./CANFiltersTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCANFitlersTab = async () => {
   const { container } = render(
@@ -18,11 +19,17 @@ const renderCANFitlersTab = async () => {
       <CANFiltersTab name="US-TEST" />
     </BrowserRouter>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("CANFiltersTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCANFitlersTab();

src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap

@@ -15,13 +15,13 @@ exports[`FleetDetailsTab Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >
                 <p>
                   <b>
@@ -45,7 +45,7 @@ exports[`FleetDetailsTab Render 1`] = `
                 </p>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >
                 <b>
                   CANBus
@@ -87,7 +87,7 @@ exports[`FleetDetailsTab Render 1`] = `
                 </p>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >
                 <a
                   class=""

src/components/Fleets/Status/Details/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../utils/snapshot";
 
 const renderFleetDetailsTab = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderFleetDetailsTab = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetDetailsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetDetailsTab();

src/components/Fleets/Status/DetailsTab.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,27 +12,34 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./DetailsTab"
+import MainForm from "./DetailsTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderDetailsTab = async () => {
   const { container } = render(
     <FleetProvider>
       <StatusProvider>
         <UserProvider>
-          <MemoryRouter initialEntries={['/testroute/US-TEST']}>
+          <MemoryRouter initialEntries={["/testroute/US-TEST"]}>
             <Route path="/testroute/:name">
               <MainForm name="US-TEST" />
             </Route>
-          </MemoryRouter >
+          </MemoryRouter>
         </UserProvider>
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("DetailsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderDetailsTab();

src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap

@@ -15,11 +15,11 @@ exports[`FleetVehicleAdd Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -55,10 +55,10 @@ exports[`FleetVehicleAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         VIN
@@ -69,7 +69,7 @@ exports[`FleetVehicleAdd Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

src/components/Fleets/Status/Vehicles/Add/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetVehicleAdd = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderFleetVehicleAdd = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetVehicleAdd", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetVehicleAdd();

src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap

@@ -15,16 +15,16 @@ exports[`FleetVehiclesTable Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-9"
+                  class="makeStyles-labelInline-0"
                   href="/fleet/undefined/vehicle-add"
                 >
                   <svg
@@ -41,10 +41,10 @@ exports[`FleetVehiclesTable Render 1`] = `
               </div>
               <div
                 align="right"
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

src/components/Fleets/Status/Vehicles/Table/index.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../../../Contexts/FleetContext");
 jest.mock("../../../../Contexts/StatusContext");
 jest.mock("../../../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetVehiclesTable = async () => {
   const { container } = render(
@@ -26,11 +27,17 @@ const renderFleetVehiclesTable = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetVehiclesTable", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetVehiclesTable();

src/components/Fleets/Status/VehiclesTab.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -10,7 +10,8 @@ import { BrowserRouter } from "react-router-dom";
 
 import { setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import VehiclesTab from "./VehiclesTab"
+import VehiclesTab from "./VehiclesTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderVehiclesTab = async () => {
   const { container } = render(
@@ -18,11 +19,17 @@ const renderVehiclesTab = async () => {
       <VehiclesTab name="US-TEST" />
     </BrowserRouter>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("VehiclesTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehiclesTab();

src/components/Fleets/Status/__snapshots__/CANFiltersTab.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`CANFiltersTab Render 1`] = `
 <div>
   <div
-    class="makeStyles-paper-3 makeStyles-tableSize-53"
+    class="makeStyles-paper-0 makeStyles-tableSize-0"
   >
     <h6
       class="MuiTypography-root MuiTypography-h6"
@@ -14,16 +14,16 @@ exports[`CANFiltersTab Render 1`] = `
       data-testid="mocked-fleetprovider"
     >
       <div
-        class="makeStyles-paper-3 makeStyles-tableSize-53"
+        class="makeStyles-paper-0 makeStyles-tableSize-0"
       >
         <div
-          class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+          class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
         >
           <div
-            class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+            class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
           >
             <a
-              class="makeStyles-labelInline-9"
+              class="makeStyles-labelInline-0"
               href="/fleet/undefined/filter-add"
             >
               <svg
@@ -40,10 +40,10 @@ exports[`CANFiltersTab Render 1`] = `
           </div>
           <div
             align="right"
-            class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+            class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
           >
             <div
-              class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+              class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
             >
               <label
                 class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap

@@ -12,7 +12,7 @@ exports[`DetailsTab Render 1`] = `
         data-testid="mocked-userprovider"
       >
         <div
-          class="makeStyles-paper-3 makeStyles-tableSize-53"
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <h6
             class="MuiTypography-root MuiTypography-h6"
@@ -23,13 +23,13 @@ exports[`DetailsTab Render 1`] = `
             data-testid="mocked-fleetprovider"
           >
             <div
-              class="makeStyles-paper-3 makeStyles-tableSize-53"
+              class="makeStyles-paper-0 makeStyles-tableSize-0"
             >
               <div
-                class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+                class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
               >
                 <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <p>
                     <b>
@@ -54,7 +54,7 @@ exports[`DetailsTab Render 1`] = `
                   </p>
                 </div>
                 <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <b>
                     CANBus
@@ -96,7 +96,7 @@ exports[`DetailsTab Render 1`] = `
                   </p>
                 </div>
                 <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <a
                     class=""

src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`VehiclesTab Render 1`] = `
 <div>
   <div
-    class="makeStyles-paper-3 makeStyles-tableSize-53"
+    class="makeStyles-paper-0 makeStyles-tableSize-0"
   >
     <h6
       class="MuiTypography-root MuiTypography-h6"
@@ -14,16 +14,16 @@ exports[`VehiclesTab Render 1`] = `
       data-testid="mocked-fleetprovider"
     >
       <div
-        class="makeStyles-paper-3 makeStyles-tableSize-53"
+        class="makeStyles-paper-0 makeStyles-tableSize-0"
       >
         <div
-          class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+          class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
         >
           <div
-            class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+            class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
           >
             <a
-              class="makeStyles-labelInline-9"
+              class="makeStyles-labelInline-0"
               href="/fleet/undefined/vehicle-add"
             >
               <svg
@@ -40,10 +40,10 @@ exports[`VehiclesTab Render 1`] = `
           </div>
           <div
             align="right"
-            class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+            class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
           >
             <div
-              class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+              class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
             >
               <label
                 class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

src/components/Fleets/Status/__snapshots__/index.test.jsx.snap

@@ -12,10 +12,10 @@ exports[`FleetStatus Render 1`] = `
         data-testid="mocked-userprovider"
       >
         <div
-          class="makeStyles-paper-3 makeStyles-tableSize-53"
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-62 makeStyles-tableToolbar-30"
+            class="MuiBox-root MuiBox-root-63 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -85,7 +85,7 @@ exports[`FleetStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-63 PrivateTabIndicator-colorSecondary-65 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-64 PrivateTabIndicator-colorSecondary-66 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
@@ -97,10 +97,10 @@ exports[`FleetStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-67"
+              class="MuiBox-root MuiBox-root-68"
             >
               <div
-                class="makeStyles-paper-3 makeStyles-tableSize-53"
+                class="makeStyles-paper-0 makeStyles-tableSize-0"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-h6"
@@ -111,13 +111,13 @@ exports[`FleetStatus Render 1`] = `
                   data-testid="mocked-fleetprovider"
                 >
                   <div
-                    class="makeStyles-paper-3 makeStyles-tableSize-53"
+                    class="makeStyles-paper-0 makeStyles-tableSize-0"
                   >
                     <div
-                      class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+                      class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
                     >
                       <div
-                        class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                        class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                       >
                         <p>
                           <b>
@@ -141,7 +141,7 @@ exports[`FleetStatus Render 1`] = `
                         </p>
                       </div>
                       <div
-                        class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                        class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                       >
                         <b>
                           CANBus
@@ -183,7 +183,7 @@ exports[`FleetStatus Render 1`] = `
                         </p>
                       </div>
                       <div
-                        class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                        class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                       >
                         <a
                           class=""

src/components/Fleets/Status/index.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import FleetStatus from "./index"
+import FleetStatus from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCarStatus = async () => {
   const { container } = render(
@@ -26,11 +27,17 @@ const renderCarStatus = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetStatus", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();

src/components/Fleets/Table/__snapshots__/index.test.jsx.snap

@@ -15,16 +15,16 @@ exports[`FleetTable Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-9"
+                  class="makeStyles-labelInline-0"
                   href="/fleet-add"
                 >
                   <svg
@@ -41,10 +41,10 @@ exports[`FleetTable Render 1`] = `
               </div>
               <div
                 align="right"
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -95,7 +95,7 @@ exports[`FleetTable Render 1`] = `
                 </div>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textRightAlign-49 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               />
             </div>
             <table

src/components/Fleets/Table/index.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderFleetTable = async () => {
   const { container } = render(
@@ -26,11 +27,17 @@ const renderFleetTable = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetTable", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetTable();

src/components/Fleets/Update/__snapshots__/index.test.jsx.snap

@@ -15,11 +15,11 @@ exports[`FleetUpdate Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -57,10 +57,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Name
@@ -87,19 +87,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -113,7 +113,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -138,19 +138,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -164,7 +164,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -189,20 +189,20 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70 PrivateRadioButtonIcon-checked-72"
+                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
                       >
                         <svg
                           aria-hidden="true"
@@ -216,7 +216,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -241,19 +241,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -267,7 +267,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -292,19 +292,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -318,7 +318,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -343,19 +343,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -369,7 +369,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -404,14 +404,14 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -470,10 +470,10 @@ exports[`FleetUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -488,13 +488,13 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -554,10 +554,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
@@ -568,7 +568,7 @@ exports[`FleetUpdate Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

src/components/Fleets/Update/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderFleetUpdate = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderFleetUpdate = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetUpdate", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetUpdate();