test(frontend): Refactor SidebarMenu component and its tests

Simplified the SidebarMenu component by restructuring styles and text structures. Also refactored the SidebarMenu unit tests. Now, the mockUseNavigation function returns an object directly instead of using a mockImplementation call, providing clearer and more concise testing code. This ensures better readability and maintainability going forward. Refs: #1
maikbasel · Dec 21, 2023 · cd5b80f · cd5b80f
1 parent e2b6698
commit cd5b80f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 55 deletions.
diff --git a/src/components/SidebarMenu.test.tsx b/src/components/SidebarMenu.test.tsx
@@ -4,38 +4,47 @@ import SidebarMenu from './SidebarMenu';
 import Link from 'next/link';
 import { Icon } from '@iconify/react';
 import renderer from 'react-test-renderer';
+import useNavigation from "@/hooks/Navigation";
+
+jest.mock('@/hooks/Navigation');
+const mockUseNavigation = useNavigation as jest.MockedFunction<typeof useNavigation>
 
 describe('<SidebarMenu />', () => {
-  const mockUseNavigation = jest.fn();
 
-  jest.mock('@/hooks/Navigation', () => ({
-    __esModule: true,
-    useNavigation: mockUseNavigation(),
-  }));
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   it('should render the Home menu item', () => {
+    mockUseNavigation.mockReturnValue({
+      isHomeActive: false,
+      isProfilesActive: false,
+    });
+
     render(<SidebarMenu />);
 
     const homeMenuItem = screen.getByText('Home');
     expect(homeMenuItem).toBeInTheDocument();
   });
 
   it('should render the Profiles menu item', () => {
+    mockUseNavigation.mockReturnValue({
+      isHomeActive: false,
+      isProfilesActive: false,
+    });
+
     render(<SidebarMenu />);
 
     const profilesMenuItem = screen.getByText('Profiles');
     expect(profilesMenuItem).toBeInTheDocument();
   });
 
   it('should render inactive Home icon when isHomeActive is false', () => {
-    mockUseNavigation.mockImplementation(() => ({
+    mockUseNavigation.mockReturnValue({
       isHomeActive: false,
       isProfilesActive: false,
-    }));
+    });
 
     const tree = renderer
       .create(
@@ -53,10 +62,10 @@ describe('<SidebarMenu />', () => {
   });
 
   it('should render active Home icon when isHomeActive is true', () => {
-    mockUseNavigation.mockImplementation(() => ({
+    mockUseNavigation.mockReturnValue({
       isHomeActive: true,
       isProfilesActive: false,
-    }));
+    });
 
     const tree = renderer
       .create(
@@ -65,7 +74,7 @@ describe('<SidebarMenu />', () => {
           className='flex w-full flex-row items-center space-x-4 px-4 py-3 duration-200 hover:bg-white/10'
         >
           <Icon icon='ant-design:home-filled' width='38' height='38' />
-          <span className='hidden pt-2 text-2xl md:flex'>Home</span>
+          <span className='hidden pt-2 text-2xl md:flex font-bold'>Home</span>
         </Link>
       )
       .toJSON();
@@ -95,10 +104,10 @@ describe('<SidebarMenu />', () => {
   });
 
   it('should render active Profiles icon when isProfilesActive is true', () => {
-    mockUseNavigation.mockImplementation(() => ({
+    mockUseNavigation.mockReturnValue({
       isHomeActive: false,
       isProfilesActive: true,
-    }));
+    });
 
     const tree = renderer
       .create(
@@ -107,7 +116,7 @@ describe('<SidebarMenu />', () => {
           className='flex w-full flex-row items-center space-x-4 px-4 py-3 duration-200 hover:bg-white/10'
         >
           <Icon icon='ant-design:profile-filled' width='38' height='38' />
-          <span className='hidden pt-2 text-2xl md:flex'>Home</span>
+          <span className='hidden pt-2 text-2xl md:flex font-bold'>Home</span>
         </Link>
       )
       .toJSON();

diff --git a/src/components/__snapshots__/SidebarMenu.test.tsx.snap b/src/components/__snapshots__/SidebarMenu.test.tsx.snap
@@ -2,32 +2,15 @@
 
 exports[`<SidebarMenu /> should render active Home icon when isHomeActive is true 1`] = `
 <a
-  className="flex flex-row space-x-4 items-center px-4 py-3 duration-200 hover:bg-white/10 w-full"
+  className="flex w-full flex-row items-center space-x-4 px-4 py-3 duration-200 hover:bg-white/10"
   href="/"
   onClick={[Function]}
   onMouseEnter={[Function]}
   onTouchStart={[Function]}
 >
   <span />
   <span
-    className="text-2xl pt-2 hidden md:flex"
-  >
-    Home
-  </span>
-</a>
-`;
-
-exports[`<SidebarMenu /> should render active Profiles icon when isHomeActive is true 1`] = `
-<a
-  className="flex flex-row space-x-4 items-center px-4 py-3 duration-200 hover:bg-white/10 w-full"
-  href="/"
-  onClick={[Function]}
-  onMouseEnter={[Function]}
-  onTouchStart={[Function]}
->
-  <span />
-  <span
-    className="text-2xl pt-2 hidden md:flex"
+    className="hidden pt-2 text-2xl md:flex font-bold"
   >
     Home
   </span>
@@ -36,15 +19,15 @@ exports[`<SidebarMenu /> should render active Profiles icon when isHomeActive is
 
 exports[`<SidebarMenu /> should render active Profiles icon when isProfilesActive is true 1`] = `
 <a
-  className="flex flex-row space-x-4 items-center px-4 py-3 duration-200 hover:bg-white/10 w-full"
+  className="flex w-full flex-row items-center space-x-4 px-4 py-3 duration-200 hover:bg-white/10"
   href="/"
   onClick={[Function]}
   onMouseEnter={[Function]}
   onTouchStart={[Function]}
 >
   <span />
   <span
-    className="text-2xl pt-2 hidden md:flex"
+    className="hidden pt-2 text-2xl md:flex font-bold"
   >
     Home
   </span>
@@ -53,32 +36,15 @@ exports[`<SidebarMenu /> should render active Profiles icon when isProfilesActiv
 
 exports[`<SidebarMenu /> should render inactive Home icon when isHomeActive is false 1`] = `
 <a
-  className="flex flex-row space-x-4 items-center px-4 py-3 duration-200 hover:bg-white/10 w-full"
-  href="/"
-  onClick={[Function]}
-  onMouseEnter={[Function]}
-  onTouchStart={[Function]}
->
-  <span />
-  <span
-    className="text-2xl pt-2 hidden md:flex"
-  >
-    Home
-  </span>
-</a>
-`;
-
-exports[`<SidebarMenu /> should render inactive Profiles icon when isHomeActive is false 1`] = `
-<a
-  className="flex flex-row space-x-4 items-center px-4 py-3 duration-200 hover:bg-white/10 w-full"
+  className="flex w-full flex-row items-center space-x-4 px-4 py-3 duration-200 hover:bg-white/10"
   href="/"
   onClick={[Function]}
   onMouseEnter={[Function]}
   onTouchStart={[Function]}
 >
   <span />
   <span
-    className="text-2xl pt-2 hidden md:flex"
+    className="hidden pt-2 text-2xl md:flex"
   >
     Home
   </span>
@@ -87,15 +53,15 @@ exports[`<SidebarMenu /> should render inactive Profiles icon when isHomeActive
 
 exports[`<SidebarMenu /> should render inactive Profiles icon when isProfilesActive is false 1`] = `
 <a
-  className="flex flex-row space-x-4 items-center px-4 py-3 duration-200 hover:bg-white/10 w-full"
+  className="flex w-full flex-row items-center space-x-4 px-4 py-3 duration-200 hover:bg-white/10"
   href="/"
   onClick={[Function]}
   onMouseEnter={[Function]}
   onTouchStart={[Function]}
 >
   <span />
   <span
-    className="text-2xl pt-2 hidden md:flex"
+    className="hidden pt-2 text-2xl md:flex"
   >
     Home
   </span>