syndarix/frontend/tests/components/dashboard/WelcomeHeader.test.tsx

/**
 * WelcomeHeader Component Tests
 */

import { render, screen } from '@testing-library/react';
import { WelcomeHeader } from '@/components/dashboard/WelcomeHeader';
import { useAuth } from '@/lib/auth/AuthContext';

// Mock useAuth hook
jest.mock('@/lib/auth/AuthContext', () => ({
  useAuth: jest.fn(),
}));

// Mock next-intl navigation
jest.mock('@/lib/i18n/routing', () => ({
  Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
    <a href={href}>{children}</a>
  ),
}));

const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;

describe('WelcomeHeader', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('displays greeting with user first name', () => {
    mockUseAuth.mockReturnValue({
      user: {
        id: '1',
        email: 'john@example.com',
        first_name: 'John',
        is_active: true,
        is_superuser: false,
        created_at: '',
      },
      isAuthenticated: true,
      isLoading: false,
      error: null,
      login: jest.fn(),
      logout: jest.fn(),
      clearError: jest.fn(),
      checkAuth: jest.fn(),
    });

    render(<WelcomeHeader />);

    expect(screen.getByText(/John/)).toBeInTheDocument();
  });

  it('falls back to email prefix when first_name is empty', () => {
    mockUseAuth.mockReturnValue({
      user: {
        id: '1',
        email: 'jane@example.com',
        first_name: '',
        is_active: true,
        is_superuser: false,
        created_at: '',
      },
      isAuthenticated: true,
      isLoading: false,
      error: null,
      login: jest.fn(),
      logout: jest.fn(),
      clearError: jest.fn(),
      checkAuth: jest.fn(),
    });

    render(<WelcomeHeader />);

    expect(screen.getByText(/jane/)).toBeInTheDocument();
  });

  it('displays default greeting when no user', () => {
    mockUseAuth.mockReturnValue({
      user: null,
      isAuthenticated: false,
      isLoading: false,
      error: null,
      login: jest.fn(),
      logout: jest.fn(),
      clearError: jest.fn(),
      checkAuth: jest.fn(),
    });

    render(<WelcomeHeader />);

    expect(screen.getByText(/there/)).toBeInTheDocument();
  });

  it('displays subtitle text', () => {
    mockUseAuth.mockReturnValue({
      user: {
        id: '1',
        email: 'test@example.com',
        first_name: 'Test',
        is_active: true,
        is_superuser: false,
        created_at: '',
      },
      isAuthenticated: true,
      isLoading: false,
      error: null,
      login: jest.fn(),
      logout: jest.fn(),
      clearError: jest.fn(),
      checkAuth: jest.fn(),
    });

    render(<WelcomeHeader />);

    expect(screen.getByText(/Here's what's happening/)).toBeInTheDocument();
  });

  it('displays Create Project button', () => {
    mockUseAuth.mockReturnValue({
      user: {
        id: '1',
        email: 'test@example.com',
        first_name: 'Test',
        is_active: true,
        is_superuser: false,
        created_at: '',
      },
      isAuthenticated: true,
      isLoading: false,
      error: null,
      login: jest.fn(),
      logout: jest.fn(),
      clearError: jest.fn(),
      checkAuth: jest.fn(),
    });

    render(<WelcomeHeader />);

    const createButton = screen.getByRole('link', { name: /Create Project/i });
    expect(createButton).toBeInTheDocument();
    expect(createButton).toHaveAttribute('href', '/projects/new');
  });

  it('applies custom className', () => {
    mockUseAuth.mockReturnValue({
      user: null,
      isAuthenticated: false,
      isLoading: false,
      error: null,
      login: jest.fn(),
      logout: jest.fn(),
      clearError: jest.fn(),
      checkAuth: jest.fn(),
    });

    const { container } = render(<WelcomeHeader className="custom-class" />);

    expect(container.firstChild).toHaveClass('custom-class');
  });
});