feat: implement unit test

Author: mpsalunggg

package.json

@@ -39,6 +39,7 @@
     "lucide-react": "^0.451.0",
     "next": "14.2.5",
     "next-intl": "^3.17.6",
+    "next-router-mock": "^0.9.13",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",

src/components/common/LocaleToggle/index.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useTransition } from "react";
 import { useLocale } from "next-intl";
 import { useParams } from "next/navigation";

src/components/layout/Navbar/Navbar.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { NextIntlClientProvider } from "next-intl";
+import Navbar from ".";
+
+const messages = {
+  Layout: {
+    navbar: {
+      "link-1": "About Us",
+      "link-2": "Events",
+      "link-3": "Donate",
+    },
+  },
+  Announcement: {
+    "pdd-2024": "🚀 Hi there!...",
+  },
+};
+
+vi.mock("@/lib/navigation", () => ({
+  usePathname: vi.fn(),
+  useRouter: vi.fn(),
+  Link: vi.fn(),
+}));
+
+describe("Navbar", () => {
+  it("renders path link correctly", () => {
+    render(
+      <NextIntlClientProvider timeZone="Europe/London" locale="en" messages={messages}>
+        <Navbar />
+      </NextIntlClientProvider>
+    );
+
+    const link = screen.getByRole("link");
+    expect(link).toBeInTheDocument();
+  });
+
+  it("renders the announcement correctly", () => {
+    render(
+      <NextIntlClientProvider timeZone="Europe/London" locale="en" messages={messages}>
+        <Navbar />
+      </NextIntlClientProvider>
+    );
+
+    const annnouncement = screen.getByRole("heading", { level: 2 });
+    expect(annnouncement).toHaveTextContent("Hi there!...");
+  });
+});

src/components/layout/Navbar/index.tsx

@@ -13,7 +13,7 @@ import IconHmcTextDark from "@/components/icon/IconHmcTextDark";
 const Navbar = () => {
   const t = useTranslations("Layout");
   return (
-    <header className="sticky w-full z-50 top-0">
+    <header aria-label="navbar" className="sticky w-full z-50 top-0">
       <AnnouncementLayout />
       <div className="border-b  bg-white dark:bg-slate-950">
         <div className="container mx-auto py-5">

src/components/ui/Announcement/index.tsx

@@ -21,7 +21,7 @@ function Announcement({ message, url }: AnnouncementProps) {
       role="alert"
       className="bg-slate-950 flex justify-center items-center gap-2 text-white text-center px-4 py-2 text-sm md:text-normal"
     >
-      {messageEl}
+      <h2>{messageEl}</h2>
       <button onClick={() => setHidden(true)} className="bg-slate-500 rounded-full p-1  ">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>

src/lib/navigation/NavLink.tsx

@@ -10,7 +10,7 @@ function NavLink<Pathname extends keyof typeof pathnames>({ href, onClick, ...re
   const path = usePathname();
   return (
     <Link href={href} onClick={onClick}>
-      <span className={path.includes(href as string) ? "text-hmc-base-blue" : "text-hmc-base-darkblue"}>
+      <span className={path?.includes(href as string) ? "text-hmc-base-blue" : "text-hmc-base-darkblue"}>
         {rest.title}
       </span>
     </Link>

yarn.lock

@@ -3733,6 +3733,11 @@ next-intl@^3.17.6:
     negotiator "^0.6.3"
     use-intl "^3.19.1"
 
+next-router-mock@^0.9.13:
+  version "0.9.13"
+  resolved "https://registry.yarnpkg.com/next-router-mock/-/next-router-mock-0.9.13.tgz#bdee2011ea6c09e490121c354ef917f339767f72"
+  integrity sha512-906n2RRaE6Y28PfYJbaz5XZeJ6Tw8Xz1S6E31GGwZ0sXB6/XjldD1/2azn1ZmBmRk5PQRkzjg+n+RHZe5xQzWA==
+
 next-themes@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.3.0.tgz#b4d2a866137a67d42564b07f3a3e720e2ff3871a"
@@ -4465,7 +4470,16 @@ string-argv@~0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4554,7 +4568,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==