From 84fbf57daa22ec049e321df44369de143414d496 Mon Sep 17 00:00:00 2001 From: arpanetus Date: Mon, 3 Oct 2022 20:50:15 +0600 Subject: [PATCH 1/5] CEC-2545 Fix/can signals context (#210) --- package.json | 1 + .../App/__snapshots__/App.test.js.snap | 4 +- src/components/Cars/CANSignals/index.jsx | 2 +- .../Cars/Status/CANSignalsTab.test.jsx | 39 +++++ .../__snapshots__/CANSignalsTab.test.jsx.snap | 23 +++ .../DigitalTwinTab.test.jsx.snap | 149 +++++++++++++++++- src/components/Contexts/CANSignalsContext.jsx | 49 ++---- .../Contexts/CANSignalsContext.test.jsx | 75 +++++++++ .../Contexts/__mocks__/VehicleContext.jsx | 1 + .../Controls/SendCommand/Parameters.jsx | 44 ------ .../Controls/SendCommand/Parameters.test.jsx | 95 +---------- .../__snapshots__/Parameters.test.jsx.snap | 27 ++-- .../Table/__snapshots__/index.test.jsx.snap | 12 +- .../Fleets/Status/Vehicles/Table/index.jsx | 4 +- .../__snapshots__/VehiclesTab.test.jsx.snap | 12 +- src/components/Manifest/List/index.jsx | 4 +- src/services/__mocks__/vehiclesAPI.js | 11 ++ 17 files changed, 347 insertions(+), 205 deletions(-) create mode 100644 src/components/Cars/Status/CANSignalsTab.test.jsx create mode 100644 src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap create mode 100644 src/components/Contexts/CANSignalsContext.test.jsx diff --git a/package.json b/package.json index 3c005e9..d7b742f 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react-router-dom": "^5.3.0", "react-router-hash-link": "^2.4.3", "react-scripts": "5.0.0", + "usehooks-ts": "^2.7.1", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap index c42b644..cb9546f 100644 --- a/src/components/App/__snapshots__/App.test.js.snap +++ b/src/components/App/__snapshots__/App.test.js.snap @@ -3311,7 +3311,7 @@ exports[`App Route /packages authenticated 1`] = ` /> -
+ -
+ diff --git a/src/components/Cars/CANSignals/index.jsx b/src/components/Cars/CANSignals/index.jsx index a3e9aa9..9de70b8 100644 --- a/src/components/Cars/CANSignals/index.jsx +++ b/src/components/Cars/CANSignals/index.jsx @@ -45,7 +45,7 @@ const Main = ({ vin }) => { }; const CANSignals = (props) => ( - +
); diff --git a/src/components/Cars/Status/CANSignalsTab.test.jsx b/src/components/Cars/Status/CANSignalsTab.test.jsx new file mode 100644 index 0000000..2747b69 --- /dev/null +++ b/src/components/Cars/Status/CANSignalsTab.test.jsx @@ -0,0 +1,39 @@ +import addSnapshotSerializer from "../../../utils/snapshot"; + +jest.mock("../../Contexts/VehicleContext"); +jest.mock("../../Contexts/StatusContext"); +jest.mock("../../Contexts/UserContext"); +jest.mock("@material-ui/core/utils/unstable_useId", () => + jest.fn().mockReturnValue("mui-test-id") +); + +import { render, waitFor } from "@testing-library/react"; +import { BrowserRouter } from "react-router-dom"; +import CANSignalsTab from "./CANSignalsTab"; +import {setToken} from "../../Contexts/UserContext"; +import {TEST_AUTH_OBJECT} from "../../../utils/testing"; + +const renderCANSignalsTab = async () => { + const { container } = render( + + + + ); + await waitFor(() => { + /* render */ + }); + return container; +}; + +describe("CANSignalsTab", () => { + beforeAll(() => { + addSnapshotSerializer(expect); + }); + + it("Render", async () => { + setToken(TEST_AUTH_OBJECT); + const container = await renderCANSignalsTab(); + expect(container).toMatchSnapshot(); + }); +}); + diff --git a/src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap new file mode 100644 index 0000000..a45ea88 --- /dev/null +++ b/src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CANSignalsTab Render 1`] = ` +
+
+
+
+ CAN Signals +
+

+ Loading... +

+
+
+
+`; diff --git a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap index 096928e..607b45f 100644 --- a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap +++ b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap @@ -1,3 +1,150 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`DigitalTwinTab Render 1`] = `
`; +exports[`DigitalTwinTab Render 1`] = ` +
+
+
+
+
+
+ Digital Twin +
+
+ + Connected + + : + false +
+
+ + ICC Connected + + : + true +
+
+

+ + Battery + + : + 95% +

+
+

+ Doors +

+

+ + hood + + : + closed +

+

+ + left_front + + : + closed +

+

+ + left_rear + + : + closed +

+

+ + right_front + + : + closed +

+

+ + right_rear + + : + closed +

+

+ + trunk + + : + closed +

+
+
+

+ Location +

+

+ + altitude + + : + 17 +

+

+ + longitude + + : + -122.414° +

+

+ + latitude + + : + 37.764° +

+
+
+

+ + Trex Version + + : + 1000000 +

+
+
+

+ + Updated at + + : + 7/26/2022 12:26:38 AM +

+
+
+
+
+
+
+
+`; diff --git a/src/components/Contexts/CANSignalsContext.jsx b/src/components/Contexts/CANSignalsContext.jsx index bb9c1ee..30c49b8 100644 --- a/src/components/Contexts/CANSignalsContext.jsx +++ b/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) { diff --git a/src/components/Contexts/CANSignalsContext.test.jsx b/src/components/Contexts/CANSignalsContext.test.jsx new file mode 100644 index 0000000..57b98e8 --- /dev/null +++ b/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 ( + <> +
{JSON.stringify(signals)}
+