Merge branch 'develop' into release/0.0.3

.github/workflows/test.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "16"
           cache: "npm"
       - run: npm install
       - run: npm run build --if-present

README.md

@@ -6,7 +6,7 @@ Front-end web application for administrating services
 
 Running locally
 
-1. Install Node 14
+1. Install Node 16
 2. Run `npm install`
 3. Copy .env.template to .env and edit the service urls for authentication and api services
 4. Run `./run.sh` from the terminal

src/components/Contexts/CANFiltersContext.test.jsx

@@ -1,4 +1,4 @@
-jest.mock("../../services/CANFiltersAPI")
+jest.mock("../../services/CANFiltersAPI");
 
 import {
   render,
@@ -83,9 +83,7 @@ describe("CANFiltersContext", () => {
             <button data-testid="addFilterNoCANID" onClick={() => add({})} />
             <button
               data-testid="addFilter"
-              onClick={() =>
+              onClick={() => add({ can_id: "123", interval: 1000 })}
-                add({ can_id: "123", interval: 1000 })
-              }
             />
           </>
         );
@@ -149,13 +147,17 @@ describe("CANFiltersContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="updateFilterNull" onClick={() => update(null)} />
+            <button
-            <button data-testid="updateFilterNoCANID" onClick={() => update({})} />
+              data-testid="updateFilterNull"
+              onClick={() => update(null)}
+            />
+            <button
+              data-testid="updateFilterNoCANID"
+              onClick={() => update({})}
+            />
             <button
               data-testid="updateFilter"
-              onClick={() =>
+              onClick={() => update({ can_id: "123", interval: 1000 })}
-                update({ can_id: "123", interval: 1000 })
-              }
             />
           </>
         );
@@ -182,7 +184,10 @@ describe("CANFiltersContext", () => {
       await waitFor(() =>
         expect(screen.getByTestId("busy").innerHTML).toEqual("false")
       );
-      checkBaseResults("Cannot read property 'can_id' of null", "false");
+      checkBaseResults(
+        "Cannot read properties of null (reading 'can_id')",
+        "false"
+      );
     });
 
     it("updateFilterNoCANID", async () => {
@@ -219,14 +224,15 @@ describe("CANFiltersContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="deleteFilterNull" onClick={() => deleteF(null)} />
-            <button data-testid="deleteFilterNonexistent" onClick={() => deleteF(-1)} />
             <button
-              data-testid="deleteFilter"
+              data-testid="deleteFilterNull"
-              onClick={() =>
+              onClick={() => deleteF(null)}
-                deleteF(123)
-              }
             />
+            <button
+              data-testid="deleteFilterNonexistent"
+              onClick={() => deleteF(-1)}
+            />
+            <button data-testid="deleteFilter" onClick={() => deleteF(123)} />
           </>
         );
       };
@@ -276,14 +282,14 @@ describe("CANFiltersContext", () => {
 const expectedFiltersData = [
   {
     can_id: "123",
-    interval: 1000
+    interval: 1000,
   },
   {
     can_id: "456",
-    interval: 0
+    interval: 0,
   },
   {
     can_id: "789-1000",
-    interval: 5
+    interval: 5,
   },
 ];

src/components/Contexts/FleetContext.test.jsx

@@ -1,4 +1,4 @@
-jest.mock("../../services/fleetsAPI")
+jest.mock("../../services/fleetsAPI");
 
 import {
   render,
@@ -23,12 +23,12 @@ const checkFleetsResults = (error, busy, fleets) => {
 const checkFleetVehicleResults = (error, busy, vehicles) => {
   checkBaseResults(error, busy);
   expect(screen.getByTestId("fleet-vehicles").innerHTML).toEqual(vehicles);
-}
+};
 
 const checkFleetCANFilterResults = (error, busy, filters) => {
   checkBaseResults(error, busy);
   expect(screen.getByTestId("fleet-filters").innerHTML).toEqual(filters);
-}
+};
 
 const checkBaseResults = (error, busy) => {
   expect(screen.getByTestId("error").innerHTML).toEqual(error);
@@ -46,10 +46,7 @@ describe("FleetContext", () => {
             <div data-testid="error">{error}</div>
             <div data-testid="busy">{busy.toString()}</div>
             <div data-testid="fleets">{JSON.stringify(fleets)}</div>
-            <button
+            <button data-testid="getFleets" onClick={() => getFleets()} />
-              data-testid="getFleets"
-              onClick={() => getFleets()}
-            />
           </>
         );
       };
@@ -140,7 +137,11 @@ describe("FleetContext", () => {
             <button
               data-testid="addFleet"
               onClick={() =>
-                add({ name: "EU-WEST", log_level: "warn", canbus: { enabled: false } })
+                add({
+                  name: "EU-WEST",
+                  log_level: "warn",
+                  canbus: { enabled: false },
+                })
               }
             />
           </>
@@ -205,12 +206,22 @@ describe("FleetContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="updateFleetNull" onClick={() => update(null)} />
+            <button
-            <button data-testid="updateFleetNoName" onClick={() => update({})} />
+              data-testid="updateFleetNull"
+              onClick={() => update(null)}
+            />
+            <button
+              data-testid="updateFleetNoName"
+              onClick={() => update({})}
+            />
             <button
               data-testid="updateFleet"
               onClick={() =>
-                update({ name: "EU-WEST", log_level: "warn", canbus: { enabled: false } })
+                update({
+                  name: "EU-WEST",
+                  log_level: "warn",
+                  canbus: { enabled: false },
+                })
               }
             />
           </>
@@ -275,13 +286,17 @@ describe("FleetContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="deleteFleetNull" onClick={() => deleteF(null)} />
+            <button
-            <button data-testid="deleteFleetNonexistent" onClick={() => deleteF("INVALID")} />
+              data-testid="deleteFleetNull"
+              onClick={() => deleteF(null)}
+            />
+            <button
+              data-testid="deleteFleetNonexistent"
+              onClick={() => deleteF("INVALID")}
+            />
             <button
               data-testid="deleteFleet"
-              onClick={() =>
+              onClick={() => deleteF("US-WEST")}
-                deleteF("US-WEST")
-              }
             />
           </>
         );
@@ -331,13 +346,16 @@ describe("FleetContext", () => {
   describe("getFleetVehicles", () => {
     beforeEach(() => {
       const TestComp = () => {
-        const { busy, error, fleetVehicles, getFleetVehicles } = useFleetContext();
+        const { busy, error, fleetVehicles, getFleetVehicles } =
+          useFleetContext();
 
         return (
           <>
             <div data-testid="error">{error}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <div data-testid="fleet-vehicles">{JSON.stringify(fleetVehicles)}</div>
+            <div data-testid="fleet-vehicles">
+              {JSON.stringify(fleetVehicles)}
+            </div>
             <button
               data-testid="getFleetVehicles"
               onClick={() => getFleetVehicles("US-WEST")}
@@ -365,7 +383,11 @@ describe("FleetContext", () => {
       await waitFor(() =>
         expect(screen.getByTestId("fleet-vehicles").innerHTML).not.toBe("[]")
       );
-      checkFleetVehicleResults("", "false", JSON.stringify(expectedFleetVehiclesData));
+      checkFleetVehicleResults(
+        "",
+        "false",
+        JSON.stringify(expectedFleetVehiclesData)
+      );
     });
   });
 
@@ -386,13 +408,17 @@ describe("FleetContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="addFleetVehicleNull" onClick={() => add(null)} />
+            <button
-            <button data-testid="addFleetVehicleNoName" onClick={() => add({})} />
+              data-testid="addFleetVehicleNull"
+              onClick={() => add(null)}
+            />
+            <button
+              data-testid="addFleetVehicleNoName"
+              onClick={() => add({})}
+            />
             <button
               data-testid="addFleetVehicle"
-              onClick={() =>
+              onClick={() => add("US-TEST", { vin: "TESTVIN1234567890" })}
-                add("US-TEST", { vin: "TESTVIN1234567890" })
-              }
             />
           </>
         );
@@ -456,13 +482,17 @@ describe("FleetContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="deleteFleetVehicleNull" onClick={() => deleteFV("US-WEST", null)} />
+            <button
-            <button data-testid="deleteFleetVehicleInvalid" onClick={() => deleteFV("US-WEST", "INVALID")} />
+              data-testid="deleteFleetVehicleNull"
+              onClick={() => deleteFV("US-WEST", null)}
+            />
+            <button
+              data-testid="deleteFleetVehicleInvalid"
+              onClick={() => deleteFV("US-WEST", "INVALID")}
+            />
             <button
               data-testid="deleteFleetVehicle"
-              onClick={() =>
+              onClick={() => deleteFV("US-WEST", { vin: "USWESTVIN12345678" })}
-                deleteFV("US-WEST", { vin: "USWESTVIN12345678" })
-              }
             />
           </>
         );
@@ -489,7 +519,10 @@ describe("FleetContext", () => {
       await waitFor(() =>
         expect(screen.getByTestId("busy").innerHTML).toEqual("false")
       );
-      checkBaseResults("Cannot read property 'vin' of null", "false");
+      checkBaseResults(
+        "Cannot read properties of null (reading 'vin')",
+        "false"
+      );
     });
 
     it("deleteFleetVehicleNonexistent", async () => {
@@ -512,13 +545,16 @@ describe("FleetContext", () => {
   describe("getFleetCANFilters", () => {
     beforeEach(() => {
       const TestComp = () => {
-        const { busy, error, fleetCANFilters, getFleetCANFilters } = useFleetContext();
+        const { busy, error, fleetCANFilters, getFleetCANFilters } =
+          useFleetContext();
 
         return (
           <>
             <div data-testid="error">{error}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <div data-testid="fleet-filters">{JSON.stringify(fleetCANFilters)}</div>
+            <div data-testid="fleet-filters">
+              {JSON.stringify(fleetCANFilters)}
+            </div>
             <button
               data-testid="getFleetCANFilters"
               onClick={() => getFleetCANFilters("US-TEST")}
@@ -546,7 +582,11 @@ describe("FleetContext", () => {
       await waitFor(() =>
         expect(screen.getByTestId("fleet-filters").innerHTML).not.toBe("[]")
       );
-      checkFleetCANFilterResults("", "false", JSON.stringify(expectedFleetCANFiltersData));
+      checkFleetCANFilterResults(
+        "",
+        "false",
+        JSON.stringify(expectedFleetCANFiltersData)
+      );
     });
   });
 
@@ -567,13 +607,17 @@ describe("FleetContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="addFleetCANFilterNull" onClick={() => add(null)} />
+            <button
-            <button data-testid="addFleetCANFilterNoName" onClick={() => add({})} />
+              data-testid="addFleetCANFilterNull"
+              onClick={() => add(null)}
+            />
+            <button
+              data-testid="addFleetCANFilterNoName"
+              onClick={() => add({})}
+            />
             <button
               data-testid="addFleetCANFilter"
-              onClick={() =>
+              onClick={() => add("US-TEST", { can_id: "111", interval: 222 })}
-                add("US-TEST", { can_id: "111", interval: 222 })
-              }
             />
           </>
         );
@@ -637,13 +681,17 @@ describe("FleetContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="deleteFleetCANFilterNull" onClick={() => deleteFF("US-WEST", null)} />
+            <button
-            <button data-testid="deleteFleetCANFilterInvalid" onClick={() => deleteFF("US-WEST", "INVALID")} />
+              data-testid="deleteFleetCANFilterNull"
+              onClick={() => deleteFF("US-WEST", null)}
+            />
+            <button
+              data-testid="deleteFleetCANFilterInvalid"
+              onClick={() => deleteFF("US-WEST", "INVALID")}
+            />
             <button
               data-testid="deleteFleetCANFilter"
-              onClick={() =>
+              onClick={() => deleteFF("US-WEST", "123-456")}
-                deleteFF("US-WEST", "123-456")
-              }
             />
           </>
         );
@@ -694,59 +742,80 @@ describe("FleetContext", () => {
 const expectedFilters = [
   {
     can_id: "123-456",
-    interval: 789
+    interval: 789,
   },
   {
     can_id: "1",
-    interval: 1000
+    interval: 1000,
   },
   {
     can_id: "1000",
-    interval: 1
+    interval: 1,
-  }
+  },
-]
+];
 
 const expectedFleetData = {
   name: "US-WEST",
   log_level: "info",
-  canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2, filters: expectedFilters },
+  canbus: {
-  vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
+    enabled: true,
-}
+    data_logger_enabled: true,
+    max_mem_buffer_size: 1,
+    max_disk_buffer_size: 2,
+    filters: expectedFilters,
+  },
+  vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"],
+};
 
 const expectedFleetsData = [
   {
     name: "US-WEST",
     log_level: "info",
-    canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2, filters: expectedFilters },
+    canbus: {
-    vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
+      enabled: true,
+      data_logger_enabled: true,
+      max_mem_buffer_size: 1,
+      max_disk_buffer_size: 2,
+      filters: expectedFilters,
+    },
+    vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"],
   },
   {
     name: "US-CENTRAL",
     log_level: "warn",
-    canbus: { enabled: false, data_logger_enabled: false, max_mem_buffer_size: 0, max_disk_buffer_size: 0 },
+    canbus: {
-    vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
+      enabled: false,
+      data_logger_enabled: false,
+      max_mem_buffer_size: 0,
+      max_disk_buffer_size: 0,
+    },
+    vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"],
   },
   {
     name: "US-EAST",
     log_level: "error",
     canbus: { enabled: true },
-    vehicles: ["USEASTVIN12345678", "USEASTVIN12345679", "USEASTVIN12345670"]
+    vehicles: ["USEASTVIN12345678", "USEASTVIN12345679", "USEASTVIN12345670"],
   },
 ];
 
-const expectedFleetVehiclesData = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
+const expectedFleetVehiclesData = [
+  "USWESTVIN12345678",
+  "USWESTVIN12345679",
+  "USWESTVIN12345670",
+];
 
 const expectedFleetCANFiltersData = [
   {
     can_id: "123-456",
-    interval: 789
+    interval: 789,
   },
   {
     can_id: "1",
-    interval: 1000
+    interval: 1000,
   },
   {
     can_id: "1000",
-    interval: 1
+    interval: 1,
-  }
+  },
 ];

src/components/Contexts/VehicleContext.jsx

@@ -127,12 +127,12 @@ export const VehicleProvider = ({ children }) => {
       const result = await api.getVehicle(vin, token);
       if (result.error) throw new Error(`Get vehicle error. ${result.message}`);
 
-      setVehicle(result);
+      setVehicle(result ?? []);
       return result;
     } finally {
       setBusy(false);
     }
-  }
+  };
 
   const getVehicles = async (search, token) => {
     try {
@@ -143,7 +143,7 @@ export const VehicleProvider = ({ children }) => {
         throw new Error(`Get vehicles error. ${result.message}`);
       }
       await addConnections(result.data, token);
-      setVehicles(result.data);
+      setVehicles(result.data ?? []);
       if (result.total) {
         setTotalVehicles(result.total);
       }
@@ -188,7 +188,7 @@ export const VehicleProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
-  }
+  };
 
   const deleteVehicle = async (vin, token) => {
     try {
@@ -202,7 +202,7 @@ export const VehicleProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
-  }
+  };
 
   return (
     <VehicleContext.Provider
@@ -224,7 +224,7 @@ export const VehicleProvider = ({ children }) => {
         getVehicle,
         getVehicles,
         sendCommand,
-        updateVehicle
+        updateVehicle,
       }}
     >
       {children}
@@ -246,5 +246,4 @@ const validateVIN = (vin) => {
   }
 };
 
-
 export const useVehicleContext = () => useContext(VehicleContext);