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`] = `