CEC-1058 fleet forms (#123)
* working fleets page * unit tests * snapshots * updating messages and snapshots * updating extraneous snaps
This commit is contained in:
Drew Taylor
184
src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
Normal file
184
src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
Normal file
@@ -0,0 +1,184 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FleetAddForm Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-statusprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3"
|
||||
>
|
||||
<form
|
||||
action="{onSubmit}"
|
||||
class="makeStyles-form-5"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
||||
data-shrink="false"
|
||||
for="name"
|
||||
id="name-label"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="name"
|
||||
maxlength="17"
|
||||
name="name"
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
>
|
||||
<span>
|
||||
Name
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
|
||||
data-shrink="true"
|
||||
for="canbus"
|
||||
id="canbus-label"
|
||||
>
|
||||
CANBus Enabled
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="canbus"
|
||||
maxlength="255"
|
||||
name="canbus"
|
||||
required=""
|
||||
type="text"
|
||||
value="true"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
>
|
||||
<span>
|
||||
CANBus Enabled
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
|
||||
data-shrink="true"
|
||||
for="log-level"
|
||||
id="log-level-label"
|
||||
>
|
||||
Log Level (e.g. "debug", "info", "warn", "error", etc.)
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="log-level"
|
||||
maxlength="255"
|
||||
name="log-level"
|
||||
required=""
|
||||
type="text"
|
||||
value="error"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
>
|
||||
<span>
|
||||
Log Level (e.g. "debug", "info", "warn", "error", etc.)
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
class="MuiButton-label"
|
||||
>
|
||||
Submit
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
132
src/components/Fleets/Add/index.jsx
Normal file
132
src/components/Fleets/Add/index.jsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Redirect } from "react-router";
|
||||
import { Button, TextField } from "@material-ui/core";
|
||||
|
||||
import useStyles from "../../useStyles";
|
||||
import {
|
||||
useFleetContext,
|
||||
FleetProvider
|
||||
} from "../../Contexts/FleetContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
|
||||
const MainForm = () => {
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const { addFleet, busy } = useFleetContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
const classes = useStyles();
|
||||
const nameEl = useRef(null);
|
||||
const canbusEnabledEl = useRef(null);
|
||||
const logLevelEl = useRef(null);
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Add Fleet");
|
||||
setSitePath([
|
||||
{
|
||||
label: "Fleets",
|
||||
link: "/fleets",
|
||||
},
|
||||
{
|
||||
label: "Add Fleet",
|
||||
},
|
||||
]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = {
|
||||
name: nameEl.current.value,
|
||||
canbus: { enabled: canbusEnabledEl.current.value === "true" },
|
||||
log_level: logLevelEl.current.value,
|
||||
};
|
||||
|
||||
const result = await addFleet(formData, token);
|
||||
|
||||
setMessage(`Added ${result.name}`);
|
||||
setRedirect(`/fleets`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
if (redirect && redirect.length > 0) {
|
||||
return <Redirect to={redirect} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<TextField
|
||||
id="name"
|
||||
name="name"
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "17",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={nameEl}
|
||||
/>
|
||||
<TextField
|
||||
id="canbus"
|
||||
name="canbus"
|
||||
label='CANBus Enabled'
|
||||
defaultValue="true"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={canbusEnabledEl}
|
||||
/>
|
||||
<TextField
|
||||
id="log-level"
|
||||
name="log-level"
|
||||
label='Log Level (e.g. "debug", "info", "warn", "error", etc.)'
|
||||
defaultValue="error"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={logLevelEl}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{busy ? "Submitting..." : "Submit"}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FleetAddForm = () => (
|
||||
<FleetProvider>
|
||||
<MainForm />
|
||||
</FleetProvider>
|
||||
);
|
||||
|
||||
export default FleetAddForm;
|
||||
36
src/components/Fleets/Add/index.test.jsx
Normal file
36
src/components/Fleets/Add/index.test.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
jest.mock("../../Contexts/FleetContext");
|
||||
jest.mock("../../Contexts/StatusContext");
|
||||
jest.mock("../../Contexts/UserContext");
|
||||
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import { FleetProvider } from "../../Contexts/FleetContext";
|
||||
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||
import { UserProvider, setToken } from "../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||
import MainForm from "./index"
|
||||
|
||||
const renderFleetAdd = async () => {
|
||||
const { container } = render(
|
||||
<FleetProvider>
|
||||
<StatusProvider>
|
||||
<UserProvider>
|
||||
<BrowserRouter>
|
||||
<MainForm />
|
||||
</BrowserRouter>
|
||||
</UserProvider>
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("FleetAddForm", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderFleetAdd();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user