diff --git a/src/components/User.test.tsx b/src/components/User.test.tsx new file mode 100644 index 0000000..f174519 --- /dev/null +++ b/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( {}} onLogout={() => {}} user={null} />); + render( {}} user={null} />); + render( {}} user={null} />); + render(); + }); + + it("should display login button when not authenticated", () => { + const {getByText} = render( {}} onLogout={() => {}} user={null} />); + const loginButton = getByText("Login"); + + expect(loginButton).toBeInTheDocument() + }); + + it("should display logout menuitem when authenticated", () => { + const {getByRole, getByText} = render( {}} 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(); + + 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( + , + ); + 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(); + + expect(getByText(name)).toBeInTheDocument(); + expect(getByText(fedId)).toBeInTheDocument(); + }); + + it("should not have logout when no onLogout", () => { + const {getByRole, queryByText} = render( + , + ); + 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( + {avatarInitials}} + />, + ); + + const avatar = queryByText(avatarInitials); + expect(avatar).toBeInTheDocument() + }); + +}); diff --git a/src/components/User.tsx b/src/components/User.tsx index 43d65ac..b665527 100644 --- a/src/components/User.tsx +++ b/src/components/User.tsx @@ -22,16 +22,23 @@ interface UserProps { const User = ({ user, onLogin, onLogout, avatar, color }: UserProps) => { const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { 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) => { - - + Logout + } ) : (