import { expect, test, vi } from "vitest";
import { within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import { renderApp } from "../test/render";
import { DetailDrawer } from "./detail-drawer";

test("renders children in a named drawer and closes via the close button", async () => {
  const onClose = vi.fn();
  renderApp(
    <DetailDrawer open onClose={onClose} ariaLabel="Object detail">
      <p>detail body</p>
    </DetailDrawer>,
  );

  const body = within(document.body);
  expect(await body.findByText("detail body")).toBeInTheDocument();
  await userEvent.click(body.getByRole("button", { name: /close detail/i }));
  expect(onClose).toHaveBeenCalled();
});
