From 2788b3510859df9dcb6602644d0810bbadbb5bb2 Mon Sep 17 00:00:00 2001
From: Ho Ngoc Hai <hongochai10@icloud.com>
Date: Thu, 23 Apr 2026 20:36:38 +0700
Subject: [PATCH] test(web): add Vitest tests for search, auth, public, and
 admin layouts

- SearchLayout: verifies children pass-through (3 tests)
- AuthLayout: verifies role=main, #main-content, max-w-md centering (5 tests)
- PublicLayout: verifies navbar, ticker strip, footer, compare bar, #main-content (8 tests)
- AdminLayout: verifies sidebar nav, auth guard, loading state, logout, mobile toggle (10 tests)

All 156 web test files pass (1157 total web tests). Pre-existing API test
failures in unrelated modules (auth OTP handler, projects, search indexer,
admin settings encryption) are outside scope of this task.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 .../(admin)/__tests__/layout.spec.tsx         | 196 ++++++++++++++++++
 .../[locale]/(auth)/__tests__/layout.spec.tsx |  61 ++++++
 .../(public)/__tests__/layout.spec.tsx        | 170 +++++++++++++++
 .../(public)/search/__tests__/layout.spec.tsx |  42 ++++
 4 files changed, 469 insertions(+)
 create mode 100644 apps/web/app/[locale]/(admin)/__tests__/layout.spec.tsx
 create mode 100644 apps/web/app/[locale]/(auth)/__tests__/layout.spec.tsx
 create mode 100644 apps/web/app/[locale]/(public)/__tests__/layout.spec.tsx
 create mode 100644 apps/web/app/[locale]/(public)/search/__tests__/layout.spec.tsx

