fix: unit test

libs/ui/src/organisms/navbar/navbar.spec.tsx

@@ -7,6 +7,7 @@ import {
 } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import { Navbar } from './navbar';
+import { ModalLoginProvider } from '@imphnen-frontend-service/utils';
 
 interface MatchMediaResult {
   matches: boolean;
@@ -37,7 +38,16 @@ function mockMatchMedia(width: { matches: boolean }): void {
   });
 }
 
-describe('Navbar', () => {
+const renderWithProvider = () =>
+  render(
+    <BrowserRouter>
+      <ModalLoginProvider>
+        <Navbar />
+      </ModalLoginProvider>
+    </BrowserRouter>
+  );
+
+describe('Navbar Component', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
   });
@@ -46,95 +56,57 @@ describe('Navbar', () => {
     vi.restoreAllMocks();
   });
 
-  it('renders the logo', () => {
-    render(
-      <BrowserRouter>
-        <Navbar />
-      </BrowserRouter>
-    );
+  it('Test renders the logo', () => {
+    renderWithProvider();
     const logo: HTMLElement = screen.getByAltText(/IMPHNEN Logo/i);
     expect(logo).toBeInTheDocument();
   });
 
-  it('renders the Home link', () => {
-    render(
-      <BrowserRouter>
-        <Navbar />
-      </BrowserRouter>
-    );
+  it('Test renders the Home link', () => {
+    renderWithProvider();
     const homeLink: HTMLElement = screen.getByRole('link', { name: /home/i });
     expect(homeLink).toBeInTheDocument();
   });
 
-  it('renders the Merch Gacha link', () => {
-    render(
-      <BrowserRouter>
-        <Navbar />
-      </BrowserRouter>
-    );
+  it('Test renders the Merch Gacha link', () => {
+    renderWithProvider();
     const merchLink: HTMLElement = screen.getByRole('link', {
       name: /merch gacha/i,
     });
     expect(merchLink).toBeInTheDocument();
   });
 
-  it('displays horizontal menu on desktop screens', () => {
+  it('Test displays horizontal menu on desktop screens', () => {
     mockMatchMedia({ matches: true });
-
     global.innerWidth = 1024;
     global.dispatchEvent(new Event('resize'));
-
-    render(
-      <BrowserRouter>
-        <Navbar />
-      </BrowserRouter>
-    );
-
+    renderWithProvider();
     const navItems: HTMLElement = screen.getByRole('list');
     expect(navItems).toHaveClass('md:flex');
-
     const hamburgerButton: HTMLElement = screen.getByRole('button');
     expect(hamburgerButton).toHaveClass('md:hidden');
   });
 
-  it('displays hamburger menu on mobile screens and can toggle dropdown', () => {
+  it('Test displays hamburger menu on mobile screens and can toggle dropdown', () => {
     mockMatchMedia({ matches: false });
-
     global.innerWidth = 375;
     global.dispatchEvent(new Event('resize'));
-
-    render(
-      <BrowserRouter>
-        <Navbar />
-      </BrowserRouter>
-    );
-
+    renderWithProvider();
     const hamburgerButton: HTMLElement = screen.getByRole('button');
     expect(hamburgerButton).toBeVisible();
-
     fireEvent.click(hamburgerButton);
-
     const dropdownMenu: HTMLElement[] = screen.getAllByRole('list');
     expect(dropdownMenu[1]).toBeVisible();
-
     fireEvent.click(hamburgerButton);
-
     const updatedDropdownMenus: HTMLElement[] = screen.getAllByRole('list');
     expect(updatedDropdownMenus.length).toBe(1);
   });
 
-  it('has correct height on tablet screens', () => {
+  it('Test has correct height on tablet screens', () => {
     mockMatchMedia({ matches: true });
-
     global.innerWidth = 768;
     global.dispatchEvent(new Event('resize'));
-
-    const { container }: RenderResult = render(
-      <BrowserRouter>
-        <Navbar />
-      </BrowserRouter>
-    );
-
+    const { container }: RenderResult = renderWithProvider();
     const header: HTMLElement | null = container.querySelector('header');
     expect(header).not.toBeNull();
     if (header) {
@@ -143,18 +115,11 @@ describe('Navbar', () => {
     }
   });
 
-  it('has max width constraint on large screens', () => {
+  it('Test has max width constraint on large screens', () => {
     mockMatchMedia({ matches: true });
-
     global.innerWidth = 3840;
     global.dispatchEvent(new Event('resize'));
-
-    const { container }: RenderResult = render(
-      <BrowserRouter>
-        <Navbar />
-      </BrowserRouter>
-    );
-
+    const { container }: RenderResult = renderWithProvider();
     const header: HTMLElement | null = container.querySelector('header');
     expect(header).not.toBeNull();
     if (header) {
@@ -163,13 +128,8 @@ describe('Navbar', () => {
     }
   });
 
-  it('has correct ARIA role for nav', () => {
-    const { container }: RenderResult = render(
-      <BrowserRouter>
-        <Navbar />
-      </BrowserRouter>
-    );
-
+  it('Test has correct ARIA role for nav', () => {
+    const { container }: RenderResult = renderWithProvider();
     const header: HTMLElement | null = container.querySelector('header');
     expect(header).toHaveAttribute('role', 'nav');
   });