gridpilot.gg/apps/website/components/admin/AdminHeaderPanel.test.tsx

/**
 * AdminHeaderPanel Component Tests
 * 
 * Tests for the AdminHeaderPanel component that provides a semantic header
 * for admin pages with title, description, actions, and loading state.
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import { AdminHeaderPanel } from './AdminHeaderPanel';
import { describe, it, expect, vi } from 'vitest';

// Mock the ProgressLine component
vi.mock('@/components/shared/ProgressLine', () => ({
  ProgressLine: ({ isLoading }: { isLoading: boolean }) => (
    <div data-testid="progress-line" data-loading={isLoading}>
      {isLoading ? 'Loading...' : 'Ready'}
    </div>
  ),
}));

// Mock the SectionHeader component
vi.mock('@/ui/SectionHeader', () => ({
  SectionHeader: ({ title, description, actions, loading }: any) => (
    <div data-testid="section-header">
      <h1>{title}</h1>
      {description && <p>{description}</p>}
      {actions && <div data-testid="actions">{actions}</div>}
      {loading}
    </div>
  ),
}));

describe('AdminHeaderPanel', () => {
  it('should render with title only', () => {
    render(
      <AdminHeaderPanel title="Admin Dashboard" />
    );

    expect(screen.getByText('Admin Dashboard')).toBeTruthy();
  });

  it('should render with title and description', () => {
    render(
      <AdminHeaderPanel
        title="User Management"
        description="Manage all user accounts and permissions"
      />
    );

    expect(screen.getByText('User Management')).toBeTruthy();
    expect(screen.getByText('Manage all user accounts and permissions')).toBeTruthy();
  });

  it('should render with title, description, and actions', () => {
    const actions = <button data-testid="action-btn">Create User</button>;

    render(
      <AdminHeaderPanel
        title="User Management"
        description="Manage all user accounts"
        actions={actions}
      />
    );

    expect(screen.getByText('User Management')).toBeTruthy();
    expect(screen.getByText('Manage all user accounts')).toBeTruthy();
    expect(screen.getByTestId('action-btn')).toBeTruthy();
    expect(screen.getByText('Create User')).toBeTruthy();
  });

  it('should render with loading state', () => {
    render(
      <AdminHeaderPanel
        title="Loading Data"
        isLoading={true}
      />
    );

    expect(screen.getByText('Loading Data')).toBeTruthy();
    expect(screen.getByTestId('progress-line')).toBeTruthy();
  });

  it('should render without loading state by default', () => {
    render(
      <AdminHeaderPanel
        title="Ready State"
        isLoading={false}
      />
    );

    expect(screen.getByText('Ready State')).toBeTruthy();
    expect(screen.getByTestId('progress-line')).toBeTruthy();
  });

  it('should render with multiple action buttons', () => {
    const actions = (
      <div>
        <button>Save</button>
        <button>Cancel</button>
        <button>Delete</button>
      </div>
    );

    render(
      <AdminHeaderPanel
        title="Edit User"
        description="Make changes to user profile"
        actions={actions}
      />
    );

    expect(screen.getByText('Edit User')).toBeTruthy();
    expect(screen.getByText('Make changes to user profile')).toBeTruthy();
    expect(screen.getByText('Save')).toBeTruthy();
    expect(screen.getByText('Cancel')).toBeTruthy();
    expect(screen.getByText('Delete')).toBeTruthy();
  });

  it('should render with complex actions component', () => {
    const ComplexActions = () => (
      <div>
        <button>Primary Action</button>
        <button>Secondary Action</button>
        <button>Tertiary Action</button>
      </div>
    );

    render(
      <AdminHeaderPanel
        title="Complex Header"
        description="With multiple actions"
        actions={<ComplexActions />}
      />
    );

    expect(screen.getByText('Complex Header')).toBeTruthy();
    expect(screen.getByText('With multiple actions')).toBeTruthy();
    expect(screen.getByText('Primary Action')).toBeTruthy();
    expect(screen.getByText('Secondary Action')).toBeTruthy();
    expect(screen.getByText('Tertiary Action')).toBeTruthy();
  });

  it('should render with long title and description', () => {
    render(
      <AdminHeaderPanel
        title="This is a very long header title that might wrap to multiple lines in the UI"
        description="This is an even longer description that provides detailed information about the page content and what users can expect to find here"
      />
    );

    expect(screen.getByText(/This is a very long header title/)).toBeTruthy();
    expect(screen.getByText(/This is an even longer description/)).toBeTruthy();
  });

  it('should render with special characters in text', () => {
    render(
      <AdminHeaderPanel
        title="Special & Characters <Test>"
        description="Quotes 'and' special characters"
      />
    );

    expect(screen.getByText(/Special & Characters/)).toBeTruthy();
    expect(screen.getByText(/Quotes/)).toBeTruthy();
  });
});