CEC-2545 Fix/can signals context (#210)

src/components/Contexts/CANSignalsContext.jsx

@@ -1,8 +1,8 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, {useContext, useState} from "react";
 
 import api from "../../services/vehiclesAPI";
-import { useUserContext } from "./UserContext";
 import { LocalDateTimeString } from "../../utils/dates";
+import {useInterval} from "usehooks-ts";
 
 const CANSignalContext = React.createContext();
 
@@ -15,41 +15,26 @@ const BlankSignal = (msg) => ({
 const transformSignals = (signals) =>
   signals
     .map((signal) => {
-      const { Timestamp, ...Settings } = signal;
-      const keys = Object.keys(Settings);
+      const { timestamp, value, name } = signal;
 
-      return keys.map((key) => ({
-        timestamp: LocalDateTimeString(Timestamp),
-        signal: key,
-        value: Settings[key],
-      }));
+      return {
+        timestamp: LocalDateTimeString(timestamp),
+        signal: name,
+        value: value,
+      };
     })
     .flat();
 
-export const CANSignalProvider = ({ children }) => {
-  const {
-    token: {
-      idToken: { jwtToken: token },
-    },
-  } = useUserContext();
+export const CANSignalProvider = ({ token, children }) => {
   const [vin, setVIN] = useState(null);
   const [signals, setSignals] = useState([]);
-  let delay = 500;
+  const [delay, setDelay] = useState(500);
 
-  useEffect(() => {
-    getCANSignals();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vin]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      getCANSignals();
-    }, delay);
-    return () => {
-      clearTimeout(timer);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signals]);
+  useInterval(
+    () => {
+      getCANSignals()
+    }, vin?delay:null
+  )
 
   const getCANSignals = async () => {
     try {
@@ -62,10 +47,10 @@ export const CANSignalProvider = ({ children }) => {
       const items = transformSignals(result.data);
 
       if (items.length > 0) {
-        delay = 500;
+        setDelay(500);
         setSignals(items);
       } else {
-        delay = 1000;
+        setDelay(1000);
         setSignals([BlankSignal("No signals")]);
       }
     } catch (e) {

src/components/Contexts/CANSignalsContext.test.jsx

@@ -0,0 +1,75 @@
+jest.mock("../../services/vehiclesAPI");
+
+import {
+  render,
+  cleanup,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+} from "@testing-library/react";
+import {CANSignalProvider, useCANSignalContext} from "./CANSignalsContext";
+
+const checkSignalsResults = (filters) => {
+  expect(screen.getByTestId("signals").innerHTML).toEqual(filters);
+};
+
+describe("CANSignalsContext", () => {
+  describe("getSignals", () => {
+    beforeEach(() => {
+      jest.useFakeTimers("setInterval");
+      const TestComp = () => {
+        const { signals, setVIN } = useCANSignalContext();
+
+        return (
+          <>
+            <div data-testid="signals">{JSON.stringify(signals)}</div>
+            <button
+              data-testid="getSignals"
+              onClick={()=>{setVIN("TESTVIN1234567890")}}
+            />
+          </>
+        );
+      };
+      render(
+        <CANSignalProvider>
+          <TestComp />
+        </CANSignalProvider>
+      );
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkSignalsResults("[]");
+    });
+
+    it("getSignals", async () => {
+      // eslint-disable-next-line testing-library/no-unnecessary-act
+      await act(async () => {
+        fireEvent.click(screen.getByTestId("getSignals"));
+        await waitFor(() =>
+          expect(screen.getByTestId("signals").innerHTML).toBe("[]")
+        );
+        jest.advanceTimersByTime(501);
+      })
+
+      await waitFor(() => {
+        return expect(screen.getByTestId("signals").innerHTML).not.toBe("[]");
+      } );
+
+      checkSignalsResults(JSON.stringify(expectedSignalsData));
+    });
+  });
+});
+
+const expectedSignalsData = [
+  {
+    timestamp: "7/14/2021 8:09:40 PM",
+    signal: "signal",
+    value: 123
+  },
+];

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -35,6 +35,7 @@ let vehicle = {
 let vehicleState = {
   data: {
     online: false,
+    online_hmi: true,
     battery: {
       percent: 95,
     },