CEC-4595 - show online status of cars in fleet (#374)

* CEC-4595 - show online status of cars in fleet

* fix mocking
This commit is contained in:
Paul Adamsen
2023-06-26 11:55:38 -04:00
committed by GitHub
parent ff7b7abadf
commit 787bb12260
8 changed files with 79 additions and 126 deletions

View File

@@ -1,5 +1,6 @@
import React, { useContext, useState } from "react";
import api from "../../services/fleetsAPI";
import vehiclesAPI from "../../services/vehiclesAPI";
import { validateCANID, validateFilter, validateVIN } from "../../utils/validationSupplier";
const FleetContext = React.createContext();
@@ -112,7 +113,22 @@ export const FleetProvider = ({ children }) => {
throw new Error(`Get fleet vehicles error. ${result.message}`);
}
setFleetVehicles(result.data)
const connectionsResult = await vehiclesAPI.getConnections(result.data, token)
if (result.error) {
setFleetVehicles([])
throw new Error(`Get vehicles connections error. ${result.message}`);
}
var cars = []
result.data.forEach((vin) => {
cars.push({
vin: vin,
connected: connectionsResult[vin] || false,
connectedHMI: connectionsResult[`2:${vin}`] || false
})
})
setFleetVehicles(cars)
if (result.total) {
setTotalFleetVehicles(result.total);
}

View File

@@ -1,4 +1,5 @@
jest.mock("../../services/fleetsAPI");
jest.mock("../../services/vehiclesAPI");
import {
render,
@@ -800,9 +801,21 @@ const expectedFleetsData = [
];
const expectedFleetVehiclesData = [
"USWESTVIN12345678",
"USWESTVIN12345679",
"USWESTVIN12345670",
{
vin: "USWESTVIN12345678",
connected: true,
connectedHMI: false,
},
{
vin: "USWESTVIN12345679",
connected: true,
connectedHMI: false,
},
{
vin: "USWESTVIN12345670",
connected: true,
connectedHMI: false,
},
];
const expectedFleetCANFiltersData = [

View File

@@ -62,7 +62,26 @@ export const useFleetContext = () => ({
fleetVehicles,
totalFleetVehicles,
getFleetVehicles: jest.fn(),
getFleetVehicles: jest.fn().mockImplementation((name, search, _token) => {
const result = [
{
vin: "USWESTVIN12345678",
connected: false,
connectedHMI: false
},
{
vin: "USWESTVIN12345679",
connected: true,
connectedHMI: true
},
{
vin: "USWESTVIN12345670",
connected: false,
connectedHMI: false
},
];
return Promise.resolve(result);
}),
addFleetVehicles: jest.fn(),
deleteFleetVehicle: jest.fn(),

View File

@@ -112,10 +112,14 @@ export const useVehicleContext = () => ({
addVehicle: jest.fn(),
getConnections: jest
.fn().mockImplementation((vins, _token) => {
const result = {};
vins.forEach((vin) => {
result[vin] = true;
});
const result = {
"USWESTVIN12345678": true,
"2:USWESTVIN12345678": false,
"USWESTVIN12345679": true,
"2:USWESTVIN12345679": false,
"USWESTVIN12345670": true,
"2:USWESTVIN12345670": false,
};
return Promise.resolve(result);
}),
getECUs: jest.fn(() => {

View File

@@ -137,62 +137,7 @@ exports[`FleetVehiclesTable Render 1`] = `
</thead>
<tbody
class="MuiTableBody-root"
>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/vehicle-status/USWESTVIN12345678"
>
USWESTVIN12345678
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
No actions
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/vehicle-status/USWESTVIN12345679"
>
USWESTVIN12345679
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
No actions
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/vehicle-status/USWESTVIN12345670"
>
USWESTVIN12345670
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
No actions
</td>
</tr>
</tbody>
/>
<tfoot
class="MuiTableFooter-root"
>

View File

@@ -26,6 +26,7 @@ import SearchField from "../../../../Controls/SearchField";
import DeleteConfirmation from "../../../../DeleteConfirmation";
import TableHeaderSortable from "../../../../Table/HeaderSortable";
import { useLocalStorage } from "../../../../useLocalStorage";
import ConnectedIcon from "../../../../Controls/ConnectedIcon";
import useStyles from "../../../../useStyles";
const tableColumns = [
@@ -190,13 +191,22 @@ const MainForm = ({ name }) => {
onSortRequest={handleSort}
/>
<TableBody>
{fleetVehicles.map((vin) => (
<TableRow key={vin}>
<TableCell align="center">
<Link to={`/vehicle-status/${vin}`}>{vin}</Link>
{fleetVehicles && fleetVehicles.map((car) => (
(car.vin && <TableRow key={"row" + car.vin}>
<TableCell key={"cell" + car.vin} align="center">
{(car.connected || car.connectedHMI) &&
<ConnectedIcon
key={"icon" + car.vin}
connected={car.connected}
connectedHMI={car.connectedHMI}
style={{ marginRight: 3 }}
/>
}
<Link key={"link" + car.vin} to={`/vehicle-status/${car.vin}`}>{car.vin}</Link>
</TableCell>
<TableCell align="center">{Actions(vin)}</TableCell>
<TableCell key={"cell2" + car.vin} align="center">{Actions(car.vin)}</TableCell>
</TableRow>
)
))}
</TableBody>
<TableFooter>

View File

@@ -136,62 +136,7 @@ exports[`VehiclesTab Render 1`] = `
</thead>
<tbody
class="MuiTableBody-root"
>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/vehicle-status/USWESTVIN12345678"
>
USWESTVIN12345678
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
No actions
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/vehicle-status/USWESTVIN12345679"
>
USWESTVIN12345679
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
No actions
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/vehicle-status/USWESTVIN12345670"
>
USWESTVIN12345670
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
No actions
</td>
</tr>
</tbody>
/>
<tfoot
class="MuiTableFooter-root"
>

View File

@@ -112,6 +112,7 @@ const vehiclesAPI = {
vins.forEach((vin) => {
result[vin] = true;
result["2:" + vin] = false;
});
return result;