add test for menu and logout

services/ui-src/src/components/layout/Header.test.tsx

@@ -1,6 +1,6 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { RouterWrappedComponent } from "utils/testing/setupJest";
-import { Header } from "components";
+import { Header, MenuOption } from "components";
 import { testA11y } from "utils/testing/commonTests";
 
 const headerComponent = (
@@ -31,6 +31,36 @@ describe("<Header />", () => {
     test("Menu button is visible", () => {
       expect(screen.getByAltText("Arrow down")).toBeVisible();
     });
+
+    test("Renders My Account and is clickable", () => {
+      render(
+        <MenuOption
+          text={"My Account"}
+          icon={"icon_arrrow_down.png"}
+          altText={"Arrow down"}
+        />
+      );
+
+      const menuButton = screen.getByRole("button", { name: /my account/i });
+      expect(menuButton).toBeInTheDocument();
+
+      fireEvent.click(menuButton);
+    });
+
+    test("Logs out user", () => {
+      render(
+        <MenuOption
+          text={"Log Out"}
+          icon={"icon_arrow_right_square.png"}
+          altText={"Logout"}
+        />
+      );
+
+      const logoutButton = screen.getByRole("img", { name: /Logout/i });
+      expect(logoutButton).toBeInTheDocument();
+
+      fireEvent.click(logoutButton);
+    });
   });
 
   testA11y(headerComponent);