test(web): increase test coverage for components inside header folder (#32392)

web/app/components/header/explore-nav/index.spec.tsx

@@ -0,0 +1,45 @@
+import type { Mock } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { useSelectedLayoutSegment } from 'next/navigation'
+import ExploreNav from './index'
+
+vi.mock('next/navigation', () => ({
+  useSelectedLayoutSegment: vi.fn(),
+}))
+
+describe('ExploreNav', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render correctly when not active', () => {
+    (useSelectedLayoutSegment as Mock).mockReturnValue('other')
+    render(<ExploreNav />)
+
+    const link = screen.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', '/explore/apps')
+    expect(link).toHaveClass('text-components-main-nav-nav-button-text')
+    expect(link).not.toHaveClass('bg-components-main-nav-nav-button-bg-active')
+    expect(screen.getByText('common.menus.explore')).toBeInTheDocument()
+  })
+
+  it('should render correctly when active', () => {
+    (useSelectedLayoutSegment as Mock).mockReturnValue('explore')
+    render(<ExploreNav />)
+
+    const link = screen.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveClass('bg-components-main-nav-nav-button-bg-active')
+    expect(link).toHaveClass('text-components-main-nav-nav-button-text-active')
+    expect(screen.getByText('common.menus.explore')).toBeInTheDocument()
+  })
+
+  it('should apply custom className', () => {
+    (useSelectedLayoutSegment as Mock).mockReturnValue('other')
+    render(<ExploreNav className="custom-test-class" />)
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveClass('custom-test-class')
+  })
+})