admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
arpanetus
2022-10-03 20:50:15 +06:00
committed by GitHub
parent d2a467d22b
commit 84fbf57daa
17 changed files with 347 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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": {

4
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -3311,7 +3311,7 @@ exports[`App Route /packages authenticated 1`] = `
/>
</svg>
</a>
<div>
<span>
<a
class=""
href="/packages"
@@ -3329,7 +3329,7 @@ exports[`App Route /packages authenticated 1`] = `
/>
</svg>
</a>
</div>
</span>
</td>
</tr>
</tbody>

2
src/components/Cars/CANSignals/index.jsx
View File

@@ -45,7 +45,7 @@ const Main = ({ vin }) => {
};
const CANSignals = (props) => (
<CANSignalProvider>
<CANSignalProvider {...{token:props.token}}>
<Main {...props} />
</CANSignalProvider>
);

39
src/components/Cars/Status/CANSignalsTab.test.jsx Normal file
View File

@@ -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(
<BrowserRouter>
<CANSignalsTab vin="TESTVIN1234567890" token="token"/>
</BrowserRouter>
);
await waitFor(() => {
/* render */
});
return container;
};
describe("CANSignalsTab", () => {
beforeAll(() => {
addSnapshotSerializer(expect);
});
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderCANSignalsTab();
expect(container).toMatchSnapshot();
});
});

23
src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap Normal file
View File

