Fix some bugs and produce test file. (#15)

Author: akademy

src/components/User.test.tsx

@@ -0,0 +1,88 @@
+import "@testing-library/jest-dom";
+
+import { fireEvent, render } from "@testing-library/react";
+import { Avatar } from "@mui/material";
+import { User } from "./User";
+
+describe("User", () => {
+	it("should render", () => {
+		render(<User onLogin={() => {}} onLogout={() => {}} user={null} />);
+		render(<User onLogout={() => {}} user={null} />);
+		render(<User onLogin={() => {}} user={null} />);
+		render(<User user={null} />);
+	});
+	
+	it("should display login button when not authenticated", () => {
+		const {getByText} = render(<User onLogin={() => {}} onLogout={() => {}} user={null} />);
+		const loginButton = getByText("Login");
+		
+		expect(loginButton).toBeInTheDocument()
+	});
+
+	it("should display logout menuitem when authenticated", () => {
+		const {getByRole, getByText} = render(<User onLogin={() => {}} onLogout={() => {}} user={{ name: "Name", fedid: "FedID" }} />);
+
+		const userMenu = getByRole("button");
+		fireEvent.click(userMenu);
+		
+		const logoutMenuItem = getByText("Logout");
+		expect(logoutMenuItem).toBeInTheDocument();
+	});
+
+	it("should fire login callback when button is clicked", () => {
+		const loginCallback = jest.fn();
+		const {getByText} = render(<User onLogin={loginCallback} user={null} />);
+
+		const loginButton = getByText("Login");
+		fireEvent.click(loginButton);
+
+		expect(loginCallback).toHaveBeenCalled();
+	});
+
+	it("should fire logout callback when button is clicked", () => {
+		const logoutCallback = jest.fn();
+		const {getByRole, getByText} = render(
+			<User onLogout={logoutCallback} user={{ name: "Name", fedid: "FedID" }} />,
+		);
+		const userMenu = getByRole("button");
+		fireEvent.click(userMenu);
+		
+		const logoutMenuItem = getByText("Logout");
+		fireEvent.click(logoutMenuItem);
+
+		expect(logoutCallback).toHaveBeenCalled();
+	});
+
+	it("should display name and FedID", () => {
+		const name = "A Name",
+			fedId = "FED14000";
+		const {getByText} = render(<User user={{ name: name, fedid: fedId }} />);
+
+		expect(getByText(name)).toBeInTheDocument();
+		expect(getByText(fedId)).toBeInTheDocument();
+	});
+	
+	it("should not have logout when no onLogout", () => {
+		const {getByRole, queryByText} = render(
+			<User user={{ name: "Name", fedid: "FedID" }} />,
+		);
+		const userMenu = getByRole("button");
+		fireEvent.click(userMenu);
+		
+		const logoutMenuItem = queryByText("Logout");
+		expect(logoutMenuItem).not.toBeInTheDocument()
+	});
+	
+	it("should render a new avatar", () => {
+		const avatarInitials = "MW"
+		const {queryByText} = render(
+			<User user={{ name: "Name", fedid: "FedID" }}
+               avatar={<Avatar>{avatarInitials}</Avatar>}
+			/>,
+		);
+		
+		const avatar = queryByText(avatarInitials);
+		expect(avatar).toBeInTheDocument()
+	});
+	
+});

src/components/User.tsx

@@ -22,16 +22,23 @@ interface UserProps {
 
 const User = ({ user, onLogin, onLogout, avatar, color }: UserProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
   const open = Boolean(anchorEl);
+  
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
-    
     setAnchorEl(null);
   };
-
+  
+  const handleLogin = () => {
+    if(onLogin) onLogin()
+  }
+  const handleLogout = () => {
+    handleClose()
+    if(onLogout) onLogout()
+  }
+  
   const theme = useTheme();
 
   return (
@@ -82,20 +89,21 @@ const User = ({ user, onLogin, onLogout, avatar, color }: UserProps) => {
               </div>
             </Stack>
           </Button>
-          <Menu
+          {onLogout && <Menu
             id="menu-list"
             anchorEl={anchorEl}
             open={open}
             onClose={handleClose}
           >
-            <MenuItem onClick={onLogout} aria-label="Logout">
+            <MenuItem onClick={handleLogout} aria-label="Logout">
               <Link sx={{ textDecoration: "none" }}>Logout</Link>
             </MenuItem>
           </Menu>
+          }
         </>
       ) : (
         <Button
-          onClick={onLogin}
+          onClick={handleLogin}
           startIcon={<MdLogin />}
           sx={{
             backgroundColor: theme.palette.primary.light,