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();
+ });
});