@@ -20,7 +20,7 @@ export default function MenuDrawer({ children }) {
|
||||
const classes = useStyles();
|
||||
const theme = useTheme();
|
||||
const { signOut, token } = useUserContext();
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [open, setOpen] = React.useState(true);
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
|
||||
@@ -1,16 +1,40 @@
|
||||
import React from "react";
|
||||
import { List } from "@material-ui/core";
|
||||
import ListItemLink from "../ListItemLink";
|
||||
import { useUserContext } from "../Contexts/UserContext";
|
||||
import { Roles, hasRole } from "../../utils/roles";
|
||||
|
||||
const menuData = [
|
||||
{
|
||||
label: "Home",
|
||||
to: "/home",
|
||||
roles: [],
|
||||
},
|
||||
{
|
||||
label: "Upload Update Package",
|
||||
to: "/package-upload",
|
||||
roles: [Roles.CREATE],
|
||||
},
|
||||
{
|
||||
label: "Add Vehicles",
|
||||
to: "/vehicle-add",
|
||||
roles: [Roles.CREATE],
|
||||
},
|
||||
];
|
||||
|
||||
export default function SideMenu() {
|
||||
const menuData = [
|
||||
{ label: "Upload Update Package", to: "/home" },
|
||||
{ label: "Add Vehicles", to: "/vehicle-add" },
|
||||
];
|
||||
const { groups } = useUserContext();
|
||||
const menu = menuData.reduce((result, item) => {
|
||||
if (hasRole(item.roles, groups)) {
|
||||
result.push(item);
|
||||
}
|
||||
|
||||
return result;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<List>
|
||||
{menuData.map((item, index) => (
|
||||
{menu.map((item, index) => (
|
||||
<ListItemLink key={index} primary={item.label} to={item.to} />
|
||||
))}
|
||||
</List>
|
||||
|
||||
33
src/components/Layouts/SideMenu.test.jsx
Normal file
33
src/components/Layouts/SideMenu.test.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
jest.mock("../Contexts/UserContext");
|
||||
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { UserProvider, setToken } from "../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../utils/testing";
|
||||
import SideMenu from "./SideMenu";
|
||||
|
||||
const renderMenu = async () => {
|
||||
const { container } = render(
|
||||
<UserProvider>
|
||||
<BrowserRouter>
|
||||
<SideMenu />
|
||||
</BrowserRouter>
|
||||
</UserProvider>
|
||||
);
|
||||
await waitFor(() => {});
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("SideMenu", () => {
|
||||
it("Unauthenticated", async () => {
|
||||
setToken(null);
|
||||
const container = await renderMenu(null);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("Authenticated", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderMenu(TEST_AUTH_OBJECT);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
115
src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
Normal file
115
src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
Normal file
@@ -0,0 +1,115 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SideMenu Authenticated 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<ul
|
||||
class="MuiList-root MuiList-padding"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/home"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Home
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/package-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Upload Update Package
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/vehicle-add"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Add Vehicles
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`SideMenu Unauthenticated 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<ul
|
||||
class="MuiList-root MuiList-padding"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/home"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Home
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
Reference in New Issue
Block a user