test: increase test coverage for navbarmobile (#398)

* test:increased test coverage for navbarmobile.tsx

* test:increased test coverage for navbarmobile.tsx

Author: Neeraj-gagat

frontend/src/components/LandingComponents/Navbar/NavbarMobile.tsx

@@ -20,11 +20,12 @@ export const NavbarMobile = () => {
       <ModeToggle />
 
       <Sheet open={isOpen} onOpenChange={setIsOpen}>
-        <SheetTrigger className="px-2">
-          <Menu
-            className="flex md:hidden h-5 w-5"
-            onClick={() => setIsOpen(true)}
-          >
+        <SheetTrigger
+          data-testid="menu-icon"
+          className="px-2"
+          onClick={() => setIsOpen(true)}
+        >
+          <Menu className="flex md:hidden h-5 w-5">
             <span className="sr-only">Menu Icon</span>
           </Menu>
         </SheetTrigger>
@@ -33,7 +34,10 @@ export const NavbarMobile = () => {
           <SheetHeader>
             <SheetTitle className="font-bold text-xl">CCSync</SheetTitle>
           </SheetHeader>
-          <nav className="flex flex-col justify-center items-center gap-2 mt-4">
+          <nav
+            data-testid="route-list"
+            className="flex flex-col justify-center items-center gap-2 mt-4"
+          >
             {routeList.map(({ href, label }) => (
               <a
                 rel="noreferrer noopener"

frontend/src/components/LandingComponents/Navbar/__tests__/NavbarMobile.test.tsx

@@ -1,9 +1,46 @@
 import { NavbarMobile } from '../NavbarMobile';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 describe('NavbarMobile component using snapshot', () => {
   it('renders correctly', () => {
     const { asFragment } = render(<NavbarMobile />);
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+describe('NavbarMobile component test', () => {
+  test('renders ModeToggle and menu trigger', () => {
+    render(<NavbarMobile />);
+
+    expect(screen.getByTestId('sun-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('menu-icon')).toBeInTheDocument();
+  });
+
+  test('menu should NOT be visible initially', () => {
+    render(<NavbarMobile />);
+
+    expect(screen.queryByText('CCSync')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('route-list')).not.toBeInTheDocument();
+  });
+
+  test('clicking on menu-icon opens menu', () => {
+    render(<NavbarMobile />);
+
+    const button = screen.getByTestId('menu-icon');
+    fireEvent.click(button);
+
+    expect(screen.getByText('CCSync')).toBeInTheDocument();
+    expect(screen.getByTestId('route-list')).toBeInTheDocument();
+  });
+
+  test('clicking on any route closes menu -> setIsOpen(false)', () => {
+    render(<NavbarMobile />);
+
+    fireEvent.click(screen.getByTestId('menu-icon'));
+
+    const firstRoute = screen.getByRole('link', { name: /home/i });
+    fireEvent.click(firstRoute);
+
+    expect(screen.queryByTestId('route-list')).not.toBeInTheDocument();
+  });
+});

frontend/src/components/LandingComponents/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap

@@ -259,6 +259,7 @@ exports[`Navbar component using snapshot renders correctly 1`] = `
               aria-haspopup="dialog"
               class="px-2"
               data-state="closed"
+              data-testid="menu-icon"
               type="button"
             >
               <svg

frontend/src/components/LandingComponents/Navbar/__tests__/__snapshots__/NavbarMobile.test.tsx.snap

@@ -85,6 +85,7 @@ exports[`NavbarMobile component using snapshot renders correctly 1`] = `
       aria-haspopup="dialog"
       class="px-2"
       data-state="closed"
+      data-testid="menu-icon"
       type="button"
     >
       <svg