Add unit test for the nav bar

SmileyJames · Jun 27, 2021 · de2d84c · de2d84c
1 parent e384667
commit de2d84c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 8 deletions.
diff --git a/app/src/Home.js b/app/src/Home.js
@@ -22,6 +22,8 @@ const Home = () => {
     push(`/guest/${roomId}`)
   }
 
+  const onGoHome = () => push("/");
+
   const menuItems = {
     GitHub: "https://www.github.com/SmileyJames/compendium",
     Documentation: "/docs",
@@ -33,7 +35,7 @@ const Home = () => {
 
   return (
     <>
-      <NavBar menuIsHidden={hideMenu} onMenuToggle={toggleMenu} menuItems={menuItems} />
+      <NavBar leftButtonHandler={onGoHome} menuIsHidden={hideMenu} onMenuToggle={toggleMenu} menuItems={menuItems} />
       <Flex flexWrap="wrap" flexDirection="row" justifyContent="space-evenly">
         <HostForm compendium={compendium} onNewGame={onNewGame} />
         <JoinForm onJoinGame={onJoinGame} />
@@ -44,6 +46,7 @@ const Home = () => {
           compendium.map(
             ({ name, image, description }, index) => (
               <CallToActionCard
+                key={index}
                 size={index === 0 ? 2 : 1}
                 headingText={name}
                 imageSrc={image.src}

diff --git a/app/src/components/navbar/NavBar.js b/app/src/components/navbar/NavBar.js
@@ -1,5 +1,4 @@
 import toPairs from "lodash/toPairs";
-import { useReducer } from "react";
 import { useHistory } from "react-router-dom"
 import { Flex, Text, Link } from "rebass/styled-components";
 
@@ -62,23 +61,23 @@ function NavBar ({
   menuIsHidden = false,
   menuItems = {}
  }) {
-  const history = useHistory();
-  const goHome = () => history.push("/")
+  // const history = useHistory();
+  // const goHome = () => history.push("/")
   return (
     <>
       <Nav>
-        <NavLink onClick={goHome} onKeyPress={goHome}>Home</NavLink>
+        <NavLink onClick={leftButtonHandler} onKeyPress={leftButtonHandler}>{leftButtonLabel}</NavLink>
         <NavHeading>{title}</NavHeading>
         <NavLink onClick={onMenuToggle} onKeyPress={onMenuToggle}>
           {menuIsHidden ? "Menu" : "Close"}
         </NavLink>
       </Nav>
       <NavMenu hidden={menuIsHidden}>
-        {toPairs(menuItems).map(([label, handler]) => (
+        {toPairs(menuItems).map(([label, handler], index) => (
           handler.constructor === String ? (
-            <MenuItem href={handler}>{label}</MenuItem>
+            <MenuItem key={index} href={handler}>{label}</MenuItem>
           ) : (
-            <MenuItem onClick={handler} onKeyPress={handler}>{label}</MenuItem>
+            <MenuItem key={index} onClick={handler} onKeyPress={handler}>{label}</MenuItem>
           )
         ))}
       </NavMenu>

diff --git a/app/src/components/navbar/NavBar.test.js b/app/src/components/navbar/NavBar.test.js
@@ -0,0 +1,71 @@
+import { render } from "@testing-library/react";
+import userEvent from '@testing-library/user-event';
+import NavBar from "./index";
+
+describe("Navigation Bar", () => {
+	test("navbar renders when menu is closed and menu button can be clicked", () =>{
+    const leftButtonHandler = jest.fn();
+    const onMenuToggle = jest.fn();
+    const { queryByText, getByText } = render(
+      <NavBar 
+        leftButtonLabel="[Home]"
+        leftButtonHandler={leftButtonHandler}
+        title="Hello world"
+        menuItems={{ "Menu Item": "/link" }}
+        menuIsHidden={true}
+        onMenuToggle={onMenuToggle}
+      />
+    );
+
+    const leftButton = getByText("[Home]")
+    expect(leftButton).toBeInTheDocument()
+    userEvent.click(leftButton)
+    expect(leftButtonHandler).toHaveBeenCalled();
+
+    expect(getByText("Hello world")).toBeInTheDocument();
+
+    expect(queryByText("Menu Item")).not.toBeInTheDocument();
+
+    const rightButton = getByText("Menu")
+    expect(rightButton).toBeInTheDocument();
+    userEvent.click(rightButton);
+    expect(onMenuToggle).toHaveBeenCalled();
+  })
+
+	test("navbar and menu render when menu is open and close button can be clicked", () =>{
+    const leftButtonHandler = jest.fn();
+    const onMenuToggle = jest.fn();
+    const menuItemCallback = jest.fn();
+    const { getByText } = render(
+      <NavBar 
+        leftButtonHandler={leftButtonHandler}
+        title="Hello world"
+        menuItems={{ "Menu Item": "/link", "Other Item": menuItemCallback }}
+        menuIsHidden={false}
+        onMenuToggle={onMenuToggle}
+      />
+    );
+
+    const leftButton = getByText("Home")
+    expect(leftButton).toBeInTheDocument()
+    userEvent.click(leftButton)
+    expect(leftButtonHandler).toHaveBeenCalled();
+
+    expect(getByText("Hello world")).toBeInTheDocument();
+
+    const firstMenuItem = getByText("Menu Item");
+    expect(firstMenuItem).toBeInTheDocument();
+    expect(firstMenuItem).toHaveAttribute("href", "/link");
+    expect(menuItemCallback).not.toHaveBeenCalled();
+
+    const secondMenuItem = getByText("Other Item");
+    expect(secondMenuItem).toBeInTheDocument();
+    userEvent.click(secondMenuItem)
+    expect(menuItemCallback).toHaveBeenCalled();
+
+    const rightButton = getByText("Close")
+    expect(rightButton).toBeInTheDocument();
+    userEvent.click(rightButton);
+    expect(onMenuToggle).toHaveBeenCalled();
+  })
+})