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

function renderFrame(props: Parameters<typeof AppFrame>[0]) {
  return render(
    <ThemeProvider>
      <AppFrame {...props} />
    </ThemeProvider>
  );
}

describe('<AppFrame/> layout', () => {
  it('renders header, content and footer as landmarks in order', () => {
    renderFrame({
      header: <span>chrome-top</span>,
      footer: <span>chrome-bottom</span>,
      children: <span>page body</span>,
    });
    expect(screen.getByRole('banner')).toHaveTextContent('chrome-top');
    expect(screen.getByRole('main')).toHaveTextContent('page body');
    expect(screen.getByRole('contentinfo')).toHaveTextContent('chrome-bottom');
  });

  it('omits the header and footer slots when unused (the chrome-free auth shell)', () => {
    renderFrame({ children: <span>page body</span> });
    expect(screen.queryByRole('banner')).not.toBeInTheDocument();
    expect(screen.queryByRole('contentinfo')).not.toBeInTheDocument();
  });

  it('caps the app column at the phone-frame width', () => {
    renderFrame({ children: <span>page body</span> });
    // The whole point of the frame: a wide window gets more canvas, never a wider app.
    expect(screen.getByRole('main').parentElement).toHaveStyle(`max-width: ${APP_FRAME_MAX_WIDTH}px`);
  });

  it('scrolls vertically inside main and never horizontally', () => {
    renderFrame({ children: <span>page body</span> });
    const main = screen.getByRole('main');
    expect(main).toHaveStyle('overflow-y: auto');
    // Guards the reported bug: an over-wide child must clip, not drag the whole app sideways.
    expect(main).toHaveStyle('overflow-x: hidden');
  });
});
