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

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