UADS-17 test: Added test cases for Navbar component

web/src/Components/Navbar.tsx

@@ -35,7 +35,7 @@ export default function Navbar() {
 			<div className="relative z-10 flex justify-center items-center h-full">
 				<div className="w-full h-auto flex justify-between items-center select-none">
 					<NavLink to={"/"}>
-						<img src={logo} alt="UADS Logo" className="w-[183px] h-[64px]"/>
+						<img src={logo} alt="UADS Logo" className="w-[183px] h-[64px]" />
 					</NavLink>
 					{/* Navlinks */}
 					<div className="hidden lg:flex justify-between text-2xl">
@@ -53,7 +53,7 @@ export default function Navbar() {
 
 					{/* Hamburger button */}
 					<div className="lg:hidden">
-						<button type="button" onClick={handleMenu} className="inline-flex items-center justify-center  rounded-lg text-light-pink hover:text-yellow">
+						<button type="button" onClick={handleMenu} aria-label="openMenu" className="inline-flex items-center justify-center rounded-lg text-light-pink hover:text-yellow">
 							<FaBars size={30} color="pink" />
 						</button>
 					</div>
@@ -63,7 +63,7 @@ export default function Navbar() {
 			{/* Mobile Menu */}
 			{open && (
 				<div className="lg:hidden absolute top-0 right-0 w-full bg-pink pt-20 pb-4 z-10 flex flex-col items-center">
-					<button type="button" onClick={handleMenu} className="absolute top-7 right-10">
+					<button type="button" onClick={handleMenu} aria-label="closeMenu" className="absolute top-7 right-10">
 						<FaTimes size={30} color="pink" />
 					</button>
 

web/src/components/__tests__/Navbar.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import Navbar from "../Navbar";
+import "@testing-library/jest-dom";
+
+describe("Navbar Component", () => {
+	it("Should render the logo", () => {
+		render(
+			<MemoryRouter>
+				<Navbar />
+			</MemoryRouter>
+		);
+
+		const logo = screen.getByAltText(/UADS Logo/i);
+		expect(logo).toBeInTheDocument();
+		expect(logo).toHaveAttribute("src", "/src/assets/uads_logo.svg");
+	});
+
+	it("Should render all navigation links", () => {
+		render(
+			<MemoryRouter>
+				<Navbar />
+			</MemoryRouter>
+		);
+
+		const links = [
+			{ title: "Home", href: "/" },
+			{ title: "About", href: "/about" },
+			{ title: "Events", href: "/events" },
+			{ title: "Sponsors", href: "/sponsors" },
+			{ title: "Join", href: "/signup" },
+		];
+
+		links.forEach((link) => {
+			const navLink = screen.getByText(new RegExp(link.title, "i"));
+			expect(navLink).toBeInTheDocument();
+			expect(navLink).toHaveAttribute("href", link.href);
+		});
+	});
+
+	it("Should render hamburger button in mobile view and display close button", () => {
+		render(
+			<MemoryRouter>
+				<Navbar />
+			</MemoryRouter>
+		);
+
+		// Set viewport size to simulate mobile view
+		window.innerWidth = 500;
+		window.dispatchEvent(new Event("resize"));
+
+		// Check if hamburger button is visible in mobile view
+		const hamburgerButtonMobile = screen.getByRole("button", { name: /openMenu/i });
+		expect(hamburgerButtonMobile).toBeVisible();
+
+		// Click the hamburger button to open the mobile menu
+		fireEvent.click(hamburgerButtonMobile);
+
+		// Check if close menu button is visible after clicking the hamburger button
+		const closeButtonMobile = screen.getByRole("button", { name: /closeMenu/i });
+		expect(closeButtonMobile).toBeVisible();
+	});
+});