// @vitest-environment jsdom

import { render, screen, waitFor } from "@testing-library/react";
import { describe, expect, it } from "vitest";

import { PageHeader } from "../../src/presentation/components/page-header.tsx";

describe("page header focus ownership", () => {
  it("takes over focus handed off by the route main region", async () => {
    const { rerender } = render(
      <>
        <main id="main-content" tabIndex={-1} />
        <PageHeader title="Loading" />
      </>,
    );
    const main = screen.getByRole("main");
    main.focus();

    rerender(
      <>
        <main id="main-content" tabIndex={-1} />
        <PageHeader title="Loaded" />
      </>,
    );

    await waitFor(() =>
      expect(
        screen.getByRole("heading", { level: 1, name: "Loaded" }),
      ).toHaveFocus(),
    );
  });

  it("does not steal focus from a user-controlled element", () => {
    const { rerender } = render(
      <>
        <button type="button">Menu</button>
        <PageHeader title="Loading" />
      </>,
    );
    const menu = screen.getByRole("button", { name: "Menu" });
    menu.focus();

    rerender(
      <>
        <button type="button">Menu</button>
        <PageHeader title="Loaded" />
      </>,
    );

    expect(menu).toHaveFocus();
  });
});