CEC-2291 Remote Commands (#194)
This commit is contained in:
26
src/components/Cars/Status/RemoteCommandsTab.jsx
Normal file
26
src/components/Cars/Status/RemoteCommandsTab.jsx
Normal 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
|
||||
40
src/components/Cars/Status/RemoteCommandsTab.test.jsx
Normal file
40
src/components/Cars/Status/RemoteCommandsTab.test.jsx
Normal 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();
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
`;
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user