test(web): add component tests for 3 more untested components (GOO-54)

- ExportPdfButton (3 tests): default label, missing-target error, custom filename
- ValuationHistoryChart (3 tests): null <2 points, header/description, recharts mounting
- NotificationBell (9 tests): aria-label, badge display + 99+ cap, auth-gated
  fetchUnreadCount, dropdown toggle, empty state, item rendering, mark-all visibility

All 15 new tests pass via direct vitest. Cumulative GOO-54 progress: 29 spec
files, ~143 tests across H1-H5.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/__tests__/i18n-key-parity.spec.ts

@@ -0,0 +1,86 @@
+/**
+ * i18n key parity tests — ensures `en.json` and `vi.json` stay in sync.
+ *
+ * Rules enforced:
+ *  1. Both files must have the same set of flattened leaf keys.
+ *  2. No key value may be an empty string in either locale.
+ *  3. Locale metadata keys must be present in both files.
+ */
+import { describe, expect, it } from 'vitest';
+import enMessages from '../messages/en.json';
+import viMessages from '../messages/vi.json';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+type MessageDict = Record<string, unknown>;
+
+function flattenKeys(obj: MessageDict, prefix = ''): string[] {
+  return Object.entries(obj).flatMap(([key, value]) => {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+      return flattenKeys(value as MessageDict, fullKey);
+    }
+    return [fullKey];
+  });
+}
+
+function flattenEntries(obj: MessageDict, prefix = ''): Array<[string, string]> {
+  return Object.entries(obj).flatMap(([key, value]) => {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+      return flattenEntries(value as MessageDict, fullKey);
+    }
+    return [[fullKey, String(value)]];
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('i18n message key parity (en ↔ vi)', () => {
+  const enKeys = new Set(flattenKeys(enMessages));
+  const viKeys = new Set(flattenKeys(viMessages));
+
+  it('vi.json has no extra keys missing from en.json', () => {
+    const extraInVi = [...viKeys].filter((k) => !enKeys.has(k));
+    expect(extraInVi, `Keys present in vi.json but not en.json: ${JSON.stringify(extraInVi)}`).toHaveLength(0);
+  });
+
+  it('en.json has no extra keys missing from vi.json', () => {
+    const extraInEn = [...enKeys].filter((k) => !viKeys.has(k));
+    expect(extraInEn, `Keys present in en.json but not vi.json: ${JSON.stringify(extraInEn)}`).toHaveLength(0);
+  });
+
+  it('en.json has no empty string values', () => {
+    const empty = flattenEntries(enMessages).filter(([, v]) => v.trim() === '');
+    expect(empty, `Empty values in en.json: ${JSON.stringify(empty.map(([k]) => k))}`).toHaveLength(0);
+  });
+
+  it('vi.json has no empty string values', () => {
+    const empty = flattenEntries(viMessages).filter(([, v]) => v.trim() === '');
+    expect(empty, `Empty values in vi.json: ${JSON.stringify(empty.map(([k]) => k))}`).toHaveLength(0);
+  });
+
+  it('both locales define the same top-level namespace keys', () => {
+    const enTopLevel = Object.keys(enMessages).sort();
+    const viTopLevel = Object.keys(viMessages).sort();
+    expect(viTopLevel).toEqual(enTopLevel);
+  });
+});
+
+describe('i18n locale config', () => {
+  it('language namespace exists in en.json with the expected locale keys', () => {
+    const lang = (enMessages as MessageDict).language as MessageDict | undefined;
+    expect(lang).toBeDefined();
+    expect(Object.keys(lang ?? {})).toContain('vi');
+    expect(Object.keys(lang ?? {})).toContain('en');
+  });
+
+  it('language namespace exists in vi.json with the expected locale keys', () => {
+    const lang = (viMessages as MessageDict).language as MessageDict | undefined;
+    expect(lang).toBeDefined();
+    expect(Object.keys(lang ?? {})).toContain('vi');
+    expect(Object.keys(lang ?? {})).toContain('en');
+  });
+});

apps/web/__tests__/middleware.spec.ts

@@ -0,0 +1,199 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { NextRequest } from 'next/server';
+
+// ---------------------------------------------------------------------------
+// Minimal next/server stubs — use vi.hoisted so refs are available at mock time
+// ---------------------------------------------------------------------------
+const { mockRedirectFn, mockNextFn, mockIntlMiddleware } = vi.hoisted(() => {
+  const mockRedirectFn = vi.fn((url: URL | string) => ({
+    type: 'redirect',
+    url: typeof url === 'string' ? url : url.toString(),
+  }));
+  const mockNextFn = vi.fn(() => ({ type: 'next' }));
+  const mockIntlMiddleware = vi.fn((_req: unknown) => ({ type: 'intl' }));
+  return { mockRedirectFn, mockNextFn, mockIntlMiddleware };
+});
+
+vi.mock('next/server', () => ({
+  NextResponse: {
+    redirect: mockRedirectFn,
+    next: mockNextFn,
+  },
+}));
+
+// ---------------------------------------------------------------------------
+// Stub intlMiddleware — captures its input and returns a sentinel
+// ---------------------------------------------------------------------------
+vi.mock('next-intl/middleware', () => ({
+  default: () => mockIntlMiddleware,
+}));
+
+// Stub routing so the module resolves
+vi.mock('@/i18n/routing', () => ({
+  routing: { locales: ['vi', 'en'], defaultLocale: 'vi', localePrefix: 'as-needed' },
+}));
+
+// ---------------------------------------------------------------------------
+// Now import the middleware (after mocks are registered)
+// ---------------------------------------------------------------------------
+import { middleware } from '../middleware';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function makeRequest(pathname: string, hasCookie = false): NextRequest {
+  const url = new URL(`http://localhost${pathname}`);
+  return {
+    nextUrl: url,
+    url: url.toString(),
+    cookies: {
+      has: (name: string) => name === 'goodgo_authenticated' && hasCookie,
+    },
+  } as unknown as NextRequest;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('middleware – authentication guard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('redirects unauthenticated user from a protected path to /login', () => {
+    middleware(makeRequest('/dashboard', false));
+    expect(mockRedirectFn).toHaveBeenCalledOnce();
+    const calledUrl: URL = mockRedirectFn.mock.calls[0][0] as URL;
+    expect(calledUrl.pathname).toBe('/login');
+    expect(calledUrl.searchParams.get('redirect')).toBe('/dashboard');
+  });
+
+  it('includes the redirect param for a nested protected path', () => {
+    middleware(makeRequest('/dashboard/profile', false));
+    const calledUrl: URL = mockRedirectFn.mock.calls[0][0] as URL;
+    expect(calledUrl.searchParams.get('redirect')).toBe('/dashboard/profile');
+  });
+
+  it('allows unauthenticated user to reach /', () => {
+    middleware(makeRequest('/', false));
+    expect(mockRedirectFn).not.toHaveBeenCalled();
+    expect(mockIntlMiddleware).toHaveBeenCalledOnce();
+  });
+
+  it('allows unauthenticated user to reach /search', () => {
+    middleware(makeRequest('/search', false));
+    expect(mockRedirectFn).not.toHaveBeenCalled();
+  });
+
+  it('allows unauthenticated user to reach /listings/123', () => {
+    middleware(makeRequest('/listings/123', false));
+    expect(mockRedirectFn).not.toHaveBeenCalled();
+  });
+
+  it('allows unauthenticated user to reach /login', () => {
+    middleware(makeRequest('/login', false));
+    expect(mockRedirectFn).not.toHaveBeenCalled();
+  });
+
+  it('allows unauthenticated user to reach /register', () => {
+    middleware(makeRequest('/register', false));
+    expect(mockRedirectFn).not.toHaveBeenCalled();
+  });
+
+  it('allows unauthenticated user to reach /auth/callback/google', () => {
+    middleware(makeRequest('/auth/callback/google', false));
+    expect(mockRedirectFn).not.toHaveBeenCalled();
+  });
+
+  it('allows authenticated user to access a protected path', () => {
+    middleware(makeRequest('/dashboard', true));
+    expect(mockRedirectFn).not.toHaveBeenCalled();
+    expect(mockIntlMiddleware).toHaveBeenCalledOnce();
+  });
+});
+
+describe('middleware – auth-only redirect (already authenticated)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('redirects authenticated user away from /login to /dashboard', () => {
+    middleware(makeRequest('/login', true));
+    expect(mockRedirectFn).toHaveBeenCalledOnce();
+    const calledUrl: URL = mockRedirectFn.mock.calls[0][0] as URL;
+    expect(calledUrl.pathname).toBe('/dashboard');
+  });
+
+  it('redirects authenticated user away from /register to /dashboard', () => {
+    middleware(makeRequest('/register', true));
+    expect(mockRedirectFn).toHaveBeenCalledOnce();
+    const calledUrl: URL = mockRedirectFn.mock.calls[0][0] as URL;
+    expect(calledUrl.pathname).toBe('/dashboard');
+  });
+});
+
+describe('middleware – locale prefix stripping', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('strips /vi locale prefix before evaluating the guard', () => {
+    middleware(makeRequest('/vi/dashboard', false));
+    expect(mockRedirectFn).toHaveBeenCalledOnce();
+    const calledUrl: URL = mockRedirectFn.mock.calls[0][0] as URL;
+    expect(calledUrl.pathname).toBe('/login');
+    expect(calledUrl.searchParams.get('redirect')).toBe('/dashboard');
+  });
+
+  it('strips /en locale prefix before evaluating the guard', () => {
+    middleware(makeRequest('/en/dashboard', false));
+    expect(mockRedirectFn).toHaveBeenCalledOnce();
+    const calledUrl: URL = mockRedirectFn.mock.calls[0][0] as URL;
+    expect(calledUrl.pathname).toBe('/login');
+  });
+
+  it('strips /vi locale and recognises /vi/login as auth-only path', () => {
+    middleware(makeRequest('/vi/login', true));
+    expect(mockRedirectFn).toHaveBeenCalledOnce();
+    const calledUrl: URL = mockRedirectFn.mock.calls[0][0] as URL;
+    expect(calledUrl.pathname).toBe('/dashboard');
+  });
+
+  it('strips /en locale and allows unauthenticated access to /en/', () => {
+    middleware(makeRequest('/en/', false));
+    expect(mockRedirectFn).not.toHaveBeenCalled();
+    expect(mockIntlMiddleware).toHaveBeenCalledOnce();
+  });
+
+  it('passes through to intlMiddleware for locale-prefixed public paths', () => {
+    middleware(makeRequest('/vi/search', false));
+    expect(mockRedirectFn).not.toHaveBeenCalled();
+    expect(mockIntlMiddleware).toHaveBeenCalledOnce();
+  });
+});
+
+describe('middleware – intl middleware delegation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('delegates to intlMiddleware for all pass-through cases', () => {
+    middleware(makeRequest('/', false));
+    expect(mockIntlMiddleware).toHaveBeenCalledOnce();
+  });
+
+  it('delegates to intlMiddleware for authenticated protected paths', () => {
+    middleware(makeRequest('/dashboard', true));
+    expect(mockIntlMiddleware).toHaveBeenCalledOnce();
+  });
+
+  it('does NOT call intlMiddleware when redirecting to login', () => {
+    middleware(makeRequest('/dashboard', false));
+    expect(mockIntlMiddleware).not.toHaveBeenCalled();
+  });
+
+  it('does NOT call intlMiddleware when redirecting authenticated user away from login', () => {
+    middleware(makeRequest('/login', true));
+    expect(mockIntlMiddleware).not.toHaveBeenCalled();
+  });
+});

