CEC-775 Manifest details component (#114)
* CEC-775 Manifest details component * Code smells * Fix build warning
This commit is contained in:
John Wu
@@ -0,0 +1,223 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Manifest Details Component Render Hidden 1`] = `
|
||||
Object {
|
||||
"asFragment": [Function],
|
||||
"baseElement": <body>
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-manifestsprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-link-26"
|
||||
>
|
||||
Show Details
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-manifestsprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-link-26"
|
||||
>
|
||||
Show Details
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
"debug": [Function],
|
||||
"findAllByAltText": [Function],
|
||||
"findAllByDisplayValue": [Function],
|
||||
"findAllByLabelText": [Function],
|
||||
"findAllByPlaceholderText": [Function],
|
||||
"findAllByRole": [Function],
|
||||
"findAllByTestId": [Function],
|
||||
"findAllByText": [Function],
|
||||
"findAllByTitle": [Function],
|
||||
"findByAltText": [Function],
|
||||
"findByDisplayValue": [Function],
|
||||
"findByLabelText": [Function],
|
||||
"findByPlaceholderText": [Function],
|
||||
"findByRole": [Function],
|
||||
"findByTestId": [Function],
|
||||
"findByText": [Function],
|
||||
"findByTitle": [Function],
|
||||
"getAllByAltText": [Function],
|
||||
"getAllByDisplayValue": [Function],
|
||||
"getAllByLabelText": [Function],
|
||||
"getAllByPlaceholderText": [Function],
|
||||
"getAllByRole": [Function],
|
||||
"getAllByTestId": [Function],
|
||||
"getAllByText": [Function],
|
||||
"getAllByTitle": [Function],
|
||||
"getByAltText": [Function],
|
||||
"getByDisplayValue": [Function],
|
||||
"getByLabelText": [Function],
|
||||
"getByPlaceholderText": [Function],
|
||||
"getByRole": [Function],
|
||||
"getByTestId": [Function],
|
||||
"getByText": [Function],
|
||||
"getByTitle": [Function],
|
||||
"queryAllByAltText": [Function],
|
||||
"queryAllByDisplayValue": [Function],
|
||||
"queryAllByLabelText": [Function],
|
||||
"queryAllByPlaceholderText": [Function],
|
||||
"queryAllByRole": [Function],
|
||||
"queryAllByTestId": [Function],
|
||||
"queryAllByText": [Function],
|
||||
"queryAllByTitle": [Function],
|
||||
"queryByAltText": [Function],
|
||||
"queryByDisplayValue": [Function],
|
||||
"queryByLabelText": [Function],
|
||||
"queryByPlaceholderText": [Function],
|
||||
"queryByRole": [Function],
|
||||
"queryByTestId": [Function],
|
||||
"queryByText": [Function],
|
||||
"queryByTitle": [Function],
|
||||
"rerender": [Function],
|
||||
"unmount": [Function],
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`Manifest Details Component Render Shown 1`] = `
|
||||
Object {
|
||||
"asFragment": [Function],
|
||||
"baseElement": <body>
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-manifestsprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-link-89"
|
||||
>
|
||||
Hide Details
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Test Deployment 1.0.100
|
||||
</li>
|
||||
<li>
|
||||
Deployment folder test https://releasenotes.com
|
||||
</li>
|
||||
<li>
|
||||
ECUs:
|
||||
<ul>
|
||||
<li>
|
||||
ICC, Part: BBBBBB, Version: 1000
|
||||
<br />
|
||||
<ul>
|
||||
<li>
|
||||
ODX Data: LARGE.jpg
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-manifestsprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-link-89"
|
||||
>
|
||||
Hide Details
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Test Deployment 1.0.100
|
||||
</li>
|
||||
<li>
|
||||
Deployment folder test https://releasenotes.com
|
||||
</li>
|
||||
<li>
|
||||
ECUs:
|
||||
<ul>
|
||||
<li>
|
||||
ICC, Part: BBBBBB, Version: 1000
|
||||
<br />
|
||||
<ul>
|
||||
<li>
|
||||
ODX Data: LARGE.jpg
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
"debug": [Function],
|
||||
"findAllByAltText": [Function],
|
||||
"findAllByDisplayValue": [Function],
|
||||
"findAllByLabelText": [Function],
|
||||
"findAllByPlaceholderText": [Function],
|
||||
"findAllByRole": [Function],
|
||||
"findAllByTestId": [Function],
|
||||
"findAllByText": [Function],
|
||||
"findAllByTitle": [Function],
|
||||
"findByAltText": [Function],
|
||||
"findByDisplayValue": [Function],
|
||||
"findByLabelText": [Function],
|
||||
"findByPlaceholderText": [Function],
|
||||
"findByRole": [Function],
|
||||
"findByTestId": [Function],
|
||||
"findByText": [Function],
|
||||
"findByTitle": [Function],
|
||||
"getAllByAltText": [Function],
|
||||
"getAllByDisplayValue": [Function],
|
||||
"getAllByLabelText": [Function],
|
||||
"getAllByPlaceholderText": [Function],
|
||||
"getAllByRole": [Function],
|
||||
"getAllByTestId": [Function],
|
||||
"getAllByText": [Function],
|
||||
"getAllByTitle": [Function],
|
||||
"getByAltText": [Function],
|
||||
"getByDisplayValue": [Function],
|
||||
"getByLabelText": [Function],
|
||||
"getByPlaceholderText": [Function],
|
||||
"getByRole": [Function],
|
||||
"getByTestId": [Function],
|
||||
"getByText": [Function],
|
||||
"getByTitle": [Function],
|
||||
"queryAllByAltText": [Function],
|
||||
"queryAllByDisplayValue": [Function],
|
||||
"queryAllByLabelText": [Function],
|
||||
"queryAllByPlaceholderText": [Function],
|
||||
"queryAllByRole": [Function],
|
||||
"queryAllByTestId": [Function],
|
||||
"queryAllByText": [Function],
|
||||
"queryAllByTitle": [Function],
|
||||
"queryByAltText": [Function],
|
||||
"queryByDisplayValue": [Function],
|
||||
"queryByLabelText": [Function],
|
||||
"queryByPlaceholderText": [Function],
|
||||
"queryByRole": [Function],
|
||||
"queryByTestId": [Function],
|
||||
"queryByText": [Function],
|
||||
"queryByTitle": [Function],
|
||||
"rerender": [Function],
|
||||
"unmount": [Function],
|
||||
}
|
||||
`;
|
||||
94
src/components/Manifest/Details/index.jsx
Normal file
94
src/components/Manifest/Details/index.jsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams } from "react-router";
|
||||
|
||||
import { useManifestsContext } from "../../Contexts/ManifestsContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const ECUFileList = (files) => {
|
||||
if (!files || files.length === 0) return "No files";
|
||||
return (
|
||||
<ul>
|
||||
{files.map((file) => (
|
||||
<li key={file.filename}>{`${file.type}: ${file.filename} `}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
const ECUList = (ecus) => {
|
||||
if (!ecus || ecus.length === 0) return "None";
|
||||
return (
|
||||
<ul>
|
||||
{ecus.map((ecu) => (
|
||||
<li key={ecu.name}>
|
||||
{`${ecu.name}, Part: ${ecu.part_number}, Version: ${ecu.version}`}
|
||||
<br />
|
||||
{ECUFileList(ecu.files)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
const ManifestDetails = ({ opened }) => {
|
||||
const classes = useStyles();
|
||||
const { manifest_id } = useParams();
|
||||
const [manifest, setManifest] = useState(null);
|
||||
const [open, setOpen] = useState(opened || false);
|
||||
const { getManifest } = useManifestsContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
|
||||
const init = async () => {
|
||||
try {
|
||||
const result = await getManifest(manifest_id, token);
|
||||
if (result.error) {
|
||||
throw new Error(`Get manifest error. ${result.message}`);
|
||||
} else {
|
||||
setManifest(result);
|
||||
}
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleOpen = (e) => {
|
||||
e.preventDefault();
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || manifest) return;
|
||||
init();
|
||||
// eslint-disable-next-line
|
||||
}, [open]);
|
||||
|
||||
if (!open)
|
||||
return (
|
||||
<div className={classes.link} onClick={(e) => toggleOpen(e)}>
|
||||
Show Details
|
||||
</div>
|
||||
);
|
||||
if (manifest === null) return <div>Loading Manifest...</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={classes.link} onClick={(e) => toggleOpen(e)}>
|
||||
Hide Details
|
||||
</div>
|
||||
<ul>
|
||||
<li>{`${manifest.name} ${manifest.version}`}</li>
|
||||
<li>{`${manifest.description} ${manifest.release_notes}`}</li>
|
||||
<li>ECUs: {ECUList(manifest.ecu_updates)}</li>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManifestDetails;
|
||||
46
src/components/Manifest/Details/index.test.jsx
Normal file
46
src/components/Manifest/Details/index.test.jsx
Normal file
@@ -0,0 +1,46 @@
|
||||
jest.mock("../../Contexts/ManifestsContext");
|
||||
jest.mock("../../Contexts/UserContext");
|
||||
|
||||
import React from "react";
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import { ManifestsProvider } from "../../Contexts/ManifestsContext";
|
||||
import { UserProvider, setToken } from "../../Contexts/UserContext";
|
||||
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||
import ManifestDetails from ".";
|
||||
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||
|
||||
const TestComponent = (opened) => (
|
||||
<UserProvider>
|
||||
<BrowserRouter>
|
||||
<StatusProvider>
|
||||
<ManifestsProvider>
|
||||
<ManifestDetails opened={opened} />
|
||||
</ManifestsProvider>
|
||||
</StatusProvider>
|
||||
</BrowserRouter>
|
||||
</UserProvider>
|
||||
);
|
||||
|
||||
describe("Manifest Details Component", () => {
|
||||
beforeAll(() => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
});
|
||||
|
||||
it("Render Hidden", async () => {
|
||||
const rendered = render(TestComponent(false));
|
||||
await waitFor(() => {
|
||||
// pause for render
|
||||
});
|
||||
expect(rendered).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("Render Shown", async () => {
|
||||
const rendered = render(TestComponent(true));
|
||||
await waitFor(() => {
|
||||
// pause for render
|
||||
});
|
||||
expect(rendered).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -26,6 +26,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ManifestDetails from "../Details";
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
@@ -182,6 +183,7 @@ const MainForm = () => {
|
||||
const ManifestStatus = () => (
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<ManifestDetails />
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
|
||||
Reference in New Issue
Block a user