From b4952cf2a6205d303080cc3fade208cd79cfd823 Mon Sep 17 00:00:00 2001 From: Neeraj-gagat Date: Sun, 28 Dec 2025 02:39:01 +0530 Subject: [PATCH 1/2] test:added test for NavbarMobile --- .../Navbar/__tests__/NavbarMobile.test.tsx | 144 +++- .../__snapshots__/NavbarMobile.test.tsx.snap | 708 ++++++++++++------ 2 files changed, 600 insertions(+), 252 deletions(-) diff --git a/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarMobile.test.tsx b/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarMobile.test.tsx index 025c11bc..5b534518 100644 --- a/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarMobile.test.tsx +++ b/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarMobile.test.tsx @@ -1,13 +1,89 @@ import { render, screen, fireEvent } from '@testing-library/react'; -import { NavbarMobile } from '../NavbarMobile'; import { - deleteAllTasks, - handleLogout, - Props, - routeList, -} from '../navbar-utils'; + exportTasksAsJSON, + exportTasksAsTXT, +} from '@/components/utils/ExportTasks'; + +jest.mock('lucide-react', () => ({ + Menu: () =>
Menu
, + Github: () =>
Github
, + LogOut: () =>
LogOut
, + Trash2: () =>
Trash2
, + FileDown: () =>
FileDown
, + FileJson: () =>
FileJson
, + FileText: () =>
FileText
, + Terminal: () =>
Terminal
, +})); + +jest.mock('@/components/ui/sheet', () => ({ + Sheet: ({ children }: any) =>
{children}
, + SheetTrigger: ({ children, onClick }: any) => ( + + ), + SheetContent: ({ children }: any) =>
{children}
, + SheetHeader: ({ children }: any) =>
{children}
, + SheetTitle: ({ children }: any) =>
{children}
, + SheetDescription: ({ children }: any) =>
{children}
, +})); + +jest.mock('@/components/ui/dialog', () => ({ + Dialog: ({ children }: any) =>
{children}
, + DialogTrigger: ({ children, onClick }: any) => ( + + ), + DialogContent: ({ children }: any) =>
{children}
, + DialogHeader: ({ children }: any) =>
{children}
, + DialogTitle: ({ children }: any) =>
{children}
, + DialogDescription: ({ children }: any) =>
{children}
, +})); + +jest.mock('@/components/ui/button', () => ({ + Button: ({ children, ...props }: any) => ( + + ), + buttonVariants: ({ variant, size }: any = {}) => + `button-${variant || 'default'}-${size || 'default'}`, +})); + +jest.mock('@/components/ui/label', () => ({ + Label: ({ children, ...props }: any) => , +})); + +jest.mock('@/components/ui/switch', () => ({ + Switch: (props: any) => , +})); + +jest.mock('@/components/ui/slider', () => ({ + Slider: (props: any) => , +})); + +jest.mock('@/components/utils/ThemeModeToggle', () => ({ + ModeToggle: () =>
ModeToggle
, +})); + +jest.mock('@/components/HomeComponents/DevLogs/DevLogs', () => ({ + DevLogs: () =>
DevLogs
, +})); + +jest.mock('@/components/utils/URLs', () => ({ + url: { + github: 'https://github.com', + }, +})); + +jest.mock('@/components/utils/ExportTasks', () => ({ + exportTasksAsJSON: jest.fn(), + exportTasksAsTXT: jest.fn(), +})); + +jest.mock('@/components/utils/TaskAutoSync', () => ({ + useTaskAutoSync: () => ({ + isAutoSyncEnabled: false, + setIsAutoSyncEnabled: jest.fn(), + }), +})); -jest.mock('../navbar-utils', () => ({ +jest.mock('@/components/HomeComponents/Navbar/navbar-utils', () => ({ deleteAllTasks: jest.fn(), handleLogout: jest.fn(), routeList: [ @@ -18,6 +94,14 @@ jest.mock('../navbar-utils', () => ({ ], })); +import { NavbarMobile } from '../NavbarMobile'; +import { + deleteAllTasks, + handleLogout, + Props, + routeList, +} from '../navbar-utils'; + const mockSetIsOpen = jest.fn(); const mockSetIsLoading = jest.fn(); const mockProps: Props & { @@ -51,10 +135,10 @@ describe('NavbarMobile', () => { it('opens the menu when Menu button is clicked', () => { render(); - const menuButton = screen.getByRole('button', { name: /menu icon/i }); - fireEvent.click(menuButton); - expect(mockProps.setIsOpen).toHaveBeenCalledWith(true); + expect(screen.getByText('Home')).toBeInTheDocument(); + expect(screen.getByText('Tasks')).toBeInTheDocument(); + expect(screen.getByText('Setup Guide')).toBeInTheDocument(); }); it('displays the navigation links and buttons correctly when menu is open', () => { @@ -63,8 +147,8 @@ describe('NavbarMobile', () => { routeList.forEach((route) => { expect(screen.getByText(route.label)).toBeInTheDocument(); }); - expect(screen.getByText('Github')).toBeInTheDocument(); - expect(screen.getByText('Delete All Tasks')).toBeInTheDocument(); + expect(screen.getAllByText('Github').length).toBeGreaterThan(0); + expect(screen.getAllByText('Delete All Tasks').length).toBeGreaterThan(0); expect(screen.getByText('Log out')).toBeInTheDocument(); }); @@ -78,9 +162,9 @@ describe('NavbarMobile', () => { it("calls deleteAllTasks when 'Delete All Tasks' is clicked", () => { render(); - const deleteButton = screen.getByText('Delete All Tasks'); + const deleteButton = screen.getAllByText('Delete All Tasks'); - fireEvent.click(deleteButton); + fireEvent.click(deleteButton[0]); // Verify the confirmation modal appears expect(screen.getByText('Delete All Tasks?')).toBeInTheDocument(); @@ -100,10 +184,10 @@ describe('NavbarMobile', () => { // After modal opens, there should be 2 "Delete All Tasks" texts // The second one is the confirmation button in the modal const updatedDeleteButtons = screen.getAllByText('Delete All Tasks'); - expect(updatedDeleteButtons).toHaveLength(2); + expect(updatedDeleteButtons.length).toBeGreaterThanOrEqual(2); // Click the confirmation button (second one) - fireEvent.click(updatedDeleteButtons[1]); + fireEvent.click(updatedDeleteButtons[updatedDeleteButtons.length - 1]); expect(deleteAllTasks).toHaveBeenCalledWith(openProps); }); @@ -114,6 +198,34 @@ describe('NavbarMobile', () => { fireEvent.click(logoutButton); expect(handleLogout).toHaveBeenCalled(); }); + + test('export task as json and close menu', () => { + render(); + + fireEvent.click(screen.getByText('Export Tasks')); + fireEvent.click(screen.getByText('Download .json')); + + expect(exportTasksAsJSON).toHaveBeenCalledWith(openProps.tasks); + expect(mockSetIsOpen).toHaveBeenCalledWith(false); + }); + + test('export task as txt and close menu', () => { + render(); + + fireEvent.click(screen.getByText('Export Tasks')); + fireEvent.click(screen.getByText('Download .txt')); + + expect(exportTasksAsTXT).toHaveBeenCalledWith(openProps.tasks); + expect(mockSetIsOpen).toHaveBeenCalledWith(false); + }); + + test('opens auto-sync dialog', () => { + render(); + + fireEvent.click(screen.getByText('Auto-sync')); + + expect(screen.getByText(/Enable Auto-Sync/i)).toBeInTheDocument(); + }); }); describe('NavbarMobile component using snapshot', () => { diff --git a/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarMobile.test.tsx.snap b/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarMobile.test.tsx.snap index 60ed9281..7c95dceb 100644 --- a/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarMobile.test.tsx.snap +++ b/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarMobile.test.tsx.snap @@ -5,125 +5,243 @@ exports[`NavbarMobile component using snapshot renders correctly when closed: pr - - + ModeToggle + +
+ +
+
+
+ CCSync +
+
+ Mobile navigation menu for CCSync +
+
+ +
+
+
+
+
+
+ Delete All Tasks? +
+
+ This action cannot be undone +
+
+
+

+ Are you sure you want to delete all tasks for + + test@example.com + + ? +

+

+ All your tasks will be permanently deleted from the local database. +

+
+
+ + +
+
+
`; @@ -133,125 +251,243 @@ exports[`NavbarMobile component using snapshot renders correctly when open: prop - - + ModeToggle + +
+ +
+
+
+ CCSync +
+
+ Mobile navigation menu for CCSync +
+
+ +
+
+
+
+
+
+ Delete All Tasks? +
+
+ This action cannot be undone +
+
+
+

+ Are you sure you want to delete all tasks for + + test@example.com + + ? +

+

+ All your tasks will be permanently deleted from the local database. +

+
+
+ + +
+
+
`; From d71f95ca10c55c488650c5fa68eece432523b70a Mon Sep 17 00:00:00 2001 From: Neeraj-gagat Date: Sun, 28 Dec 2025 03:43:10 +0530 Subject: [PATCH 2/2] test:added test for NavbarMobile --- .../Navbar/__tests__/NavbarMobile.test.tsx | 107 +-- .../__snapshots__/NavbarMobile.test.tsx.snap | 708 ++++++------------ 2 files changed, 252 insertions(+), 563 deletions(-) diff --git a/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarMobile.test.tsx b/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarMobile.test.tsx index 5b534518..eb810e35 100644 --- a/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarMobile.test.tsx +++ b/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarMobile.test.tsx @@ -3,86 +3,19 @@ import { exportTasksAsJSON, exportTasksAsTXT, } from '@/components/utils/ExportTasks'; - -jest.mock('lucide-react', () => ({ - Menu: () =>
Menu
, - Github: () =>
Github
, - LogOut: () =>
LogOut
, - Trash2: () =>
Trash2
, - FileDown: () =>
FileDown
, - FileJson: () =>
FileJson
, - FileText: () =>
FileText
, - Terminal: () =>
Terminal
, -})); - -jest.mock('@/components/ui/sheet', () => ({ - Sheet: ({ children }: any) =>
{children}
, - SheetTrigger: ({ children, onClick }: any) => ( - - ), - SheetContent: ({ children }: any) =>
{children}
, - SheetHeader: ({ children }: any) =>
{children}
, - SheetTitle: ({ children }: any) =>
{children}
, - SheetDescription: ({ children }: any) =>
{children}
, -})); - -jest.mock('@/components/ui/dialog', () => ({ - Dialog: ({ children }: any) =>
{children}
, - DialogTrigger: ({ children, onClick }: any) => ( - - ), - DialogContent: ({ children }: any) =>
{children}
, - DialogHeader: ({ children }: any) =>
{children}
, - DialogTitle: ({ children }: any) =>
{children}
, - DialogDescription: ({ children }: any) =>
{children}
, -})); - -jest.mock('@/components/ui/button', () => ({ - Button: ({ children, ...props }: any) => ( - - ), - buttonVariants: ({ variant, size }: any = {}) => - `button-${variant || 'default'}-${size || 'default'}`, -})); - -jest.mock('@/components/ui/label', () => ({ - Label: ({ children, ...props }: any) => , -})); - -jest.mock('@/components/ui/switch', () => ({ - Switch: (props: any) => , -})); - -jest.mock('@/components/ui/slider', () => ({ - Slider: (props: any) => , -})); - -jest.mock('@/components/utils/ThemeModeToggle', () => ({ - ModeToggle: () =>
ModeToggle
, -})); - -jest.mock('@/components/HomeComponents/DevLogs/DevLogs', () => ({ - DevLogs: () =>
DevLogs
, -})); - -jest.mock('@/components/utils/URLs', () => ({ - url: { - github: 'https://github.com', - }, -})); +import { NavbarMobile } from '../NavbarMobile'; +import { + deleteAllTasks, + handleLogout, + Props, + routeList, +} from '../navbar-utils'; jest.mock('@/components/utils/ExportTasks', () => ({ exportTasksAsJSON: jest.fn(), exportTasksAsTXT: jest.fn(), })); -jest.mock('@/components/utils/TaskAutoSync', () => ({ - useTaskAutoSync: () => ({ - isAutoSyncEnabled: false, - setIsAutoSyncEnabled: jest.fn(), - }), -})); - jest.mock('@/components/HomeComponents/Navbar/navbar-utils', () => ({ deleteAllTasks: jest.fn(), handleLogout: jest.fn(), @@ -94,14 +27,6 @@ jest.mock('@/components/HomeComponents/Navbar/navbar-utils', () => ({ ], })); -import { NavbarMobile } from '../NavbarMobile'; -import { - deleteAllTasks, - handleLogout, - Props, - routeList, -} from '../navbar-utils'; - const mockSetIsOpen = jest.fn(); const mockSetIsLoading = jest.fn(); const mockProps: Props & { @@ -135,10 +60,10 @@ describe('NavbarMobile', () => { it('opens the menu when Menu button is clicked', () => { render(); + const menuButton = screen.getByRole('button', { name: /menu icon/i }); - expect(screen.getByText('Home')).toBeInTheDocument(); - expect(screen.getByText('Tasks')).toBeInTheDocument(); - expect(screen.getByText('Setup Guide')).toBeInTheDocument(); + fireEvent.click(menuButton); + expect(mockProps.setIsOpen).toHaveBeenCalledWith(true); }); it('displays the navigation links and buttons correctly when menu is open', () => { @@ -147,8 +72,8 @@ describe('NavbarMobile', () => { routeList.forEach((route) => { expect(screen.getByText(route.label)).toBeInTheDocument(); }); - expect(screen.getAllByText('Github').length).toBeGreaterThan(0); - expect(screen.getAllByText('Delete All Tasks').length).toBeGreaterThan(0); + expect(screen.getByText('Github')).toBeInTheDocument(); + expect(screen.getByText('Delete All Tasks')).toBeInTheDocument(); expect(screen.getByText('Log out')).toBeInTheDocument(); }); @@ -162,9 +87,9 @@ describe('NavbarMobile', () => { it("calls deleteAllTasks when 'Delete All Tasks' is clicked", () => { render(); - const deleteButton = screen.getAllByText('Delete All Tasks'); + const deleteButton = screen.getByText('Delete All Tasks'); - fireEvent.click(deleteButton[0]); + fireEvent.click(deleteButton); // Verify the confirmation modal appears expect(screen.getByText('Delete All Tasks?')).toBeInTheDocument(); @@ -184,10 +109,10 @@ describe('NavbarMobile', () => { // After modal opens, there should be 2 "Delete All Tasks" texts // The second one is the confirmation button in the modal const updatedDeleteButtons = screen.getAllByText('Delete All Tasks'); - expect(updatedDeleteButtons.length).toBeGreaterThanOrEqual(2); + expect(updatedDeleteButtons).toHaveLength(2); // Click the confirmation button (second one) - fireEvent.click(updatedDeleteButtons[updatedDeleteButtons.length - 1]); + fireEvent.click(updatedDeleteButtons[1]); expect(deleteAllTasks).toHaveBeenCalledWith(openProps); }); diff --git a/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarMobile.test.tsx.snap b/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarMobile.test.tsx.snap index 7c95dceb..60ed9281 100644 --- a/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarMobile.test.tsx.snap +++ b/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarMobile.test.tsx.snap @@ -5,243 +5,125 @@ exports[`NavbarMobile component using snapshot renders correctly when closed: pr - -
- -
-
-
- CCSync -
-
- Mobile navigation menu for CCSync -
-
- -
-
-
-
-
-
- Delete All Tasks? -
-
- This action cannot be undone -
-
-
-

- Are you sure you want to delete all tasks for - - test@example.com - - ? -

-

- All your tasks will be permanently deleted from the local database. -

-
-
- - -
-
-
+ + + + + + + + + + + + + + + + Toggle theme + + + `; @@ -251,243 +133,125 @@ exports[`NavbarMobile component using snapshot renders correctly when open: prop - -
- -
-
-
- CCSync -
-
- Mobile navigation menu for CCSync -
-
- -
-
-
-
-
-
- Delete All Tasks? -
-
- This action cannot be undone -
-
-
-

- Are you sure you want to delete all tasks for - - test@example.com - - ? -

-

- All your tasks will be permanently deleted from the local database. -

-
-
- - -
-
-
+ + + + + + + Menu Icon + + `;