test: navbar desktop coverage (#318)

* test(navbar): improve coverage for NavbarDesktop

* test(navbar): improve NavbarDesktop testability and coverage

* test: improve NavbarDesktop interaction coverage

* test(navbar): update NavbarDesktop snapshot

Author: Sparshagarwal29

frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx

@@ -16,8 +16,10 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
-import { ModeToggle } from '../../utils/ThemeModeToggle';
+
+import { ModeToggle } from '@/components/utils/ThemeModeToggle';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
 import { buttonVariants } from '@/components/ui/button';
 import {
   routeList,
@@ -41,7 +43,7 @@ import {
   exportTasksAsTXT,
 } from '@/components/utils/ExportTasks';
 import { useState } from 'react';
-import { DevLogs } from '../DevLogs/DevLogs';
+import { DevLogs } from '@/components/HomeComponents/DevLogs/DevLogs';
 import { useTaskAutoSync } from '@/components/utils/TaskAutoSync';
 import { Label } from '@/components/ui/label';
 

frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx

@@ -1,8 +1,34 @@
+jest.mock('@/components/ui/slider', () => ({
+  Slider: () => <div data-testid="sync-slider" />,
+}));
+jest.mock('@/components/ui/switch', () => ({
+  Switch: ({ onCheckedChange }: any) => (
+    <button onClick={() => onCheckedChange(true)}>toggle</button>
+  ),
+}));
+jest.mock('@/components/utils/ExportTasks', () => ({
+  exportTasksAsJSON: jest.fn(),
+  exportTasksAsTXT: jest.fn(),
+}));
+jest.mock('../navbar-utils', () => ({
+  ...jest.requireActual('../navbar-utils'),
+  deleteAllTasks: jest.fn(),
+}));
+jest.mock('@/components/ui/dialog', () => ({
+  Dialog: ({ children }: any) => <div>{children}</div>,
+  DialogTrigger: ({ children }: any) => <div>{children}</div>,
+  DialogContent: ({ children }: any) => (
+    <div data-testid="export-dialog">{children}</div>
+  ),
+  DialogHeader: ({ children }: any) => <div>{children}</div>,
+  DialogTitle: ({ children }: any) => <h2>{children}</h2>,
+  DialogDescription: ({ children }: any) => <p>{children}</p>,
+}));
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { NavbarDesktop } from '../NavbarDesktop';
 import { Props, routeList } from '../navbar-utils';
 
-// Mock external dependencies
 jest.mock('../navbar-utils', () => ({
   deleteAllTasks: jest.fn(),
   handleLogout: jest.fn(),
@@ -13,8 +39,17 @@ jest.mock('../navbar-utils', () => ({
     { href: '#faq', label: 'FAQ' },
   ],
 }));
+jest.mock('@/components/HomeComponents/DevLogs/DevLogs', () => ({
+  DevLogs: () => <div data-testid="dev-logs-dialog" />,
+}));
 
+jest.mock('@/components/utils/URLs', () => ({
+  url: {
+    githubRepoURL: 'https://github.com/test/repo',
+  },
+}));
 const mockSetIsLoading = jest.fn();
+
 const mockProps: Props = {
   imgurl: 'http://example.com/image.png',
   email: 'test@example.com',
@@ -34,22 +69,77 @@ describe('NavbarDesktop', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
-
   it('renders the navigation links correctly', () => {
     render(<NavbarDesktop {...extendedProps} />);
 
     routeList.forEach((route) => {
       expect(screen.getByText(route.label)).toBeInTheDocument();
     });
   });
+  it('opens user menu and displays email', async () => {
+    render(<NavbarDesktop {...extendedProps} />);
 
-  it('displays user email and handles dropdown menu actions', () => {
+    const avatarFallback = screen.getByText('CN');
+    await userEvent.click(avatarFallback);
+
+    expect(screen.getAllByText('test@example.com')[0]).toBeInTheDocument();
+  });
+
+  it('opens github link when clicked', async () => {
+    const openSpy = jest.spyOn(window, 'open').mockImplementation(() => null);
+
+    const user = userEvent.setup();
     render(<NavbarDesktop {...extendedProps} />);
+
+    await user.click(screen.getByText('CN'));
+    await user.click(screen.getByText('GitHub'));
+
+    expect(openSpy).toHaveBeenCalledWith(
+      'https://github.com/test/repo',
+      '_blank'
+    );
+
+    openSpy.mockRestore();
+  });
+  it('exports tasks as TXT and triggers export handler', async () => {
+    const user = userEvent.setup();
+    const { exportTasksAsTXT } = require('@/components/utils/ExportTasks');
+
+    render(<NavbarDesktop {...extendedProps} />);
+
+    await user.click(screen.getByText('CN'));
+    await user.click(screen.getByText('Export tasks'));
+
+    expect(screen.getByText(/Would you like to download/i)).toBeInTheDocument();
+
+    await user.click(screen.getByText('Download .txt'));
+
+    expect(exportTasksAsTXT).toHaveBeenCalledWith([]);
+  });
+  it('exports tasks as JSON', async () => {
+    const { exportTasksAsJSON } = require('@/components/utils/ExportTasks');
+
+    render(<NavbarDesktop {...extendedProps} />);
+
+    await userEvent.click(screen.getByText('CN'));
+    await userEvent.click(screen.getByText('Export tasks'));
+    await userEvent.click(screen.getByText('Download .json'));
+
+    expect(exportTasksAsJSON).toHaveBeenCalledWith([]);
+  });
+  it('shows slider when auto sync is enabled', async () => {
+    const user = userEvent.setup();
+    render(<NavbarDesktop {...extendedProps} />);
+
+    await user.click(screen.getByText('CN'));
+    await user.click(screen.getByText('toggle'));
+
+    expect(screen.getByTestId('sync-slider')).toBeInTheDocument();
   });
 });
 
-describe('NavbarDesktop component using snapshot', () => {
-  test('renders correctly', () => {
+describe('NavbarDesktop snapshot', () => {
+  it('renders correctly', () => {
     const { asFragment } = render(<NavbarDesktop {...extendedProps} />);
     expect(asFragment()).toMatchSnapshot();
   });

frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarDesktop.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NavbarDesktop component using snapshot renders correctly 1`] = `
+exports[`NavbarDesktop snapshot renders correctly 1`] = `
 <DocumentFragment>
   <div
     class="hidden md:flex items-center justify-between w-full"