CEC-1965 Supplier update and approval (#162)
* CEC-1965 Supplier update and approval Fix calling connectedcars for no VINs Search sets table page to 0 * PR comments
This commit is contained in:
John Wu
@@ -0,0 +1,364 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Supplier page Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-statusprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
id="mock-browserrouter"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3"
|
||||
>
|
||||
<form
|
||||
action="#"
|
||||
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="id"
|
||||
id="id-label"
|
||||
>
|
||||
Active Directory ID
|
||||
<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="id"
|
||||
maxlength="255"
|
||||
name="id"
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-64"
|
||||
>
|
||||
<span>
|
||||
Active Directory ID
|
||||
*
|
||||
</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="contact"
|
||||
id="contact-label"
|
||||
>
|
||||
Contact
|
||||
<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="contact"
|
||||
maxlength="255"
|
||||
name="contact"
|
||||
required=""
|
||||
type="text"
|
||||
value="contact"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
|
||||
>
|
||||
<span>
|
||||
Contact
|
||||
*
|
||||
</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="company"
|
||||
id="company-label"
|
||||
>
|
||||
Company
|
||||
<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="company"
|
||||
maxlength="255"
|
||||
name="company"
|
||||
required=""
|
||||
type="text"
|
||||
value="company"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
|
||||
>
|
||||
<span>
|
||||
Company
|
||||
*
|
||||
</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="address"
|
||||
id="address-label"
|
||||
>
|
||||
Address
|
||||
<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="address"
|
||||
maxlength="1200"
|
||||
name="address"
|
||||
required=""
|
||||
type="text"
|
||||
value="address"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
|
||||
>
|
||||
<span>
|
||||
Address
|
||||
*
|
||||
</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="telephone"
|
||||
id="telephone-label"
|
||||
>
|
||||
Telephone
|
||||
<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="telephone"
|
||||
maxlength="50"
|
||||
name="telephone"
|
||||
required=""
|
||||
type="text"
|
||||
value="555-555-5555"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
|
||||
>
|
||||
<span>
|
||||
Telephone
|
||||
*
|
||||
</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="program"
|
||||
id="program-label"
|
||||
>
|
||||
Program
|
||||
<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="program"
|
||||
maxlength="50"
|
||||
name="program"
|
||||
required=""
|
||||
type="text"
|
||||
value="Ocean"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
|
||||
>
|
||||
<span>
|
||||
Program
|
||||
*
|
||||
</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="ecus"
|
||||
id="ecus-label"
|
||||
>
|
||||
ECUs
|
||||
<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="ecus"
|
||||
maxlength="1000"
|
||||
name="ecus"
|
||||
required=""
|
||||
type="text"
|
||||
value="ADAS"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
|
||||
>
|
||||
<span>
|
||||
ECUs
|
||||
*
|
||||
</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>
|
||||
`;
|
||||
200
src/components/Suppliers/Details/index.js
Normal file
200
src/components/Suppliers/Details/index.js
Normal file
@@ -0,0 +1,200 @@
|
||||
import { Button, TextField } from "@material-ui/core";
|
||||
import React, { useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { SupplierProvider } from "../../Contexts/SupplierContext";
|
||||
import {
|
||||
SupplierDetailsProvider,
|
||||
useSupplierDetailsContext,
|
||||
} from "../../Contexts/SupplierDetailsContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const Main = () => {
|
||||
const { email } = useParams();
|
||||
const classes = useStyles();
|
||||
const {
|
||||
busy,
|
||||
id,
|
||||
contact,
|
||||
company,
|
||||
address,
|
||||
phone,
|
||||
program,
|
||||
ecus,
|
||||
getSupplier,
|
||||
setID,
|
||||
setContact,
|
||||
setCompany,
|
||||
setAddress,
|
||||
setPhone,
|
||||
setProgram,
|
||||
setECUs,
|
||||
updateSupplier,
|
||||
} = useSupplierDetailsContext();
|
||||
const { setTitle, setSitePath, setMessage } = useStatusContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
|
||||
const approve = async (event) => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
await updateSupplier(email, token);
|
||||
setMessage(`Updated ${email}`);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTitle(`Supplier ${email}`);
|
||||
setSitePath([
|
||||
{
|
||||
label: `Suppliers`,
|
||||
link: "/suppliers",
|
||||
},
|
||||
{
|
||||
label: email,
|
||||
},
|
||||
]);
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
await getSupplier(email, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<form className={classes.form} noValidate action="#">
|
||||
<TextField
|
||||
id="id"
|
||||
name="id"
|
||||
label="Active Directory ID"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
value={id}
|
||||
onChange={(e) => setID(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
id="contact"
|
||||
name="contact"
|
||||
label="Contact"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
value={contact}
|
||||
onChange={(e) => setContact(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
id="company"
|
||||
name="company"
|
||||
label="Company"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
value={company}
|
||||
onChange={(e) => setCompany(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
id="address"
|
||||
name="address"
|
||||
label="Address"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "1200",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
value={address}
|
||||
onChange={(e) => setAddress(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
id="telephone"
|
||||
name="telephone"
|
||||
label="Telephone"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "50",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
id="program"
|
||||
name="program"
|
||||
label="Program"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "50",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
value={program}
|
||||
onChange={(e) => setProgram(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
id="ecus"
|
||||
name="ecus"
|
||||
label="ECUs"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "1000",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
value={ecus}
|
||||
onChange={(e) => setECUs(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
onClick={approve}
|
||||
>
|
||||
{busy ? "Submitting..." : "Submit"}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SupplierDetails = () => (
|
||||
<SupplierProvider>
|
||||
<SupplierDetailsProvider>
|
||||
<Main />
|
||||
</SupplierDetailsProvider>
|
||||
</SupplierProvider>
|
||||
);
|
||||
|
||||
export default SupplierDetails;
|
||||
45
src/components/Suppliers/Details/index.test.js
Normal file
45
src/components/Suppliers/Details/index.test.js
Normal file
@@ -0,0 +1,45 @@
|
||||
jest.mock("../../Contexts/StatusContext");
|
||||
jest.mock("../../Contexts/UserContext");
|
||||
jest.mock("../../../services/suppliersAPI");
|
||||
jest.mock("@material-ui/core/utils/unstable_useId", () =>
|
||||
jest.fn().mockReturnValue("mui-test-id")
|
||||
);
|
||||
jest.mock("react-router-dom", () => ({
|
||||
BrowserRouter: ({ children }) => (
|
||||
<div id="mock-browserrouter">{children}</div>
|
||||
),
|
||||
useParams: () => ({ email: "test@supplier.com" }),
|
||||
}));
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { SupplierProvider } from "../../Contexts/SupplierContext";
|
||||
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||
import { UserProvider, setToken } from "../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||
import MainForm from "./index";
|
||||
|
||||
const renderSupplierDetailsPage = async () => {
|
||||
const { container } = render(
|
||||
<SupplierProvider>
|
||||
<StatusProvider>
|
||||
<UserProvider>
|
||||
<BrowserRouter>
|
||||
<MainForm />
|
||||
</BrowserRouter>
|
||||
</UserProvider>
|
||||
</StatusProvider>
|
||||
</SupplierProvider>
|
||||
);
|
||||
await waitFor(() => {
|
||||
/* render */
|
||||
});
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("Supplier page", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderSupplierDetailsPage();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user