AuthZTitle.test.tsx

import { ReactNode } from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import AuthZTitle, { AuthZTitleProps } from './AuthZTitle';

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  Link: ({ children, to }:{ children:ReactNode, to:string }) => <a href={to}>{children}</a>,
}));

describe('AuthZTitle', () => {
  const defaultProps: AuthZTitleProps = {
    activeLabel: 'Current Page',
    pageTitle: 'Page Title',
    pageSubtitle: 'Page Subtitle',
  };

  it('renders without optional fields', () => {
    render(<AuthZTitle {...defaultProps} />);
    expect(screen.getByText(defaultProps.activeLabel)).toBeInTheDocument();
    expect(screen.getByText(defaultProps.pageTitle)).toBeInTheDocument();
    expect(screen.getByText(defaultProps.pageSubtitle as string)).toBeInTheDocument();
  });

  it('renders breadcrumb with links and active label', () => {
    const navLinks = [
      { label: 'Root', to: '/' },
      { label: 'Section', to: '/section' },
    ];

    render(<AuthZTitle {...defaultProps} navLinks={navLinks} />);

    navLinks.forEach(({ label, to }) => {
      expect(screen.getByText(label)).toBeInTheDocument();
      expect(screen.getByText(label)).toHaveAttribute('href', expect.stringContaining(to));
    });

    expect(screen.getByText(defaultProps.activeLabel)).toBeInTheDocument();
  });

  it('renders page title', () => {
    render(<AuthZTitle {...defaultProps} />);
    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(defaultProps.pageTitle);
  });

  it('renders page subtitle as ReactNode', () => {
    const subtitleNode = <div data-testid="custom-subtitle">Custom Subtitle</div>;
    render(<AuthZTitle {...defaultProps} pageSubtitle={subtitleNode} />);
    expect(screen.getByTestId('custom-subtitle')).toBeInTheDocument();
  });

  it('renders action buttons and triggers onClick', () => {
    const onClick1 = jest.fn();
    const onClick2 = jest.fn();
    const actions = [
      { label: 'Save', onClick: onClick1 },
      { label: 'Cancel', onClick: onClick2 },
    ];

    render(<AuthZTitle {...defaultProps} actions={actions} />);

    actions.forEach(async ({ label, onClick }) => {
      const user = userEvent.setup();
      const button = screen.getByRole('button', { name: label });
      expect(button).toBeInTheDocument();
      await user.click(button);
      expect(onClick).toHaveBeenCalled();
    });
  });

  it('renders action buttons with icons', () => {
    const mockIcon = () => <span data-testid="mock-icon">Icon</span>;
    const onClick = jest.fn();
    const actions = [
      { label: 'Save', icon: mockIcon, onClick },
    ];

    render(<AuthZTitle {...defaultProps} actions={actions} />);

    const button = screen.getByRole('button', { name: 'Icon Save' });
    expect(button).toBeInTheDocument();
    expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
  });

  it('renders ReactNode actions alongside button actions', () => {
    const onClick = jest.fn();
    const customAction = <div data-testid="custom-action">Custom Action</div>;
    const actions = [
      { label: 'Save', onClick },
      customAction,
    ];

    render(<AuthZTitle {...defaultProps} actions={actions} />);

    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
    expect(screen.getByTestId('custom-action')).toBeInTheDocument();
  });
});