passing react tests

2021-07-21 17:15:34 -07:00
parent 1bb679a3f8
commit e09ce9bd41
16 changed files with 747 additions and 332 deletions
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -4,7 +4,7 @@ jest.mock("../Contexts/UpdatesContext");
 jest.mock("../Contexts/UserContext");
 jest.mock("../../services/monitoring");

-import { render, screen, cleanup, waitForElementToBeRemoved } from "@testing-library/react";
+import { render, screen, cleanup, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
 import { setToken } from "../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../utils/testing"
 import App from ".";
@@ -26,6 +26,13 @@ const check = async (path, selector, compare) => {
  expect(container).toMatchSnapshot();
 };

+const sleepAndCheck = async (path, selector, compare) => {
+  const container = await renderRoute(path);
+  await waitFor(() => { });
+  expect(container.querySelector(selector).innerHTML).toEqual(compare);
+  expect(container).toMatchSnapshot();
+};
+
 describe("App", () => {
  beforeAll(() => {
    // Stablize Table Pagination control ids 
@@ -93,12 +100,12 @@ describe("App", () => {

  it("Route / authenticated", async () => {
    setToken(TEST_AUTH_OBJECT);
-    await check("/", "h1", "Welcome John!");
+    await sleepAndCheck("/", "h1", "Welcome John!");
  });

  it("Route /home authenticated", async () => {
    setToken(TEST_AUTH_OBJECT);
-    await check("/home", "h1", "Welcome John!");
+    await sleepAndCheck("/home", "h1", "Welcome John!");
  });

  it("Route /package-upload authenticated", async () => {
--- a/src/components/App/snapshots/App.test.js.snap
+++ b/src/components/App/snapshots/App.test.js.snap
--- a/src/components/CarUpdates/Status/index.jsx
+++ b/src/components/CarUpdates/Status/index.jsx
@@ -150,8 +150,8 @@ const MainForm = () => {
                inputProps: { "aria-label": "rows per page" },
                native: true,
              }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
            />
          </TableRow>
        </TableFooter>
--- a/src/components/Cars/CarSelectionTable/index.jsx
+++ b/src/components/Cars/CarSelectionTable/index.jsx
@@ -169,8 +169,8 @@ const CarSelectionTable = (props) => {
                inputProps: { "aria-label": "rows per page" },
                native: true,
              }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
            />
          </TableRow>
        </TableFooter>
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -163,8 +163,8 @@ const MainForm = () => {
                inputProps: { "aria-label": "rows per page" },
                native: true,
              }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
            />
          </TableRow>
        </TableFooter>
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -147,8 +147,8 @@ const MainForm = () => {
                inputProps: { "aria-label": "rows per page" },
                native: true,
              }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
            />
          </TableRow>
        </TableFooter>
--- a/src/components/Contexts/mocks/VehicleContext.jsx
+++ b/src/components/Contexts/mocks/VehicleContext.jsx
@@ -39,6 +39,9 @@ export const useVehicleContext = () => ({

    return result;
  }),
+  getLocations: jest.fn().mockResolvedValue([
+    { "altitude": 5, "longitude": 10, "latitude": 15, "vin": "TESTVIN123" },
+  ])
 });

 export const setBusy = (val) => {
--- a/src/components/Table/HeaderSortable/index.jsx
+++ b/src/components/Table/HeaderSortable/index.jsx
@@ -75,7 +75,7 @@ const HeaderSortable = (props) => {
          <TableCell
            key={column.id}
            align={column.numeric ? "right" : "center"}
-            padding={column.disablePadding ? "none" : "default"}
+            padding={column.disablePadding ? "none" : "normal"}
            sortDirection={orderBy === column.id ? order : false}
          >
            {ColumnLabel(column)}
--- a/src/components/UpdatePackages/Create/snapshots/Create.test.js.snap
+++ b/src/components/UpdatePackages/Create/snapshots/Create.test.js.snap
@@ -46,10 +46,10 @@ exports[`File Upload Form Should render 1`] = `
            />
            <fieldset
              aria-hidden="true"
-              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
            >
              <legend
-                class="PrivateNotchedOutline-legendLabelled-35"
+                class="PrivateNotchedOutline-legendLabelled-39"
              >
                <span>
                  Package name
@@ -92,10 +92,10 @@ exports[`File Upload Form Should render 1`] = `
            />
            <fieldset
              aria-hidden="true"
-              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
            >
              <legend
-                class="PrivateNotchedOutline-legendLabelled-35"
+                class="PrivateNotchedOutline-legendLabelled-39"
              >
                <span>
                  Version
@@ -138,10 +138,10 @@ exports[`File Upload Form Should render 1`] = `
            />
            <fieldset
              aria-hidden="true"
-              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
            >
              <legend
-                class="PrivateNotchedOutline-legendLabelled-35"
+                class="PrivateNotchedOutline-legendLabelled-39"
              >
                <span>
                  Description
@@ -185,10 +185,10 @@ exports[`File Upload Form Should render 1`] = `
            />
            <fieldset
              aria-hidden="true"
-              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
            >
              <legend
-                class="PrivateNotchedOutline-legendLabelled-35"
+                class="PrivateNotchedOutline-legendLabelled-39"
              >
                <span>
                  Release Notes URL
--- a/src/components/UpdatePackages/List/index.jsx
+++ b/src/components/UpdatePackages/List/index.jsx
@@ -216,8 +216,8 @@ const UpdatePackagesList = () => {
                inputProps: { "aria-label": "rows per page" },
                native: true,
              }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
            />
          </TableRow>
        </TableFooter>
--- a/src/components/VehicleMap/index.jsx
+++ b/src/components/VehicleMap/index.jsx
@@ -1,74 +1,127 @@
 import React, { useEffect, useState } from "react";
 import useStyles from "../useStyles";
-import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet'
+import L from "leaflet";
+import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
+import { Button } from "@material-ui/core";

 import { useUserContext } from "../Contexts/UserContext";
 import { useStatusContext } from "../Contexts/StatusContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
+import GreenCarIcon from "../../assets/green-car.png";
+import RedCarIcon from "../../assets/red-car.png";

 const Component = () => {
  const classes = useStyles();
  const { token } = useUserContext();
  const { setTitle } = useStatusContext();
-  const { getLocations, getState } = useVehicleContext();
+  const { getConnections, getLocations, getState } = useVehicleContext();
+
+  const REQUEST_INTERVAL = 10000;

  useEffect(() => {
    setTitle("");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  const [center, setCenter] = useState([0, 0])
+  const [center, setCenter] = useState([0, 0]);
  const [zoom, setZoom] = useState(2);
  const [markers, setMarkers] = useState([]);

-  const retrieveLocations = () => {
-    return getLocations(token)
-      .then((result) => {
-        var points = result.data.map(point => [point.latitude, point.longitude, point.vin]);
-        setMarkers(points);
-        console.log(points);
-        return points
+  useEffect(() => {
+    retrieveAndStoreLocations()
+      .then(points => {
+        centerAroundMarkers(points);
      })
-      .catch(() => console.log("token error"));
+    const id = setInterval(function () {
+      retrieveAndStoreLocations();
+    }, REQUEST_INTERVAL);
+    return () => { clearInterval(id) };
+  }, []);
+
+  const retrieveAndStoreLocations = () => {
+    return getLocations(token)
+      .then(result => {
+        if (result.data != null) {
+          var points = result.data.map(point => [point.latitude, point.longitude, point.vin]);
+          setMarkers(points);
+          return points
+        }
+        return []
+      })
+      .catch(error => console.log(error));
  }

  const centerAroundMarkers = (markers) => {
+    if (markers == null) {
+      markers = []
+    }
    var coord = markers.reduce((coord, marker) => {
      coord[0] += marker[0] / markers.length;
      coord[1] += marker[1] / markers.length;
      return coord;
    }, [0, 0])

-    console.log(coord);
    setCenter(coord);
    setZoom(4);
  }

-  useEffect(() => {
-    retrieveLocations()
-      .then(points => {
-        centerAroundMarkers(points);
-      })
-  }, []);
+  const [connections, setConnections] = useState({});

  useEffect(() => {
-    const id = setInterval(function () {
-      retrieveLocations();
-    }, 10000)
-    return () => { clearInterval(id) }
-  }, []);
+    if (markers.length > 0) {
+      var vins = markers.map(marker => marker[2]);
+      getConnections(vins, token)
+        .then(connections => {
+          setConnections(connections);
+        })
+    }
+  }, [markers])

-  const retrieveState = (e) => {
-    var vin = e.target.options.title;
+  const [selectedVIN, setSelectedVIN] = useState(null);
+  const [carState, setCarState] = useState(null);
+
+  useEffect(() => {
+    if (selectedVIN != null) {
+      retrieveAndStoreCarState(selectedVIN);
+      const id = setInterval(function () {
+        retrieveAndStoreCarState(selectedVIN);
+      }, REQUEST_INTERVAL);
+      return () => { clearInterval(id) };
+    }
+  }, [selectedVIN]);
+
+  const selectCar = (e, vin) => {
+    e.preventDefault();
+    setSelectedVIN(vin);
+  }
+
+  const retrieveAndStoreCarState = (vin) => {
    getState(token, vin)
      .then(results => {
-        console.log(results);
-        setSelected({ ...results.data, vin: vin });
+        setCarState({ ...results.data, vin: vin });
      });
  }

-  const [selected, setSelected] = useState(null);
+  const handleClose = () => {
+    setSelectedVIN(null);
+    setCarState(null);
+  };
+
+  function getCarIcon(vin) {
+    var icon = RedCarIcon;
+
+    if (connections[vin]) {
+      icon = GreenCarIcon;
+    } else {
+      icon = RedCarIcon;
+    }
+
+    return new L.Icon({
+      iconUrl: icon,
+      iconAnchor: [15, 0]
+    });
+  }

  return (
    <MapContainer
@@ -83,45 +136,60 @@ const Component = () => {
        attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
-      <ChangeView center={center} zoom={zoom} />
+      <CenterFocus center={center} zoom={zoom} />

-      {
-        markers.map((marker) => (
-          <Marker
-            key={marker[2]}
-            position={[marker[0], marker[1]]}
-            title={marker[2]}
-            opacity={0.9}
-            eventHandlers={{
-              click: retrieveState
-            }}
-          >
-            <Popup>
-              {marker[2]} <br /> see more
-            </Popup>
-          </Marker>
-        ))
+      {markers.map((marker) => (
+        <Marker
+          icon={getCarIcon(marker[2])}
+          key={marker[2]}
+          position={[marker[0], marker[1]]}
+          title={marker[2]}
+          opacity={0.9}
+        >
+          <Popup>
+            <div align="center">
+              <p className={classes.markerTitle}><b>{marker[2]}</b></p>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                onClick={e => selectCar(e, marker[2])}
+              >
+                View Stats
+              </Button>
+            </div>
+          </Popup>
+        </Marker>
+      ))
      }

      {
-        selected != null && (
+        carState ? (
          <VehiclePopUp
-            vin={selected.vin}
-            online={selected.online}
-            doors={selected.doors}
-            location={selected.location}
-            windows={selected.windows}
+            vin={carState.vin}
+            online={carState.online}
+            battery={carState.battery}
+            doors={carState.doors}
+            location={carState.location}
+            windows={carState.windows}
+            className={classes.popup}
+            onClose={handleClose}
          />
-        )
+        ) : null
      }
    </MapContainer >
  );
 };

-const ChangeView = ({ center, zoom }) => {
+const CenterFocus = ({ center, zoom }) => {
  const map = useMap();
-  map.flyTo(center, zoom, { duration: 1.5 });
-  console.log("centered");
+  useEffect(() => {
+    if (center[0] === 0 && center[1] === 0) {
+      center = [0, 0]
+      zoom = 2
+    }
+    map.flyTo(center, zoom, { duration: 1.5 });
+  }, [center, zoom]);
  return null;
 }

--- a/src/components/VehicleMap/popup.jsx
+++ b/src/components/VehicleMap/popup.jsx
@@ -1,22 +1,74 @@
 import React from "react";
+import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogContent from '@material-ui/core/DialogContent';
+import MuiDialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+import useStyles from "../useStyles";
+
+const VehiclePopUp = (props) => {
+    const classes = useStyles();
+    const { vin, online, battery, doors, location, windows, onClose } = props;

-const VehiclePopUp = ({ vin, online, doors, location, windows }) => {
-    console.log(location);
    return (
-        <Dialog aria-labelledby="simple-dialog-title" open={true}>
-            <DialogTitle>{vin}</DialogTitle>
-            <p>{online.toString()}</p>
-            {/* {doors != null && (
-                <ul>
-                    {doors.forEach((value, key) => (<li>{key}: {value.toString()}</li>))}
-                </ul>
-            )}
-            <ul>
-                {location != null && location.forEach((value, key) => (<li>{key}: {value.toString()}</li>))}
-            </ul> */}
-        </Dialog>
+        <Dialog
+            fullWidth
+            classes={{ paper: classes.popUp }}
+            open={true}
+            onClose={onClose}
+        >
+            <DialogTitle align="center" onClose={onClose}>{vin}</DialogTitle>
+            <div align="center" className={classes.popUpContent}>
+                <p><b>Connected</b>: {online.toString()}</p>
+                {online && (
+                    <div>
+                        {battery != null && (
+                            <p><b>battery</b>: {battery.percent}%</p>
+                        )}
+                        {doors != null && (
+                            <div>
+                                <h3>Doors</h3>
+                                {Object.entries(doors).map((value) => (<p><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
+                            </div>
+                        )}
+                        {windows != null && (
+                            <div>
+                                <h3>Windows</h3>
+                                {Object.entries(windows).map((value) => (<p><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
+                            </div>
+                        )}
+                        {location != null && (
+                            <div>
+                                <h3>Location</h3>
+                                {Object.entries(location).map((value) => (<p><b>{value[0]}</b>: {value[1]}</p>))}
+                            </div>
+                        )}
+                    </div>
+                )}
+                {(!online || (battery == null && doors == null && location == null && windows == null)) && (
+                    <p>No vehicle data to display.</p>
+                )}
+            </div>
+        </Dialog >
+    );
+};
+
+const DialogTitle = (props) => {
+    const { children, onClose, ...other } = props;
+    const classes = useStyles();
+    return (
+        <MuiDialogTitle disableTypography className={classes.root} {...other}>
+            <Typography variant="h6">{children}</Typography>
+            {onClose ? (
+                <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
+                    <CloseIcon />
+                </IconButton>
+            ) : null}
+        </MuiDialogTitle>
    );
 };

--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -173,6 +173,28 @@ const useStyles = makeStyles((theme) => ({
    width: "100%",
    paddingTop: "56.25%",
  },
+  root: {
+    margin: 0,
+    padding: theme.spacing(2),
+  },
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+  markerTitle: {
+    margin: 5,
+  },
+  popUp: {
+    minHeight: "15vh",
+  },
+  popUpContent: {
+    "& p": {
+      margin: 0,
+    },
+    paddingBottom: "2vh",
+  },
 }));

 export default useStyles;