veza/apps/web/src/features/notifications/components/notifications-page/NotificationsPage.test.tsx

/**
 * NotificationsPage tests - Plan V0.101: Tests Notifications ≥ 3
 */

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@/test/test-utils';
import userEvent from '@testing-library/user-event';
import { NotificationsPage } from './NotificationsPage';
import { NotificationsPageEmpty } from './NotificationsPageEmpty';
import { NotificationsPageItem } from './NotificationsPageItem';
import type { Notification } from '../../services/notificationService';

const mockNotification: Notification = {
  id: 'n1',
  user_id: 'u1',
  type: 'track_uploaded',
  title: 'New track',
  content: 'A new track was uploaded',
  read: false,
  created_at: new Date().toISOString(),
};

describe('NotificationsPage', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('should display empty state when no notifications', () => {
    render(<NotificationsPageEmpty filterType="all" />);

    expect(screen.getByRole('heading', { name: /no notifications/i })).toBeInTheDocument();
  });

  it('should display notification item with title and content', () => {
    const onMarkAsRead = vi.fn();
    render(
      <NotificationsPageItem
        notification={mockNotification}
        onMarkAsRead={onMarkAsRead}
      />
    );

    expect(screen.getByText('New track')).toBeInTheDocument();
    expect(screen.getByText(/a new track was uploaded/i)).toBeInTheDocument();
  });

  it('should call onMarkAsRead when mark-as-read button is clicked', async () => {
    const onMarkAsRead = vi.fn();
    const user = userEvent.setup();

    render(
      <NotificationsPageItem
        notification={mockNotification}
        onMarkAsRead={onMarkAsRead}
      />
    );

    const markAsReadBtn = screen.getByRole('button', { name: /mark as read/i });
    await user.click(markAsReadBtn);

    expect(onMarkAsRead).toHaveBeenCalledWith('n1');
  });
});