goodgo-platform/apps/web/components/design-system/__tests__/compact-header.spec.tsx

import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { CompactHeader } from '../compact-header';

describe('CompactHeader', () => {
  it('renders a header element', () => {
    render(<CompactHeader />);
    expect(screen.getByRole('banner')).toBeInTheDocument();
  });

  it('renders logo when provided', () => {
    render(<CompactHeader logo={<span data-testid="logo" />} />);
    expect(screen.getByTestId('logo')).toBeInTheDocument();
  });

  it('renders breadcrumb when provided', () => {
    render(<CompactHeader breadcrumb={<span>Trang chủ</span>} />);
    expect(screen.getByText('Trang chủ')).toBeInTheDocument();
  });

  it('renders search slot when provided', () => {
    render(<CompactHeader search={<input data-testid="search" />} />);
    expect(screen.getByTestId('search')).toBeInTheDocument();
  });

  it('renders actions when provided', () => {
    render(<CompactHeader actions={<button data-testid="act">Đăng nhập</button>} />);
    expect(screen.getByTestId('act')).toBeInTheDocument();
  });

  it('does not render logo slot when omitted', () => {
    const { container } = render(<CompactHeader />);
    // no extra wrapping div for logo
    const header = container.querySelector('header') as HTMLElement;
    // Slot divs: just the ml-auto actions div should be present
    expect(header.children.length).toBe(1);
  });

  it('is sticky and has border-b class', () => {
    render(<CompactHeader data-testid="ch" />);
    expect(screen.getByRole('banner')).toHaveClass('sticky', 'border-b');
  });

  it('merges custom className', () => {
    render(<CompactHeader className="custom-header" />);
    expect(screen.getByRole('banner')).toHaveClass('custom-header');
  });
});