@@ -0,0 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CANSignalsTab Render 1`] = `
<div>
<div
data-testid="mocked-vehicleprovider"
>
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<h6
class="MuiTypography-root MuiTypography-h6"
style="padding-bottom: 10px;"
>
CAN Signals
</h6>
<h3>
Loading...
</h3>
</div>
</div>
</div>
`;

149
src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
View File

@@ -1,3 +1,150 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DigitalTwinTab Render 1`] = `<div />`;
exports[`DigitalTwinTab Render 1`] = `
<div>
<div
data-testid="mocked-statusprovider"
>
<div
data-testid="mocked-userprovider"
>
<div
data-testid="mocked-vehicleprovider"
>
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<h6
class="MuiTypography-root MuiTypography-h6"
style="padding-bottom: 10px;"
>
Digital Twin
</h6>
<div>
<b>
Connected
</b>
:
false
</div>
<div>
<b>
ICC Connected
</b>
:
true
</div>
<div>
<p>
<b>
Battery
</b>
:
95%
</p>
<div
class="makeStyles-popupSection-0"
>
<h3>
Doors
</h3>
<p>
<b>
hood
</b>
:
closed
</p>
<p>
<b>
left_front
</b>
:
closed
</p>
<p>
<b>
left_rear
</b>
:
closed
</p>
<p>
<b>
right_front
</b>
:
closed
</p>
<p>
<b>
right_rear
</b>
:
closed
</p>
<p>
<b>
trunk
</b>
:
closed
</p>
</div>
<div
class="makeStyles-popupSection-0"
>
<h3>
Location
</h3>
<p>
<b>
altitude
</b>
:
17
</p>
<p>
<b>
longitude
</b>
:
-122.414°
</p>
<p>
<b>
latitude
</b>
:
37.764°
</p>
</div>
<div
class="makeStyles-popupSection-0"
>
<p>
<b>
Trex Version
</b>
:
1000000
</p>
</div>
<div
class="makeStyles-popupSection-0"
>
<p>
<b>
Updated at
</b>
:
7/26/2022 12:26:38 AM
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

49
src/components/Contexts/CANSignalsContext.jsx
View File

@@ -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) {

75
src/components/Contexts/CANSignalsContext.test.jsx Normal file
View File

@@ -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
},
];

1
src/components/Contexts/__mocks__/VehicleContext.jsx
View File

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

44
src/components/Controls/SendCommand/Parameters.jsx
View File

@@ -1,36 +1,6 @@
import PropTypes from "prop-types";
import {FormControl} from "@material-ui/core";
import useStyles from "../../useStyles";
import {MuiPickersUtilsProvider} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
export const Dates = (
{
startDateFunc,
endDateFunc,
startDate,
handleStartChange,
endDate,
handleEndChange,
}) => {
if (startDateFunc && endDateFunc) {
return (<MuiPickersUtilsProvider utils={DateFnsUtils}>
{startDateFunc(startDate, handleStartChange)}
{endDateFunc(endDate, handleEndChange, startDate)}
</MuiPickersUtilsProvider>);
}
return null;
}
Dates.propTypes = {
startDateFunc: PropTypes.func,
endDateFunc: PropTypes.func,
startDate: PropTypes.instanceOf(Date),
handleStartChange: PropTypes.func,
endDate: PropTypes.instanceOf(Date),
handleEndChange: PropTypes.func
}
export const Parameters = (props) => {
const {params} = props;
@@ -42,22 +12,12 @@ export const Parameters = (props) => {
}
const {data, handleDataChange} = props;
const {startDate, handleStartChange} = props;
const {endDate, handleEndChange} = props;
return (
<FormControl size="small" className={classes.formControl}>
<div style={{width: "300px", marginTop: "1em"}}>
{params.dataFunc(data, handleDataChange)}
</div>
<Dates
startDateFunc={params.startDateFunc}
endDateFunc={params.endDateFunc}
startDate={startDate}
handleStartChange={handleStartChange}
endDate={endDate}
handleEndChange={handleEndChange}
></Dates>
</FormControl>
)
}
@@ -66,8 +26,4 @@ Parameters.propTypes = {
params: PropTypes.any,
data: PropTypes.any,
handleDataChange: PropTypes.func,
startDate: PropTypes.instanceOf(Date),
handleStartChange: PropTypes.func,
endDate: PropTypes.instanceOf(Date),
handleEndChange: PropTypes.func
};

95
src/components/Controls/SendCommand/Parameters.test.jsx
View File

@@ -1,75 +1,10 @@
jest.mock("@material-ui/pickers/MuiPickersUtilsProvider")
import {render, waitFor} from "@testing-library/react";
import {Dates, Parameters} from "./Parameters";
import {Parameters} from "./Parameters";
import addSnapshotSerializer from "../../../utils/snapshot";
const date = Date.parse("2011-10-10T14:48:00")
const renderDates = async (empty) => {
if (empty) {
await waitFor(() => {
/* render */
});
const { container } = render(<Dates startDateFunc={null} endDateFunc={null}/>)
return container;
}
const [start, setStart] = [date, (_) => {}];
const [end, setEnd] = [date, (_) => {}];
const handleStartChange = (val) => {
setStart(val)
}
const handleEndChange = (val) => {
setEnd(val)
}
await waitFor(() => {
/* render */
});
const {container} = render(
<div>
<Dates
startDateFunc={(val, handleValChange) => <div>{val.toString()}</div>}
endDateFunc={(val, handleValChange, prevVal) => <div>{val.toString()}, {prevVal.toString()}</div>}
startDate={start}
endDate={end}
handleStartChange={handleStartChange}
handleEndChange={handleEndChange}
/>
</div>
)
return container
}
describe("Dates", () => {
beforeAll(() => {
addSnapshotSerializer(expect);
})
it("Render empty", async () => {
const container = await renderDates(true);
expect(container).toMatchSnapshot();
})
it("Render filled", async () => {
const container = await renderDates(false);
expect(container).toMatchSnapshot();
})
})
const renderState = {
EMPTY: 0,
JUST_DATA: 1,
WITH_DATE: 2,
}
const renderParameters = async (rs) => {
@@ -94,27 +29,6 @@ const renderParameters = async (rs) => {
return container;
}
params.startDateFunc = (val, handleValChange) => (<div>val.toString()</div>)
params.endDateFunc = (val, handleValChange, prevVal) => (<div>val.toString(), prevVal.toString()</div>)
const [start, handleStartChange] = [date, (_)=>{}];
const [end, handleEndChange] = [date, (_)=>{}];
if (rs===renderState.WITH_DATE) {
const {container} = render(<Parameters
params={params}
data={data}
handleDataChange={handleDataChange}
start={start}
handleStartChange={handleStartChange}
end={end}
handleEndChange={handleEndChange}
/>
)
return container
}
}
@@ -129,12 +43,7 @@ describe("Params", () => {
})
it("Render just data", async () => {
const container = await renderDates(renderState.JUST_DATA);
expect(container).toMatchSnapshot();
})
it("Render with date", async () => {
const container = await renderDates(renderState.WITH_DATE);
const container = await renderParameters(renderState.JUST_DATA);
expect(container).toMatchSnapshot();
})
})

27
src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap
View File

@@ -1,24 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dates Render empty 1`] = `<div />`;
exports[`Params Render empty 1`] = `<div />`;
exports[`Dates Render filled 1`] = `
exports[`Params Render just data 1`] = `
<div>
<div>
<div>
1318258080000
</div>
<div>
1318258080000
,
1318258080000
<div
class="MuiFormControl-root makeStyles-formControl-0"
>
<div
style="width: 300px; margin-top: 1em;"
>
<div>
val.toString()
</div>
</div>
</div>
</div>
`;
exports[`Params Render empty 1`] = `<div />`;
exports[`Params Render just data 1`] = `<div />`;
exports[`Params Render with date 1`] = `<div />`;

12
src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
View File

@@ -153,7 +153,7 @@ exports[`FleetVehiclesTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<span>
<a
class=""
href="/"
@@ -172,7 +172,7 @@ exports[`FleetVehiclesTable Render 1`] = `
</svg>
</a>
<div />
</div>
</span>
</td>
</tr>
<tr
@@ -190,7 +190,7 @@ exports[`FleetVehiclesTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<span>
<a
class=""
href="/"
@@ -209,7 +209,7 @@ exports[`FleetVehiclesTable Render 1`] = `
</svg>
</a>
<div />
</div>
</span>
</td>
</tr>
<tr
@@ -227,7 +227,7 @@ exports[`FleetVehiclesTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<span>
<a
class=""
href="/"
@@ -246,7 +246,7 @@ exports[`FleetVehiclesTable Render 1`] = `
</svg>
</a>
<div />
</div>
</span>
</td>
</tr>
</tbody>

4
src/components/Fleets/Status/Vehicles/Table/index.jsx
View File

@@ -134,14 +134,14 @@ const MainForm = ({ name }) => {
);
} else {
return (
<div>
<span key={`delete-${action.id}-of-div`}>
<Tooltip key={`delete-${action.id}`} title={action.tip}>
<Link to="#" onClick={() => onDelete(action.id)}>
{action.icon}
</Link>
</Tooltip>
<DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
</div>
</span>
);
}

12
src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
View File

@@ -152,7 +152,7 @@ exports[`VehiclesTab Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<span>
<a
class=""
href="/"
@@ -171,7 +171,7 @@ exports[`VehiclesTab Render 1`] = `
</svg>
</a>
<div />
</div>
</span>
</td>
</tr>
<tr
@@ -189,7 +189,7 @@ exports[`VehiclesTab Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<span>
<a
class=""
href="/"
@@ -208,7 +208,7 @@ exports[`VehiclesTab Render 1`] = `
</svg>
</a>
<div />
</div>
</span>
</td>
</tr>
<tr
@@ -226,7 +226,7 @@ exports[`VehiclesTab Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<span>
<a
class=""
href="/"
@@ -245,7 +245,7 @@ exports[`VehiclesTab Render 1`] = `
</svg>
</a>
<div />
</div>
</span>
</td>
</tr>
</tbody>

4
src/components/Manifest/List/index.jsx
View File

@@ -190,13 +190,13 @@ const MainForm = () => {
);
} else {
return (
<div>
<span key={`delete-${action.id}-of-key`}>
<Tooltip key={`delete-${action.id}`} title={action.tip}>
<Link to="#" onClick={() => setDeletePopup(action.id, row)}>
{action.icon}
</Link>
</Tooltip>
</div>
</span>
);
}
});

11
src/services/__mocks__/vehiclesAPI.js
View File

@@ -50,6 +50,14 @@ const ecusData = [
},
];
const signals = {data:[
{
timestamp: "2021-07-14T20:09:40.98187Z",
name: "signal",
value: 123
},
]};
const vehiclesAPI = {
addVehicle: async (vehicle) => {
data.push(vehicle);
@@ -105,6 +113,9 @@ const vehiclesAPI = {
const index = data.findIndex(element => element.vin === vin);
if (index >= 0) data[index] = vehicle;
return vehicle;
},
getCANSignals: async (vin, vehicle) => {
return signals;
}
};