diff --git a/frontend/src/components/HomeComponents/DevLogs/DevLogs.tsx b/frontend/src/components/HomeComponents/DevLogs/DevLogs.tsx index f05e71f1..c5a2f75c 100644 --- a/frontend/src/components/HomeComponents/DevLogs/DevLogs.tsx +++ b/frontend/src/components/HomeComponents/DevLogs/DevLogs.tsx @@ -1,11 +1,4 @@ import React, { useState, useEffect } from 'react'; -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, -} from '../../ui/dialog'; import { Button } from '../../ui/button'; import { Select, @@ -28,10 +21,9 @@ interface LogEntry { interface DevLogsProps { isOpen: boolean; - onOpenChange: (open: boolean) => void; } -export const DevLogs: React.FC = ({ isOpen, onOpenChange }) => { +export const DevLogs: React.FC = ({ isOpen }) => { const [logs, setLogs] = useState([]); const [filteredLogs, setFilteredLogs] = useState([]); const [selectedLevel, setSelectedLevel] = useState('all'); @@ -116,111 +108,98 @@ export const DevLogs: React.FC = ({ isOpen, onOpenChange }) => { }; return ( - - - - Developer Logs - - View sync operation logs with timestamps and status information. - - - -
- + <> +
+ -
- - -
+
+ +
+
-
- {isLoading ? ( -
- Loading logs... -
- ) : filteredLogs.length === 0 ? ( -
- No logs available -
- ) : ( -
- {filteredLogs.map((log, index) => ( -
-
-
-
- - {formatTimestamp(log.timestamp)} - - - [{log.level}] +
+ {isLoading ? ( +
Loading logs...
+ ) : filteredLogs.length === 0 ? ( +
+ No logs available +
+ ) : ( +
+ {filteredLogs.map((log, index) => ( +
+
+
+
+ + {formatTimestamp(log.timestamp)} + + + [{log.level}] + + {log.operation && ( + + {log.operation} - {log.operation && ( - - {log.operation} - - )} -
-
- {log.message} -
- {log.syncId && ( -
- Sync ID: {log.syncId} -
)}
- +
+ {log.message} +
+ {log.syncId && ( +
+ Sync ID: {log.syncId} +
+ )}
+
- ))} -
- )} -
- -
+ + ))} + + )} + + ); }; diff --git a/frontend/src/components/HomeComponents/DevLogs/__tests__/DevLogs.test.tsx b/frontend/src/components/HomeComponents/DevLogs/__tests__/DevLogs.test.tsx index 5487031d..d65fde28 100644 --- a/frontend/src/components/HomeComponents/DevLogs/__tests__/DevLogs.test.tsx +++ b/frontend/src/components/HomeComponents/DevLogs/__tests__/DevLogs.test.tsx @@ -1,15 +1,7 @@ import { render, waitFor, screen } from '@testing-library/react'; import { DevLogs } from '../DevLogs'; -// Mock UI components -jest.mock('../../../ui/dialog', () => ({ - Dialog: ({ children, open }: any) => (open ?
{children}
: null), - DialogContent: ({ children }: any) =>
{children}
, - DialogDescription: ({ children }: any) =>
{children}
, - DialogHeader: ({ children }: any) =>
{children}
, - DialogTitle: ({ children }: any) =>
{children}
, -})); - +// Mock UI components - DevLogs uses Button and Select components jest.mock('../../../ui/button', () => ({ Button: ({ children, ...props }: any) => ( @@ -17,9 +9,15 @@ jest.mock('../../../ui/button', () => ({ })); jest.mock('../../../ui/select', () => ({ - Select: ({ children }: any) =>
{children}
, + Select: ({ children, value }: any) => ( +
+ {children} +
+ ), SelectContent: ({ children }: any) =>
{children}
, - SelectItem: ({ children }: any) =>
{children}
, + SelectItem: ({ children, value }: any) => ( +
{children}
+ ), SelectTrigger: ({ children }: any) =>
{children}
, SelectValue: ({ placeholder }: any) =>
{placeholder}
, })); @@ -82,41 +80,43 @@ global.fetch = jest.fn(() => }) ) as jest.Mock; -describe('DevLogs Component using Snapshot', () => { - const mockOnOpenChange = jest.fn(); - +describe('DevLogs Content Component', () => { beforeEach(() => { jest.clearAllMocks(); }); - it('renders closed dialog correctly', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot('devlogs-closed'); + it('renders initial state without fetching logs when isOpen is false', () => { + const { asFragment } = render(); + + // Should render the UI but not fetch logs + expect(screen.getByText('No logs available')).toBeInTheDocument(); + expect(fetch).not.toHaveBeenCalled(); + expect(asFragment()).toMatchSnapshot('devlogs-initial-state'); }); - it('renders open dialog with logs correctly', async () => { - const { asFragment } = render( - - ); + it('renders with logs when isOpen is true', async () => { + const { asFragment } = render(); await waitFor(() => { expect(screen.queryByText('Loading logs...')).not.toBeInTheDocument(); }); + // Verify logs are displayed + expect(screen.getByText('Sync operation started')).toBeInTheDocument(); + expect(screen.getByText('Warning message')).toBeInTheDocument(); + expect(screen.getByText('Error occurred')).toBeInTheDocument(); + expect(asFragment()).toMatchSnapshot('devlogs-with-logs'); }); - it('renders loading state correctly', () => { + it('renders loading state when fetching logs', () => { (fetch as jest.Mock).mockImplementationOnce( () => new Promise(() => {}) // Never resolves to keep loading state ); - const { asFragment } = render( - - ); + const { asFragment } = render(); + expect(screen.getByText('Loading logs...')).toBeInTheDocument(); expect(asFragment()).toMatchSnapshot('devlogs-loading'); }); @@ -128,9 +128,7 @@ describe('DevLogs Component using Snapshot', () => { }) ); - const { asFragment } = render( - - ); + const { asFragment } = render(); await waitFor(() => { expect(screen.getByText('No logs available')).toBeInTheDocument(); diff --git a/frontend/src/components/HomeComponents/DevLogs/__tests__/__snapshots__/DevLogs.test.tsx.snap b/frontend/src/components/HomeComponents/DevLogs/__tests__/__snapshots__/DevLogs.test.tsx.snap index 6d1656d8..1da379a7 100644 --- a/frontend/src/components/HomeComponents/DevLogs/__tests__/__snapshots__/DevLogs.test.tsx.snap +++ b/frontend/src/components/HomeComponents/DevLogs/__tests__/__snapshots__/DevLogs.test.tsx.snap @@ -1,329 +1,389 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`DevLogs Component using Snapshot renders closed dialog correctly: devlogs-closed 1`] = ``; - -exports[`DevLogs Component using Snapshot renders empty logs state correctly: devlogs-empty 1`] = ` +exports[`DevLogs Content Component renders empty logs state correctly: devlogs-empty 1`] = ` -
-
+
+
- Developer Logs -
-
- View sync operation logs with timestamps and status information. + Filter by level
-
-
-
-
- Filter by level -
-
-
-
- All Levels -
-
- INFO -
-
- WARN -
-
- ERROR -
-
+
+
+ All Levels
- - + INFO +
+
+ WARN
-
-
- No logs available + ERROR
+
+ + +
+
+
+
+ No logs available +
`; -exports[`DevLogs Component using Snapshot renders loading state correctly: devlogs-loading 1`] = ` +exports[`DevLogs Content Component renders initial state without fetching logs when isOpen is false: devlogs-initial-state 1`] = ` -
-
+
+
- Developer Logs + Filter by level
-
- View sync operation logs with timestamps and status information. +
+
+
+ All Levels +
+
+ INFO +
+
+ WARN +
+
+ ERROR
-
+
+ + +
+
+
+
+ No logs available +
+
+ +`; + +exports[`DevLogs Content Component renders loading state when fetching logs: devlogs-loading 1`] = ` + +
+
+
-
-
- Filter by level -
-
-
-
- All Levels -
-
- INFO -
-
- WARN -
-
- ERROR -
-
+ Filter by level
+
+
- - + All Levels +
+
+ INFO
-
-
- Loading logs... + WARN +
+
+ ERROR
+
+ + +
+
+
+
+ Loading logs... +
`; -exports[`DevLogs Component using Snapshot renders open dialog with logs correctly: devlogs-with-logs 1`] = ` +exports[`DevLogs Content Component renders with logs when isOpen is true: devlogs-with-logs 1`] = ` -
-
+
+
- Developer Logs + Filter by level
-
- View sync operation logs with timestamps and status information. +
+
+
+ All Levels +
+
+ INFO +
+
+ WARN +
+
+ ERROR
+
+
+ + +
+
+
+
-
-
-
- Filter by level -
-
-
-
- All Levels -
-
- INFO +
+
+
+ + Mon, 01 Jan 2024 12:00:00 GMT + + + [INFO] + + + SYNC_START +
-
- WARN +
+ Sync operation started
-
- ERROR +
+ Sync ID: sync-123
-
-
-
-
-
- - Mon, 01 Jan 2024 12:00:00 GMT - - - [INFO] - - - SYNC_START - -
-
- Sync operation started -
-
- Sync ID: sync-123 -
-
- + [WARN] +
-
-
-
-
- - Mon, 01 Jan 2024 12:01:00 GMT - - - [WARN] - -
-
- Warning message -
-
- + Warning message
+ +
+
+
+
-
+ Mon, 01 Jan 2024 12:02:00 GMT + + -
- - Mon, 01 Jan 2024 12:02:00 GMT - - - [ERROR] - - - SYNC_ERROR - -
-
- Error occurred -
-
- + SYNC_ERROR + +
+
+ Error occurred
+
diff --git a/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx b/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx index 2c250a71..9f25d774 100644 --- a/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx +++ b/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx @@ -31,6 +31,7 @@ import { DialogContent, DialogDescription, DialogHeader, + DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; @@ -78,7 +79,7 @@ export const NavbarDesktop = ( }; return ( - + <>
+ + + e.preventDefault()}> + + Developer Logs + + + + + Developer Logs + + View sync operation logs with timestamps and status + information. + + + + + window.open(url.githubRepoURL, '_blank')} > GitHub - - e.preventDefault()}> - - Export tasks - - + + + e.preventDefault()}> + + Export tasks + + + + + + Would you like to download your tasks as a JSON file or a + TXT file? + + +
+ + +
+ + e.preventDefault()}>
@@ -161,61 +241,6 @@ export const NavbarDesktop = (
- - - - Would you like to download your tasks as a JSON file or a TXT file? - - -
- - -
- - - - - - - Delete All Tasks? - - -
-

- Are you sure you want to delete all tasks for{' '} - {props.email}? -

-

- This action cannot be undone. All your tasks will be permanently - deleted from the local database. -

-
-
- - -
- - - + ); }; diff --git a/frontend/src/components/HomeComponents/Navbar/NavbarMobile.tsx b/frontend/src/components/HomeComponents/Navbar/NavbarMobile.tsx index 5295fd52..8c4191e1 100644 --- a/frontend/src/components/HomeComponents/Navbar/NavbarMobile.tsx +++ b/frontend/src/components/HomeComponents/Navbar/NavbarMobile.tsx @@ -85,7 +85,6 @@ export const NavbarMobile = ( return ( - -
{ - setIsDevLogsOpen(true); - props.setIsOpen(false); - }} - className={`w-[130px] cursor-pointer border ${buttonVariants({ - variant: 'secondary', - })}`} - > - - Developer Logs -
+ + +
{ + // setIsDevLogsOpen(true); + // props.setIsOpen(false); + // }} + className={`w-[130px] cursor-pointer border ${buttonVariants({ + variant: 'secondary', + })}`} + > + + Developer Logs +
+ + + + Developer Logs + + View sync operation logs with timestamps and status + information. + + + + +
setIsDeleteConfirmOpen(true)} className={`w-[130px] cursor-pointer border ${buttonVariants({ @@ -241,7 +254,6 @@ export const NavbarMobile = ( -