Add role checks (#21)

* Add role checks

* Remove moved Roles enum
This commit is contained in:
John Wu
2021-03-22 11:29:35 -07:00
committed by GitHub
parent 03de4f5826
commit aea873e920
19 changed files with 1305 additions and 893 deletions

View File

@@ -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);

View File

@@ -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>

View 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();
});
});

View 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>
`;