diff --git a/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx b/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx
index 82a11bc0..a4d3a8c7 100644
--- a/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx
+++ b/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';
diff --git a/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx b/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx
index d49f565b..7cca11b5 100644
--- a/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx
+++ b/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx
@@ -1,8 +1,34 @@
+jest.mock('@/components/ui/slider', () => ({
+ Slider: () =>
,
+}));
+jest.mock('@/components/ui/switch', () => ({
+ Switch: ({ onCheckedChange }: any) => (
+
+ ),
+}));
+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) => {children}
,
+ DialogTrigger: ({ children }: any) => {children}
,
+ DialogContent: ({ children }: any) => (
+ {children}
+ ),
+ DialogHeader: ({ children }: any) => {children}
,
+ DialogTitle: ({ children }: any) => {children}
,
+ DialogDescription: ({ children }: any) => {children}
,
+}));
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: () => ,
+}));
+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,7 +69,6 @@ describe('NavbarDesktop', () => {
afterEach(() => {
jest.clearAllMocks();
});
-
it('renders the navigation links correctly', () => {
render();
@@ -42,14 +76,70 @@ describe('NavbarDesktop', () => {
expect(screen.getByText(route.label)).toBeInTheDocument();
});
});
+ it('opens user menu and displays email', async () => {
+ render();
- 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();
+
+ 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();
+
+ 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();
+
+ 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();
+
+ 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();
expect(asFragment()).toMatchSnapshot();
});
diff --git a/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarDesktop.test.tsx.snap b/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarDesktop.test.tsx.snap
index 2cdaf39b..72a1291c 100644
--- a/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarDesktop.test.tsx.snap
+++ b/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`] = `