diff --git a/libs/ui/src/organisms/navbar/navbar.spec.tsx b/libs/ui/src/organisms/navbar/navbar.spec.tsx index 8cb4462..570f901 100644 --- a/libs/ui/src/organisms/navbar/navbar.spec.tsx +++ b/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( + + + + + + ); + +describe('Navbar Component', () => { beforeEach(() => { document.body.innerHTML = ''; }); @@ -46,95 +56,57 @@ describe('Navbar', () => { vi.restoreAllMocks(); }); - it('renders the logo', () => { - render( - - - - ); + it('Test renders the logo', () => { + renderWithProvider(); const logo: HTMLElement = screen.getByAltText(/IMPHNEN Logo/i); expect(logo).toBeInTheDocument(); }); - it('renders the Home link', () => { - render( - - - - ); + 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( - - - - ); + 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( - - - - ); - + 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( - - - - ); - + 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( - - - - ); - + 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( - - - - ); - + 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( - - - - ); - + it('Test has correct ARIA role for nav', () => { + const { container }: RenderResult = renderWithProvider(); const header: HTMLElement | null = container.querySelector('header'); expect(header).toHaveAttribute('role', 'nav'); }); diff --git a/package.json b/package.json index 4373092..d1c0629 100644 --- a/package.json +++ b/package.json @@ -5,11 +5,14 @@ "scripts": { "gacha:dev": "nx serve gacha", "gacha:build": "nx build gacha", + "gacha:test": "nx test gacha", "gacha:prod": "serve ./dist/apps/gacha", "backoffice:dev": "nx serve backoffice", "backoffice:build": "nx build backoffice", + "backoffice:test": "nx test backoffice", "backoffice:prod": "serve ./dist/apps/backoffice", "dimentorin:dev": "nx serve dimentorin", + "dimentorin:test": "nx test dimentorin", "dimentorin:build": "nx build dimentorin", "dimentorin:prod": "serve ./dist/apps/dimentorin", "landing:dev": "nx serve landing",