import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';
import TopBar from './TopBar';

function renderBar(props: Parameters<typeof TopBar>[0]) {
  const { container } = render(
    <ThemeProvider>
      <TopBar {...props} />
    </ThemeProvider>
  );
  return container;
}

describe('<TopBar/> component', () => {
  it('renders the title as the page heading', () => {
    renderBar({ title: 'Earnings' });
    expect(screen.getByRole('heading', { level: 1, name: 'Earnings' })).toBeInTheDocument();
  });

  it('lets titleNode replace the title entirely (the brand lockup on a root tab)', () => {
    renderBar({ title: 'Earnings', titleNode: <span>brand</span> });
    expect(screen.getByText('brand')).toBeInTheDocument();
    expect(screen.queryByText('Earnings')).not.toBeInTheDocument();
  });

  it('renders the start and end slots', () => {
    renderBar({ title: 'Earnings', startNode: <button>back</button>, endNode: <button>bell</button> });
    expect(screen.getByRole('button', { name: 'back' })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'bell' })).toBeInTheDocument();
  });

  it('is not a filled AppBar', () => {
    const container = renderBar({ title: 'Earnings' });
    // The design rule this guards: on a 480px frame a solid header band is a permanent slab of
    // chrome above content that is already only ~50 characters wide. The bar sits on the page
    // background instead — no MUI AppBar surface, rule or elevation.
    expect(container.querySelector('.MuiAppBar-root')).toBeNull();
  });
});
