diff --git a/frontend/src/components/utils/__tests__/theme-mode-toggle.test.tsx b/frontend/src/components/utils/__tests__/theme-mode-toggle.test.tsx index bc6b636a..9eb7de76 100644 --- a/frontend/src/components/utils/__tests__/theme-mode-toggle.test.tsx +++ b/frontend/src/components/utils/__tests__/theme-mode-toggle.test.tsx @@ -1,10 +1,19 @@ -import { render, screen } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import { ModeToggle } from '../ThemeModeToggle'; import { useTheme } from '@/components/utils/ThemeProvider'; // Mocking the useTheme hook jest.mock('@/components/utils/ThemeProvider'); +jest.mock('@/components/ui/dropdown-menu', () => ({ + DropdownMenu: ({ children }: any) =>
{children}
, + DropdownMenuTrigger: ({ children }: any) =>
{children}
, + DropdownMenuContent: ({ children }: any) =>
{children}
, + DropdownMenuItem: ({ children, onClick }: any) => ( + + ), +})); + describe('ModeToggle', () => { const setThemeMock = jest.fn(); @@ -19,4 +28,38 @@ describe('ModeToggle', () => { screen.getByRole('button', { name: /toggle theme/i }) ).toBeInTheDocument(); }); + + test('calls setTheme(light) when Light is clicked', () => { + render(); + + fireEvent.click(screen.getByRole('button', { name: /toggle theme/i })); + + fireEvent.click(screen.getByText('Light')); + expect(setThemeMock).toHaveBeenCalledWith('light'); + }); + + test('calls setTheme(dark) when Dark is clicked', () => { + render(); + + fireEvent.click(screen.getByRole('button', { name: /toggle theme/i })); + + fireEvent.click(screen.getByText('Dark')); + expect(setThemeMock).toHaveBeenCalledWith('dark'); + }); + + test('calls setTheme(system) when System is clicked', () => { + render(); + + fireEvent.click(screen.getByRole('button', { name: /toggle theme/i })); + + fireEvent.click(screen.getByText('System')); + expect(setThemeMock).toHaveBeenCalledWith('system'); + }); + + test('render sun and moon icons', () => { + render(); + + expect(screen.getByTestId('sun-icon')).toBeInTheDocument(); + expect(screen.getByTestId('moon-icon')).toBeInTheDocument(); + }); });