Tests/navbar

__tests__/components/common/navbar/Navbar.test.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { NavbarLink } from "@/components/common/Navbar/Navbar.types";
+import { NAVBAR_LINKS } from "@/components/common/Navbar/Navbar.constants";
+
+import Navbar from "@/components/common/Navbar/Navbar";
+
+describe("Navbar Component", () => {
+    it("should render the Navbar", () => {
+        render(<Navbar />);
+
+        const nav = screen.getByRole("banner");
+
+        expect(nav).toBeInTheDocument();
+
+        // nav links assertions - desktop
+        NAVBAR_LINKS.forEach((link: NavbarLink) => {
+            const navLink = screen.getAllByText(link.name)[0];
+            expect(navLink).toHaveTextContent(link.name);
+        });
+
+        // signin button assertions
+        const signinButton = screen.getByTestId("signin-button");
+        const signInText = screen.getByText("Sign in with Github");
+
+        expect(signInText).toBeInTheDocument();
+        expect(signinButton).toBeInTheDocument();
+        expect(signinButton).toHaveAttribute("href", "login url will come here");
+    });
+
+    it("should render the mobile navbar when hamburger button is clicked", () => {
+        render(<Navbar />);
+
+        const mobileNav = screen.queryByTestId("mobile-nav");
+        const hamburgerButton = screen.queryByRole("button");
+
+        // hamburgerButton assertions
+        expect(hamburgerButton).toBeInTheDocument();
+        expect(hamburgerButton).toHaveClass("hamburger");
+
+        // toggle navlinks assertions
+        expect(mobileNav).toHaveClass("hidden");
+
+        fireEvent.click(hamburgerButton!);
+
+        expect(mobileNav).toHaveClass("visible");
+
+        // nav links assertions - mobile
+        NAVBAR_LINKS.forEach((link: NavbarLink) => {
+            const navLink = screen.queryAllByText(link.name)[1];
+            expect(navLink).toHaveTextContent(link.name);
+        });
+    });
+});

src/components/common/Navbar/Navbar.constants.ts

@@ -0,0 +1,24 @@
+import { NavbarLink } from "./Navbar.types";
+
+export const NAVBAR_LINKS: NavbarLink[] = [
+    {
+        id: "welcome-site",
+        name: "Welcome",
+        link: process.env.NEXT_PUBLIC_WELCOME_SITE,
+    },
+    {
+        id: "events-site",
+        name: "Events",
+        link: `${process.env.NEXT_PUBLIC_WWW_SITE}/events`,
+    },
+    {
+        id: "members-site",
+        name: "Members",
+        link: process.env.NEXT_PUBLIC_MEMBERS_SITE,
+    },
+    {
+        id: "status-site",
+        name: "Status",
+        link: process.env.NEXT_PUBLIC_STATUS_SITE,
+    },
+];

src/components/common/Navbar/Navbar.types.ts

@@ -0,0 +1,5 @@
+export type NavbarLink = {
+    id: string;
+    name: string;
+    link: string;
+};