test: add tests for NavbarDesktop (#368)

Author: Anujsinghdevx

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

@@ -1,66 +1,94 @@
+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('@/components/ui/slider', () => ({
-  Slider: () => <div data-testid="sync-slider" />,
+  Slider: () => <div data-testid="sync-slider">slider</div>,
 }));
+
 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/dropdown-menu', () => ({
+  DropdownMenu: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuTrigger: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuContent: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuItem: ({ children, onClick, onSelect }: any) => (
+    <div onClick={onClick} onMouseDown={(e) => onSelect?.(e)}>
+      {children}
+    </div>
+  ),
+  DropdownMenuLabel: ({ children }: any) => <div>{children}</div>,
 }));
+
 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>
+    <div data-testid="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';
 
-jest.mock('../navbar-utils', () => ({
-  deleteAllTasks: jest.fn(),
-  handleLogout: jest.fn(),
-  routeList: [
-    { href: '#', label: 'Home' },
-    { href: '#tasks', label: 'Tasks' },
-    { href: '#setup-guide', label: 'Setup Guide' },
-    { href: '#faq', label: 'FAQ' },
-  ],
+jest.mock('@/components/ui/avatar', () => ({
+  Avatar: ({ children }: any) => <div>{children}</div>,
+  AvatarImage: () => <img alt="avatar" />,
+  AvatarFallback: ({ children }: any) => <button>{children}</button>,
+}));
+
+jest.mock('@/components/utils/ThemeModeToggle', () => ({
+  ModeToggle: () => <div data-testid="mode-toggle" />,
 }));
+
 jest.mock('@/components/HomeComponents/DevLogs/DevLogs', () => ({
-  DevLogs: () => <div data-testid="dev-logs-dialog" />,
+  DevLogs: () => <div data-testid="dev-logs" />,
+}));
+
+jest.mock('@/components/utils/TaskAutoSync', () => ({
+  useTaskAutoSync: jest.fn(),
+}));
+
+jest.mock('@/components/utils/ExportTasks', () => ({
+  exportTasksAsJSON: jest.fn(),
+  exportTasksAsTXT: jest.fn(),
 }));
 
 jest.mock('@/components/utils/URLs', () => ({
   url: {
     githubRepoURL: 'https://github.com/test/repo',
   },
 }));
+
+jest.mock('../navbar-utils', () => ({
+  routeList: [
+    { href: '#', label: 'Home' },
+    { href: '#tasks', label: 'Tasks' },
+    { href: '#faq', label: 'FAQ' },
+  ],
+  deleteAllTasks: jest.fn(),
+  handleLogout: jest.fn(),
+}));
+
 const mockSetIsLoading = jest.fn();
 
-const mockProps: Props = {
-  imgurl: 'http://example.com/image.png',
+const baseProps: Props = {
+  imgurl: 'http://example.com/avatar.png',
   email: 'test@example.com',
   encryptionSecret: 'secret',
   origin: 'http://localhost:3000',
-  UUID: '1234-5678',
+  UUID: 'uuid',
   tasks: [],
 };
 
-const extendedProps = {
-  ...mockProps,
+const props = {
+  ...baseProps,
   isLoading: false,
   setIsLoading: mockSetIsLoading,
 };
@@ -69,30 +97,28 @@ describe('NavbarDesktop', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
-  it('renders the navigation links correctly', () => {
-    render(<NavbarDesktop {...extendedProps} />);
+
+  it('renders navigation links', () => {
+    render(<NavbarDesktop {...props} />);
 
     routeList.forEach((route) => {
       expect(screen.getByText(route.label)).toBeInTheDocument();
     });
   });
-  it('opens user menu and displays email', async () => {
-    render(<NavbarDesktop {...extendedProps} />);
 
-    const avatarFallback = screen.getByText('CN');
-    await userEvent.click(avatarFallback);
+  it('opens user menu and shows email', async () => {
+    render(<NavbarDesktop {...props} />);
 
-    expect(screen.getAllByText('test@example.com')[0]).toBeInTheDocument();
+    await userEvent.click(screen.getByText('CN'));
+    expect(screen.getAllByText('test@example.com').length).toBeGreaterThan(0);
   });
 
-  it('opens github link when clicked', async () => {
+  it('opens GitHub repo in new tab', 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'));
+    render(<NavbarDesktop {...props} />);
+    await userEvent.click(screen.getByText('CN'));
+    await userEvent.click(screen.getByText('GitHub'));
 
     expect(openSpy).toHaveBeenCalledWith(
       'https://github.com/test/repo',
@@ -101,46 +127,40 @@ describe('NavbarDesktop', () => {
 
     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();
+  it('exports tasks as TXT', async () => {
+    const { exportTasksAsTXT } = require('@/components/utils/ExportTasks');
 
-    await user.click(screen.getByText('Download .txt'));
+    render(<NavbarDesktop {...props} />);
+    await userEvent.click(screen.getByText('CN'));
+    await userEvent.click(screen.getByText('Export tasks'));
+    await userEvent.click(screen.getByText('Download .txt'));
 
     expect(exportTasksAsTXT).toHaveBeenCalledWith([]);
   });
+
   it('exports tasks as JSON', async () => {
     const { exportTasksAsJSON } = require('@/components/utils/ExportTasks');
 
-    render(<NavbarDesktop {...extendedProps} />);
-
+    render(<NavbarDesktop {...props} />);
     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'));
+  it('enables auto sync and shows slider', async () => {
+    render(<NavbarDesktop {...props} />);
+
+    await userEvent.click(screen.getByText('CN'));
+    await userEvent.click(screen.getByText('toggle'));
 
     expect(screen.getByTestId('sync-slider')).toBeInTheDocument();
   });
-});
 
-describe('NavbarDesktop snapshot', () => {
-  it('renders correctly', () => {
-    const { asFragment } = render(<NavbarDesktop {...extendedProps} />);
+  it('renders consistently (snapshot)', () => {
+    const { asFragment } = render(<NavbarDesktop {...props} />);
     expect(asFragment()).toMatchSnapshot();
   });
 });