test: item bottom navigation

components/molecules/Navbar/ItemBottom.js

@@ -16,19 +16,17 @@ const ItemBottom = ({ title, icon, link, activePath }) => {
       {link ? (
         <button onClick={() => navigate(link)} legacyBehavior>
           <span
-            className={`flex flex-col gap-2 items-center justify-center text-gray-500 hover:text-sky ${
-              activePath ? 'text-sky font-bold' : ''
-            } transition-all duration-300 cursor-pointer`}
+            className={`flex flex-col gap-2 items-center justify-center text-gray-500 hover:text-sky ${activePath ? 'text-sky font-bold' : ''
+              } transition-all duration-300 cursor-pointer`}
           >
             <span>{icon({ size: 20 })}</span>
             <h6 className="text-xs">{title}</h6>
           </span>
         </button>
       ) : (
         <span
-          className={`flex flex-col gap-2 items-center justify-center text-gray-500 hover:text-sky ${
-            activePath ? 'text-sky font-bold' : ''
-          } transition-all duration-300 cursor-pointer`}
+          className={`flex flex-col gap-2 items-center justify-center text-gray-500 hover:text-sky ${activePath ? 'text-sky font-bold' : ''
+            } transition-all duration-300 cursor-pointer`}
         >
           <span>{icon({ size: 20 })}</span>
           <h6 className="text-xs">{title}</h6>

components/molecules/Navbar/ItemBottom.test.js

@@ -1,24 +1,28 @@
-import { render } from '@testing-library/react';
+import "@testing-library/jest-dom";
+import { render, screen } from '@testing-library/react';
 import ItemBottom from './ItemBottom';
 import { DrawContext } from '@/pages/_app';
 import { SessionProvider } from 'next-auth/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { SlHome } from 'react-icons/sl';
+import NextRouter from 'next/router'
 
 
-jest.mock('next/router', () => ({
-  useRouter: jest.fn().mockReturnValue({
-    query: {
-      'payment-intent': 'pi_1J4JrjGswQjYFZwX0Z1Z1Z1Z',
-    },
-  }),
-}));
-
 describe('ItemBottom', () => {
-  it('should render the component', () => {
-    const { container } = render(
+  let container;
+  let routerSpy;
+  const pushMock = jest.fn();
+  const setDrawMock = jest.fn();
+
+  beforeEach(() => {
+
+    routerSpy = jest.spyOn(NextRouter, 'useRouter').mockReturnValue({
+      push: pushMock,
+    });
+
+    const res = render(
       <SessionProvider session={{ user: { data: { userId: 'testUser123' } } }}>
-        <DrawContext.Provider value={{ draw: false, setDraw: jest.fn() }}>
+        <DrawContext.Provider value={{ draw: false, setDraw: setDrawMock }}>
           <QueryClientProvider client={new QueryClient()}>
             <ItemBottom
               title='Accueil'
@@ -31,6 +35,28 @@ describe('ItemBottom', () => {
         </DrawContext.Provider>
       </SessionProvider>,
     );
+
+    container = res.container;
+  });
+
+  it('should render the component', () => {
     expect(container).toMatchSnapshot();
   });
+
+  it('should navigate to the link', () => {
+
+
+    const h6 = screen.getByText('Accueil');
+
+    expect(h6).toBeInTheDocument();
+    h6.click();
+
+    expect(pushMock).toHaveBeenCalledTimes(1);
+    expect(pushMock).toHaveBeenCalledWith('/');
+
+    expect(setDrawMock).toHaveBeenCalledTimes(1);
+    expect(setDrawMock).toHaveBeenCalledWith(false);
+  });
+
+
 });