test(Bar): add tests to almost fully cover

frontend/__tests__/unit/components/Bar.test.jsx

@@ -1,7 +1,8 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import Bar from "components/Bar";
-import { Router } from "react-router-dom";
+import { MemoryRouter, Route, Router } from "react-router-dom";
 import { createMemoryHistory } from "history";
+import userEvent from "@testing-library/user-event";
 
 // Useful reference: https://bholmes.dev/blog/mocking-browser-apis-fetch-localstorage-dates-the-easy-way-with-jest/
 
@@ -10,10 +11,10 @@ let mockStorage = {};
 describe("Bar", () => {
   beforeAll(() => {
     global.Storage.prototype.getItem = jest.fn((key) => mockStorage[key]);
+    global.Storage.prototype.clear = jest.fn(() => (mockStorage = {}));
   });
 
   beforeEach(() => {
-    // make sure the fridge starts out empty for each test
     mockStorage = {};
   });
 
@@ -44,4 +45,97 @@ describe("Bar", () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it("renders Bar unchanged when logged in, after clicking button to open menu", async () => {
+    const history = createMemoryHistory();
+    const user = userEvent.setup();
+    mockStorage["loggedIn"] = true;
+
+    const { container } = render(
+      <Router history={history}>
+        <Bar />
+      </Router>
+    );
+
+    const menuButton = screen.getByRole("button", {
+      name: "",
+    });
+
+    await user.click(menuButton);
+
+    const logOutMenuItem = screen.getByRole("menuitem", {
+      name: "Log out",
+    });
+    expect(logOutMenuItem).toBeInTheDocument();
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test("open and close menu when logged in", async () => {
+    const history = createMemoryHistory();
+    const user = userEvent.setup();
+    mockStorage["loggedIn"] = true;
+
+    render(
+      <Router history={history}>
+        <Bar />
+      </Router>
+    );
+
+    const menuButton = screen.getByRole("button", {
+      name: "",
+    });
+
+    // Open menu
+    await user.click(menuButton);
+
+    const logOutMenuItem = screen.getByRole("menuitem", {
+      name: "Log out",
+    });
+    expect(logOutMenuItem).toBeInTheDocument();
+
+    // Close menu
+    await user.keyboard("{Escape}");
+
+    expect(logOutMenuItem).not.toBeInTheDocument();
+  });
+
+  test("open menu and click on 'Log out'", async () => {
+    const user = userEvent.setup();
+    mockStorage["loggedIn"] = true;
+    let testLocation;
+
+    render(
+      <MemoryRouter initialEntries={["/test-url/"]}>
+        <Route path="/test-url">
+          <Bar />
+        </Route>
+        <Route
+          path="*"
+          render={({ location }) => {
+            testLocation = location;
+            return null;
+          }}
+        />
+      </MemoryRouter>
+    );
+
+    const menuButton = screen.getByRole("button", {
+      name: "",
+    });
+
+    // Open menu
+    await user.click(menuButton);
+
+    const logOutMenuItem = screen.getByRole("menuitem", {
+      name: "Log out",
+    });
+    expect(logOutMenuItem).toBeInTheDocument();
+
+    // Click on 'Log out'
+    await user.click(logOutMenuItem);
+
+    expect(Object.keys(mockStorage).length).toBe(0);
+    expect(testLocation.pathname).toBe("/");
+  });
 });

frontend/__tests__/unit/components/__snapshots__/Bar.test.jsx.snap

@@ -56,6 +56,73 @@ exports[`Bar renders Bar unchanged when logged in 1`] = `
 </div>
 `;
 
+exports[`Bar renders Bar unchanged when logged in, after clicking button to open menu 1`] = `
+<div
+  aria-hidden="true"
+>
+  <header
+    class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorSecondary MuiPaper-elevation4"
+    style="background: rgb(0, 0, 0);"
+  >
+    <div
+      class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+    >
+      <div
+        class="MuiBox-root MuiBox-root-3"
+      >
+        <h6
+          class="MuiTypography-root MuiTypography-h6 MuiTypography-colorInherit"
+        >
+          <a
+            class="MuiTypography-root MuiLink-root MuiLink-underlineNone MuiTypography-colorInherit"
+            href="/"
+          >
+            <img
+              alt="logo"
+              height="100"
+              src="test-file-stub"
+              width="100"
+            />
+          </a>
+        </h6>
+      </div>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        >
+          <span
+            class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
+            style="width: 2.8284271247461903px; height: 2.8284271247461903px; top: -1.4142135623730951px; left: -1.4142135623730951px;"
+          >
+            <span
+              class="MuiTouchRipple-child MuiTouchRipple-childLeaving"
+            />
+          </span>
+        </span>
+      </button>
+    </div>
+  </header>
+</div>
+`;
+
 exports[`Bar renders Bar unchanged when logged out 1`] = `
 <div>
   <header