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/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();
+  });
+});