// @vitest-environment jsdom
//
// The focus half of the side panels' peek-open model. What is pinned: a dialog opened from inside
// the panel (rendered at the app root, so outside it in both the DOM and the React tree) does not
// collapse the panel — collapsing unmounted the row the dialog hands the focus back to, stranding a
// keyboard user on <body> after Cancel (measured in Chrome, E11 S2).
import { afterEach, describe, expect, it } from "vitest";
import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
import { useHoverFocusWithin } from "./useHoverFocusWithin";

afterEach(cleanup);

function Panel() {
  const peek = useHoverFocusWithin();
  return (
    <>
      <div {...peek.focusHandlers} data-testid="panel">
        <button>row</button>
        {peek.active && <span>expanded</span>}
      </div>
      <div role="dialog" aria-modal="true">
        <button>cancel</button>
      </div>
      <button>elsewhere</button>
    </>
  );
}

const moveFocus = (from: HTMLElement, to: HTMLElement) =>
  act(() => {
    fireEvent.blur(from, { relatedTarget: to });
    to.focus();
  });

describe("useHoverFocusWithin · focus", () => {
  it("stays open while the focus is in a dialog opened over the page", () => {
    render(<Panel />);
    const row = screen.getByText("row");
    act(() => row.focus());
    expect(screen.queryByText("expanded")).not.toBeNull();

    moveFocus(row, screen.getByText("cancel"));
    expect(screen.queryByText("expanded")).not.toBeNull();
  });

  it("still closes when the focus leaves for the page itself", () => {
    render(<Panel />);
    const row = screen.getByText("row");
    act(() => row.focus());
    moveFocus(row, screen.getByText("elsewhere"));
    expect(screen.queryByText("expanded")).toBeNull();
  });
});