CEC-464 can filters forms (#118)

* can filters forms and lists

* unit tests

* updating warnings and tests

* merge develop

* fixed snapshots

* update jest mocks

* updating tests

src/components/Controls/CarUpdateStatusProgress/__snapshots__/CarUpdateStatusProgress.test.jsx.snap

@@ -40,7 +40,7 @@ exports[`CarUpdateStatusProgress Render download_complete 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -201,7 +201,7 @@ exports[`CarUpdateStatusProgress Render download_error 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -362,7 +362,7 @@ exports[`CarUpdateStatusProgress Render download_start ECU 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -523,7 +523,7 @@ exports[`CarUpdateStatusProgress Render download_started 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -684,7 +684,7 @@ exports[`CarUpdateStatusProgress Render downloading 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -845,7 +845,7 @@ exports[`CarUpdateStatusProgress Render install_complete ECU 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -1006,7 +1006,7 @@ exports[`CarUpdateStatusProgress Render install_error 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -1167,7 +1167,7 @@ exports[`CarUpdateStatusProgress Render installing 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -1328,7 +1328,7 @@ exports[`CarUpdateStatusProgress Render manifest_accepted 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -1489,7 +1489,7 @@ exports[`CarUpdateStatusProgress Render manifest_received 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div
@@ -1650,7 +1650,7 @@ exports[`CarUpdateStatusProgress Render package_download_complete 1`] = `
       <p
         class="MuiTypography-root MuiTypography-body1"
       >
-        Recieved
+        Received
       </p>
     </div>
     <div

src/components/Controls/CarUpdateStatusProgress/index.jsx

@@ -12,7 +12,7 @@ const PHASES = [
     progress: () => 100,
   },
   {
-    label: "Recieved",
+    label: "Received",
     events: ["manifest_accepted", "manifest_received"],
     progress: () => 100,
   },

src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabPanel Render 1`] = `
+<div>
+  <div
+    aria-labelledby="tab-0"
+    id="tabpanel-0"
+    role="tabpanel"
+  >
+    <div
+      class="MuiBox-root MuiBox-root-1"
+    >
+      <div>
+        Test
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Controls/TabPanel/index.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box } from "@material-ui/core";
+
+function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`tabpanel-${index}`}
+            aria-labelledby={`tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box sx={{ p: 3 }}>
+                    {children}
+                </Box>
+            )}
+        </div >
+    );
+}
+
+export default TabPanel;

src/components/Controls/TabPanel/index.test.jsx

@@ -0,0 +1,21 @@
+import { render, waitFor } from "@testing-library/react";
+
+import TabPanel from "./index"
+
+
+const renderTabPanel = async () => {
+  const { container } = render(
+    <TabPanel value={0} index={0}>
+      <div>Test</div>
+    </TabPanel>
+  );
+  await waitFor(() => { });
+  return container;
+};
+
+describe("TabPanel", () => {
+  it("Render", async () => {
+    const container = await renderTabPanel();
+    expect(container).toMatchSnapshot();
+  });
+});