CEC-2291 Remote Commands (#194)

This commit is contained in:
arpanetus
2022-09-07 23:21:57 +06:00
committed by GitHub
parent 153c6bdcf7
commit aa5a1e20e0
19 changed files with 1187 additions and 148 deletions

View File

@@ -0,0 +1,26 @@
import useStyles from "../../useStyles";
import clsx from "clsx";
import Typography from "@material-ui/core/Typography";
import SendCommand from "../../Controls/SendCommand";
import PropTypes from "prop-types";
import {VehicleProvider} from "../../Contexts/VehicleContext";
const RemoteCommandsTab = (props) => {
const { vin } = props;
const classes = useStyles();
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Typography variant="h6">Vehicle Commands</Typography>
<VehicleProvider>
<SendCommand vins={[vin]}></SendCommand>
</VehicleProvider>
</div>
)
}
RemoteCommandsTab.propTypes = {
vin: PropTypes.string,
}
export default RemoteCommandsTab

View File

@@ -0,0 +1,40 @@
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 {StatusProvider} from "../../Contexts/StatusContext";
import {setToken, UserProvider} from "../../Contexts/UserContext";
import RemoteCommandsTab from "./RemoteCommandsTab";
import addSnapshotSerializer from "../../../utils/snapshot";
import {TEST_AUTH_OBJECT} from "../../../utils/testing";
import React from "react";
const renderRemoteCommandsTab = async () => {
const { container } = render(
<StatusProvider>
<UserProvider>
<RemoteCommandsTab vin="TESTVIN1234567890" />
</UserProvider>
</StatusProvider>
);
await waitFor(() => {
/* render */
});
return container;
};
describe("RemoteCommandsTab", () => {
beforeAll(() => {
addSnapshotSerializer(expect);
});
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderRemoteCommandsTab();
expect(container).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,173 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RemoteCommandsTab Render 1`] = `
<div>
<div
data-testid="mocked-statusprovider"
>
<div
data-testid="mocked-userprovider"
>
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<h6
class="MuiTypography-root MuiTypography-h6"
>
Vehicle Commands
</h6>
<div
data-testid="mocked-vehicleprovider"
>
<div
class="makeStyles-paper-0"
style="margin-top: 20px;"
>
<div
class="MuiFormControl-root makeStyles-formControl-0"
>
<label
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
data-shrink="true"
for="send-command"
>
Command
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
>
<select
aria-invalid="false"
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
id="send-command"
name="send-command"
>
<option
value="doors_lock"
>
Lock doors
</option>
<option
value="doors_unlock"
>
Unlock doors
</option>
<option
value="vent_windows"
>
Vent windows
</option>
<option
value="close_windows"
>
Close windows
</option>
<option
value="flash_headlights"
>
Flash headlights
</option>
<option
value="trunk_close"
>
Close trunk
</option>
<option
value="alert"
>
Alert
</option>
<option
value="precondition"
>
Precondition
</option>
<option
value="california_mode"
>
California mode
</option>
<option
value="trunk_open"
>
Open trunk
</option>
<option
value="temp_cabin"
>
Set cabin temperature(°C)
</option>
<option
value="defrost"
>
Defrost
</option>
<option
value="driver_seat_preheat"
>
Driver seat preheat
</option>
<option
value="passenger_seat_preheat"
>
Preheat passenger seat
</option>
<option
value="steering_wheel_preheat"
>
Preheat Steering wheel
</option>
<option
value="charging"
>
Charging
</option>
</select>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
style="padding-left: 8px;"
>
<legend
class="PrivateNotchedOutline-legend-0"
style="width: 0.01px;"
>
<span>
</span>
</legend>
</fieldset>
</div>
</div>
<button
aria-label="send command"
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
tabindex="0"
type="submit"
>
<span
class="MuiButton-label"
>
Send
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
`;

View File

@@ -119,6 +119,24 @@ exports[`CarStatus Render 1`] = `
class="MuiTouchRipple-root"
/>
</button>
<button
aria-controls="tabpanel-5"
aria-selected="false"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
id="tab-5"
role="tab"
tabindex="-1"
type="button"
>
<span
class="MuiTab-wrapper"
>
Remote Commands
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
<span
class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -228,6 +246,13 @@ exports[`CarStatus Render 1`] = `
id="tabpanel-4"
role="tabpanel"
/>
<div
aria-labelledby="tab-5"
class="makeStyles-fullWidth-0"
hidden=""
id="tabpanel-5"
role="tabpanel"
/>
</div>
</div>
</div>

View File

@@ -12,6 +12,7 @@ import TabPanel from "../../Controls/TabPanel";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import CANSignalsTab from "./CANSignalsTab";
import RemoteCommandsTab from "./RemoteCommandsTab";
const tabHashes = ["details", "updates", "filters"];
@@ -64,6 +65,7 @@ const CarStatus = () => {
<Tab label="CAN Filters" {...tabProps(2)} />
<Tab label="Digital Twin" {...tabProps(3)} />
<Tab label="CAN Signals" {...tabProps(4)} />
<Tab label="Remote Commands" {...tabProps(5)} />
</Tabs>
</Box>
@@ -86,6 +88,10 @@ const CarStatus = () => {
<TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
<CANSignalsTab vin={vin} />
</TabPanel>
<TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
<RemoteCommandsTab vin={vin} />
</TabPanel>
</div>
);
};