From 8cbce16bb33df06449c13167379f739f704716b1 Mon Sep 17 00:00:00 2001
From: Rocio De Santiago <rociodesantiago@CoformaSantiago.lan>
Date: Mon, 29 Jul 2024 16:27:25 -0500
Subject: [PATCH] add test for menu and logout

---
 .../src/components/layout/Header.test.tsx     | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/services/ui-src/src/components/layout/Header.test.tsx b/services/ui-src/src/components/layout/Header.test.tsx
index c80b5e16..84d08c5f 100644
--- a/services/ui-src/src/components/layout/Header.test.tsx
+++ b/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);