From cd5b80f789a5179807be6628f21d7771f07c5ce6 Mon Sep 17 00:00:00 2001
From: maikb <maik.basel@gmx.de>
Date: Thu, 21 Dec 2023 19:48:17 +0100
Subject: [PATCH] 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
---
 src/components/SidebarMenu.test.tsx           | 35 ++++++++-----
 .../__snapshots__/SidebarMenu.test.tsx.snap   | 50 +++----------------
 2 files changed, 30 insertions(+), 55 deletions(-)

diff --git a/src/components/SidebarMenu.test.tsx b/src/components/SidebarMenu.test.tsx
index 5f2f5eb..5ac938d 100644
--- a/src/components/SidebarMenu.test.tsx
+++ b/src/components/SidebarMenu.test.tsx
@@ -4,20 +4,24 @@ 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');
@@ -25,6 +29,11 @@ describe('<SidebarMenu />', () => {
   });
 
   it('should render the Profiles menu item', () => {
+    mockUseNavigation.mockReturnValue({
+      isHomeActive: false,
+      isProfilesActive: false,
+    });
+
     render(<SidebarMenu />);
 
     const profilesMenuItem = screen.getByText('Profiles');
@@ -32,10 +41,10 @@ describe('<SidebarMenu />', () => {
   });
 
   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
index 53fb591..ba0c83e 100644
--- a/src/components/__snapshots__/SidebarMenu.test.tsx.snap
+++ b/src/components/__snapshots__/SidebarMenu.test.tsx.snap
@@ -2,7 +2,7 @@
 
 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]}
@@ -10,24 +10,7 @@ exports[`<SidebarMenu /> should render active Home icon when isHomeActive is tru
 >
   <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,7 +19,7 @@ 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]}
@@ -44,7 +27,7 @@ exports[`<SidebarMenu /> should render active Profiles icon when isProfilesActiv
 >
   <span />
   <span
-    className="text-2xl pt-2 hidden md:flex"
+    className="hidden pt-2 text-2xl md:flex font-bold"
   >
     Home
   </span>
@@ -53,24 +36,7 @@ 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]}
@@ -78,7 +44,7 @@ exports[`<SidebarMenu /> should render inactive Profiles icon when isHomeActive
 >
   <span />
   <span
-    className="text-2xl pt-2 hidden md:flex"
+    className="hidden pt-2 text-2xl md:flex"
   >
     Home
   </span>
@@ -87,7 +53,7 @@ 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]}
@@ -95,7 +61,7 @@ exports[`<SidebarMenu /> should render inactive Profiles icon when isProfilesAct
 >
   <span />
   <span
-    className="text-2xl pt-2 hidden md:flex"
+    className="hidden pt-2 text-2xl md:flex"
   >
     Home
   </span>