diff --git a/apps/web/app/[locale]/(admin)/__tests__/layout.spec.tsx b/apps/web/app/[locale]/(admin)/__tests__/layout.spec.tsx
new file mode 100644
index 0000000..878d4d4
--- /dev/null
+++ b/apps/web/app/[locale]/(admin)/__tests__/layout.spec.tsx
@@ -0,0 +1,196 @@
+/* eslint-disable import-x/order */
+/**
+ * Kiểm thử AdminLayout: sidebar, nav links, auth guard, mobile header.
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Mock next-intl
+const viMessages = await import('@/messages/vi.json');
+vi.mock('next-intl', () => ({
+  useTranslations: (namespace?: string) => {
+    const messages = viMessages.default ?? viMessages;
+    const ns = namespace
+      ? (messages[namespace as keyof typeof messages] as Record<string, unknown> | undefined)
+      : (messages as unknown as Record<string, unknown>);
+    return (key: string) => {
+      if (!ns) return key;
+      const parts = key.split('.');
+      let val: unknown = ns;
+      for (const p of parts) {
+        val = (val as Record<string, unknown>)?.[p];
+      }
+      return typeof val === 'string' ? val : key;
+    };
+  },
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+  usePathname: () => '/admin',
+}));
+
+vi.mock('@/i18n/navigation', () => ({
+  Link: ({ children, href, ...props }: { children: React.ReactNode; href: string; [key: string]: unknown }) => (
+    <a href={href as string} {...props}>{children}</a>
+  ),
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+}));
+
+vi.mock('@/components/ui/language-switcher', () => ({
+  LanguageSwitcher: () => <div data-testid="lang-switcher" />,
+}));
+
+const mockLogout = vi.fn();
+const mockAuthStore = vi.fn(() => ({
+  user: { id: '1', fullName: 'Admin User', role: 'ADMIN', email: 'admin@goodgo.vn' },
+  isAuthenticated: true,
+  isInitialized: true,
+  logout: mockLogout,
+}));
+
+vi.mock('@/lib/auth-store', () => ({
+  useAuthStore: (...args: unknown[]) => mockAuthStore(...args),
+}));
+
+vi.mock('@/lib/utils', () => ({
+  cn: (...classes: (string | undefined | false | null)[]) => classes.filter(Boolean).join(' '),
+}));
+
+import AdminLayout from '../layout';
+
+describe('AdminLayout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockAuthStore.mockReturnValue({
+      user: { id: '1', fullName: 'Admin User', role: 'ADMIN', email: 'admin@goodgo.vn' },
+      isAuthenticated: true,
+      isInitialized: true,
+      logout: mockLogout,
+    });
+  });
+
+  it('renders children in main content area', () => {
+    render(
+      <AdminLayout>
+        <div data-testid="admin-page">Trang admin</div>
+      </AdminLayout>,
+    );
+    expect(screen.getByTestId('admin-page')).toBeInTheDocument();
+  });
+
+  it('renders sidebar navigation', () => {
+    render(
+      <AdminLayout>
+        <div>Content</div>
+      </AdminLayout>,
+    );
+    // There are two nav elements with the same label (sidebar + inner nav)
+    const navEls = screen.getAllByRole('navigation');
+    expect(navEls.length).toBeGreaterThan(0);
+  });
+
+  it('renders admin nav link to /admin/users', () => {
+    render(
+      <AdminLayout>
+        <div>Content</div>
+      </AdminLayout>,
+    );
+    expect(screen.getByRole('link', { name: /users|người dùng/i })).toBeInTheDocument();
+  });
+
+  it('renders main content with role="main"', () => {
+    render(
+      <AdminLayout>
+        <div>Content</div>
+      </AdminLayout>,
+    );
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+
+  it('renders main content with id="main-content"', () => {
+    const { container } = render(
+      <AdminLayout>
+        <div>Content</div>
+      </AdminLayout>,
+    );
+    expect(container.querySelector('#main-content')).toBeInTheDocument();
+  });
+
+  it('shows admin username in sidebar', () => {
+    render(
+      <AdminLayout>
+        <div>Content</div>
+      </AdminLayout>,
+    );
+    expect(screen.getByText('Admin User')).toBeInTheDocument();
+  });
+
+  it('shows loading state when not initialized', () => {
+    mockAuthStore.mockReturnValue({
+      user: null,
+      isAuthenticated: false,
+      isInitialized: false,
+      logout: mockLogout,
+    });
+    render(
+      <AdminLayout>
+        <div data-testid="hidden">Hidden</div>
+      </AdminLayout>,
+    );
+    expect(screen.getByRole('status')).toBeInTheDocument();
+    expect(screen.queryByTestId('hidden')).not.toBeInTheDocument();
+  });
+
+  it('renders nothing when user is not ADMIN', () => {
+    mockAuthStore.mockReturnValue({
+      user: { id: '2', fullName: 'Regular User', role: 'USER', email: 'user@goodgo.vn' },
+      isAuthenticated: true,
+      isInitialized: true,
+      logout: mockLogout,
+    });
+    const { container } = render(
+      <AdminLayout>
+        <div data-testid="hidden">Hidden</div>
+      </AdminLayout>,
+    );
+    expect(screen.queryByTestId('hidden')).not.toBeInTheDocument();
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('calls logout when logout button is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <AdminLayout>
+        <div>Content</div>
+      </AdminLayout>,
+    );
+    const logoutBtn = screen.getByRole('button', { name: /logout|đăng xuất/i });
+    await user.click(logoutBtn);
+    expect(mockLogout).toHaveBeenCalled();
+  });
+
+  it('opens mobile sidebar when menu button is clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <AdminLayout>
+        <div>Content</div>
+      </AdminLayout>,
+    );
+    // Mobile sidebar starts translated off-screen (has -translate-x-full class)
+    const aside = container.querySelector('aside');
+    expect(aside).toBeInTheDocument();
+    // Before open: contains -translate-x-full
+    expect(aside?.className).toContain('-translate-x-full');
+
+    // Click open menu button
+    const openBtn = screen.getByRole('button', { name: /openMenu|mở menu/i });
+    await user.click(openBtn);
+
+    // After open: translate-x-0 replaces -translate-x-full
+    expect(aside?.className).toContain('translate-x-0');
+    expect(aside?.className).not.toContain('-translate-x-full');
+  });
+});
diff --git a/apps/web/app/[locale]/(auth)/__tests__/layout.spec.tsx b/apps/web/app/[locale]/(auth)/__tests__/layout.spec.tsx
new file mode 100644
index 0000000..3f3b905
--- /dev/null
+++ b/apps/web/app/[locale]/(auth)/__tests__/layout.spec.tsx
@@ -0,0 +1,61 @@
+/* eslint-disable import-x/order */
+/**
+ * Kiểm thử AuthLayout: wrapper căn giữa cho trang đăng nhập / đăng ký.
+ */
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import AuthLayout from '../layout';
+
+describe('AuthLayout', () => {
+  it('renders children', () => {
+    render(
+      <AuthLayout>
+        <div data-testid="form">Form đăng nhập</div>
+      </AuthLayout>,
+    );
+    expect(screen.getByTestId('form')).toBeInTheDocument();
+    expect(screen.getByText('Form đăng nhập')).toBeInTheDocument();
+  });
+
+  it('has role="main" on the outer element', () => {
+    render(
+      <AuthLayout>
+        <div>Nội dung</div>
+      </AuthLayout>,
+    );
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+
+  it('has id="main-content" for skip-nav accessibility', () => {
+    const { container } = render(
+      <AuthLayout>
+        <div>Nội dung</div>
+      </AuthLayout>,
+    );
+    expect(container.querySelector('#main-content')).toBeInTheDocument();
+  });
+
+  it('centres the form inside a max-width container', () => {
+    const { container } = render(
+      <AuthLayout>
+        <div>Form</div>
+      </AuthLayout>,
+    );
+    // Inner div has w-full max-w-md
+    const inner = container.querySelector('.max-w-md');
+    expect(inner).toBeInTheDocument();
+  });
+
+  it('renders multiple children', () => {
+    render(
+      <AuthLayout>
+        <h1 data-testid="heading">Tiêu đề</h1>
+        <p data-testid="body">Nội dung</p>
+      </AuthLayout>,
+    );
+    expect(screen.getByTestId('heading')).toBeInTheDocument();
+    expect(screen.getByTestId('body')).toBeInTheDocument();
+  });
+});
diff --git a/apps/web/app/[locale]/(public)/__tests__/layout.spec.tsx b/apps/web/app/[locale]/(public)/__tests__/layout.spec.tsx
new file mode 100644
index 0000000..f79a6a7
--- /dev/null
+++ b/apps/web/app/[locale]/(public)/__tests__/layout.spec.tsx
@@ -0,0 +1,170 @@
+/* eslint-disable import-x/order */
+/**
+ * Kiểm thử PublicLayout: navbar, ticker strip, footer, main content.
+ */
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Mock next-intl
+const viMessages = await import('@/messages/vi.json');
+vi.mock('next-intl', () => ({
+  useTranslations: (namespace?: string) => {
+    const messages = viMessages.default ?? viMessages;
+    const ns = namespace
+      ? (messages[namespace as keyof typeof messages] as Record<string, unknown> | undefined)
+      : (messages as unknown as Record<string, unknown>);
+    return (key: string) => {
+      if (!ns) return key;
+      const parts = key.split('.');
+      let val: unknown = ns;
+      for (const p of parts) {
+        val = (val as Record<string, unknown>)?.[p];
+      }
+      return typeof val === 'string' ? val : key;
+    };
+  },
+  useLocale: () => 'vi',
+  NextIntlClientProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+  usePathname: () => '/',
+}));
+
+vi.mock('@/i18n/navigation', () => ({
+  Link: ({ children, href, ...props }: { children: React.ReactNode; href: string; [key: string]: unknown }) => (
+    <a href={href as string} {...props}>{children}</a>
+  ),
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+  usePathname: () => '/',
+}));
+
+vi.mock('@/lib/auth-store', () => ({
+  useAuthStore: () => ({
+    user: null,
+    logout: vi.fn(),
+  }),
+}));
+
+vi.mock('@/components/providers/theme-provider', () => ({
+  useTheme: () => ({ theme: 'light', toggleTheme: vi.fn() }),
+}));
+
+vi.mock('@/components/notifications/notification-bell', () => ({
+  NotificationBell: () => <button aria-label="Thông báo">🔔</button>,
+}));
+
+vi.mock('@/components/comparison/compare-floating-bar', () => ({
+  CompareFloatingBar: () => <div data-testid="compare-bar" />,
+}));
+
+vi.mock('@/components/design-system/ticker-strip', () => ({
+  TickerStrip: ({ items }: { items: unknown[] }) => (
+    <div data-testid="ticker-strip" aria-label="ticker">{items.length} items</div>
+  ),
+}));
+
+vi.mock('@/components/design-system/navbar', () => ({
+  Navbar: ({ brand, links }: { brand: string; links: { label: string }[] }) => (
+    <nav data-testid="navbar" aria-label="main-nav">
+      <span>{brand}</span>
+      {links.map((l) => <span key={l.label}>{l.label}</span>)}
+    </nav>
+  ),
+}));
+
+vi.mock('@/components/design-system/footer', () => ({
+  Footer: ({ brand, copyright }: { brand: string; copyright: string }) => (
+    <footer data-testid="footer">
+      <span>{brand}</span>
+      <span>{copyright}</span>
+    </footer>
+  ),
+}));
+
+vi.mock('@/components/ui/language-switcher', () => ({
+  LanguageSwitcher: () => <div data-testid="lang-switcher" />,
+}));
+
+import PublicLayout from '../layout';
+
+describe('PublicLayout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders main content wrapper with role="main"', () => {
+    render(
+      <PublicLayout>
+        <div data-testid="page">Trang chính</div>
+      </PublicLayout>,
+    );
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByTestId('page')).toBeInTheDocument();
+  });
+
+  it('renders children inside main', () => {
+    render(
+      <PublicLayout>
+        <h1>Tiêu đề trang</h1>
+      </PublicLayout>,
+    );
+    expect(screen.getByText('Tiêu đề trang')).toBeInTheDocument();
+  });
+
+  it('renders the navbar', () => {
+    render(
+      <PublicLayout>
+        <div>Content</div>
+      </PublicLayout>,
+    );
+    expect(screen.getByTestId('navbar')).toBeInTheDocument();
+  });
+
+  it('renders the ticker strip', () => {
+    render(
+      <PublicLayout>
+        <div>Content</div>
+      </PublicLayout>,
+    );
+    expect(screen.getByTestId('ticker-strip')).toBeInTheDocument();
+  });
+
+  it('renders the footer', () => {
+    render(
+      <PublicLayout>
+        <div>Content</div>
+      </PublicLayout>,
+    );
+    expect(screen.getByTestId('footer')).toBeInTheDocument();
+  });
+
+  it('renders the compare floating bar', () => {
+    render(
+      <PublicLayout>
+        <div>Content</div>
+      </PublicLayout>,
+    );
+    expect(screen.getByTestId('compare-bar')).toBeInTheDocument();
+  });
+
+  it('ticker strip has 8 district items', () => {
+    render(
+      <PublicLayout>
+        <div>Content</div>
+      </PublicLayout>,
+    );
+    expect(screen.getByText('8 items')).toBeInTheDocument();
+  });
+
+  it('main content has id="main-content" for skip-nav', () => {
+    const { container } = render(
+      <PublicLayout>
+        <div>Content</div>
+      </PublicLayout>,
+    );
+    expect(container.querySelector('#main-content')).toBeInTheDocument();
+  });
+});
diff --git a/apps/web/app/[locale]/(public)/search/__tests__/layout.spec.tsx b/apps/web/app/[locale]/(public)/search/__tests__/layout.spec.tsx
new file mode 100644
index 0000000..f8346f4
--- /dev/null
+++ b/apps/web/app/[locale]/(public)/search/__tests__/layout.spec.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable import-x/order */
+/**
+ * Kiểm thử SearchLayout: layout đơn giản chỉ render children.
+ */
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import SearchLayout from '../layout';
+
+describe('SearchLayout', () => {
+  it('renders children', () => {
+    render(
+      <SearchLayout>
+        <div data-testid="child">Nội dung tìm kiếm</div>
+      </SearchLayout>,
+    );
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+    expect(screen.getByText('Nội dung tìm kiếm')).toBeInTheDocument();
+  });
+
+  it('renders multiple children', () => {
+    render(
+      <SearchLayout>
+        <p data-testid="a">A</p>
+        <p data-testid="b">B</p>
+      </SearchLayout>,
+    );
+    expect(screen.getByTestId('a')).toBeInTheDocument();
+    expect(screen.getByTestId('b')).toBeInTheDocument();
+  });
+
+  it('does not add extra wrapper markup', () => {
+    const { container } = render(
+      <SearchLayout>
+        <span id="only-child">Span</span>
+      </SearchLayout>,
+    );
+    // The layout returns children directly, so the span should be the root child
+    expect(container.querySelector('#only-child')).toBeInTheDocument();
+  });
+});