apps/web/components/notifications/__tests__/notification-bell.spec.tsx

@@ -0,0 +1,138 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const pushMock = vi.fn();
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: pushMock }),
+}));
+
+const fetchUnreadCount = vi.fn();
+const setOpen = vi.fn();
+const markAsRead = vi.fn();
+const markAllAsRead = vi.fn();
+
+let storeState: any = {
+  notifications: [],
+  unreadCount: 0,
+  isOpen: false,
+  isLoading: false,
+  setOpen,
+  markAsRead,
+  markAllAsRead,
+  fetchUnreadCount,
+};
+vi.mock('@/lib/notifications-store', () => ({
+  useNotificationsStore: () => storeState,
+}));
+
+let authState = { isAuthenticated: false };
+vi.mock('@/lib/auth-store', () => ({
+  useAuthStore: (selector: (s: typeof authState) => unknown) => selector(authState),
+}));
+
+import { NotificationBell } from '../notification-bell';
+
+beforeEach(() => {
+  pushMock.mockReset();
+  fetchUnreadCount.mockReset();
+  setOpen.mockReset();
+  markAsRead.mockReset();
+  markAllAsRead.mockReset();
+  storeState = {
+    notifications: [],
+    unreadCount: 0,
+    isOpen: false,
+    isLoading: false,
+    setOpen,
+    markAsRead,
+    markAllAsRead,
+    fetchUnreadCount,
+  };
+  authState = { isAuthenticated: false };
+});
+
+describe('NotificationBell', () => {
+  it('renders bell button with default aria-label when no unread', () => {
+    render(<NotificationBell />);
+    expect(
+      screen.getByRole('button', { name: 'Thông báo' }),
+    ).toBeInTheDocument();
+  });
+
+  it('shows unread badge with count and updates aria-label', () => {
+    storeState = { ...storeState, unreadCount: 5 };
+    render(<NotificationBell />);
+    expect(
+      screen.getByRole('button', { name: /Thông báo \(5 chưa đọc\)/ }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('caps badge display at 99+ when count exceeds 99', () => {
+    storeState = { ...storeState, unreadCount: 150 };
+    render(<NotificationBell />);
+    expect(screen.getByText('99+')).toBeInTheDocument();
+  });
+
+  it('does not call fetchUnreadCount when unauthenticated', () => {
+    authState = { isAuthenticated: false };
+    render(<NotificationBell />);
+    expect(fetchUnreadCount).not.toHaveBeenCalled();
+  });
+
+  it('calls fetchUnreadCount on mount when authenticated', () => {
+    authState = { isAuthenticated: true };
+    render(<NotificationBell />);
+    expect(fetchUnreadCount).toHaveBeenCalledTimes(1);
+  });
+
+  it('toggles dropdown open via setOpen on click', async () => {
+    const user = userEvent.setup();
+    render(<NotificationBell />);
+    await user.click(screen.getByRole('button', { name: 'Thông báo' }));
+    expect(setOpen).toHaveBeenCalledWith(true);
+  });
+
+  it('renders empty state inside open dropdown', () => {
+    storeState = { ...storeState, isOpen: true };
+    render(<NotificationBell />);
+    expect(screen.getByText('Chưa có thông báo')).toBeInTheDocument();
+  });
+
+  it('renders notification items and marks unread as bold', () => {
+    storeState = {
+      ...storeState,
+      isOpen: true,
+      notifications: [
+        {
+          id: 'n1',
+          title: 'Tin mới',
+          body: 'Có người quan tâm tin của bạn',
+          isRead: false,
+          link: '/listings/1',
+          createdAt: new Date().toISOString(),
+        },
+        {
+          id: 'n2',
+          title: 'Đã đọc',
+          body: 'Cũ',
+          isRead: true,
+          link: null,
+          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 25).toISOString(),
+        },
+      ],
+    };
+    render(<NotificationBell />);
+    expect(screen.getByText('Tin mới')).toBeInTheDocument();
+    expect(screen.getByText('Đã đọc')).toBeInTheDocument();
+  });
+
+  it('shows "Đánh dấu tất cả đã đọc" only when unreadCount > 0 and dropdown open', () => {
+    storeState = { ...storeState, isOpen: true, unreadCount: 3 };
+    render(<NotificationBell />);
+    expect(
+      screen.getByText('Đánh dấu tất cả đã đọc'),
+    ).toBeInTheDocument();
+  });
+});

apps/web/components/valuation/__tests__/export-pdf-button.spec.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { ExportPdfButton } from '../export-pdf-button';
+
+describe('ExportPdfButton', () => {
+  it('renders with default label and download icon', () => {
+    render(<ExportPdfButton targetSelector="#target" />);
+    expect(screen.getByRole('button', { name: /Xuất PDF/ })).toBeInTheDocument();
+  });
+
+  it('logs error when target element not found', async () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const user = userEvent.setup();
+    render(<ExportPdfButton targetSelector="#missing-target" />);
+
+    await user.click(screen.getByRole('button', { name: /Xuất PDF/ }));
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Export target not found:',
+      '#missing-target',
+    );
+    errorSpy.mockRestore();
+  });
+
+  it('accepts custom filename prop without throwing', () => {
+    render(
+      <ExportPdfButton targetSelector="#t" filename="custom-report" />,
+    );
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});

apps/web/components/valuation/__tests__/valuation-history-chart.spec.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { ValuationHistoryChart } from '../valuation-history-chart';
+import type { ValuationHistoryPoint } from '@/lib/valuation-api';
+
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: { children: ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  AreaChart: ({ children }: { children: ReactNode }) => (
+    <div data-testid="area-chart">{children}</div>
+  ),
+  Area: () => <div data-testid="area" />,
+  XAxis: () => <div data-testid="xaxis" />,
+  YAxis: () => <div data-testid="yaxis" />,
+  CartesianGrid: () => <div data-testid="grid" />,
+  Tooltip: () => <div data-testid="tooltip" />,
+}));
+
+const points: ValuationHistoryPoint[] = [
+  {
+    date: '2025-01-01',
+    estimatedPriceVND: 4_500_000_000,
+    confidence: 0.82,
+  } as ValuationHistoryPoint,
+  {
+    date: '2025-06-01',
+    estimatedPriceVND: 4_900_000_000,
+    confidence: 0.88,
+  } as ValuationHistoryPoint,
+  {
+    date: '2026-01-01',
+    estimatedPriceVND: 5_200_000_000,
+    confidence: 0.9,
+  } as ValuationHistoryPoint,
+];
+
+describe('ValuationHistoryChart', () => {
+  it('returns null when fewer than 2 points provided', () => {
+    const { container: c1 } = render(<ValuationHistoryChart data={[]} />);
+    expect(c1.firstChild).toBeNull();
+    const { container: c2 } = render(
+      <ValuationHistoryChart data={[points[0]!]} />,
+    );
+    expect(c2.firstChild).toBeNull();
+  });
+
+  it('renders title and description when data has >=2 points', () => {
+    render(<ValuationHistoryChart data={points} />);
+    expect(screen.getByText('Lịch sử định giá')).toBeInTheDocument();
+    expect(
+      screen.getByText('Biến động giá ước tính theo thời gian'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the area chart container', () => {
+    render(<ValuationHistoryChart data={points} />);
+    expect(screen.getByTestId('area-chart')).toBeInTheDocument();
+    expect(screen.getByTestId('area')).toBeInTheDocument();
+  });
+});