import { render, screen } from "@testing-library/react";
import { expect, test, vi } from "vitest";
import { UserFormDrawer } from "./UserFormDrawer.jsx";

const baseForm = {
  financeScopes: [],
  mfaEnabled: false,
  name: "zhangsan",
  password: "",
  roleIds: [1],
  teamId: "10",
  username: "zhangsan"
};

const baseFinanceScopeCatalog = {
  apps: [{ appCode: "Huwaa", appName: "Huwaa" }],
  error: null,
  loading: false,
  regions: [{ appCode: "Huwaa", name: "菲律宾", regionCode: "PHILIPPINES", regionId: 8 }]
};

test("keeps edit user drawer actions docked outside the scrollable content", () => {
  render(
    <UserFormDrawer
      editingUser={{ id: 3 }}
      financeScopeCatalog={baseFinanceScopeCatalog}
      form={baseForm}
      onClose={vi.fn()}
      onFinanceScopeChecked={vi.fn()}
      onRoleChecked={vi.fn()}
      onSubmit={vi.fn()}
      open
      roles={[{ id: 1, name: "运维管理员" }]}
      setForm={vi.fn()}
      teams={[{ id: 10, name: "运营一部" }]}
    />
  );

  const form = document.querySelector("form.form-drawer");
  const content = form.querySelector(".form-drawer__content");
  const actions = form.querySelector(".form-drawer__actions");

  expect(screen.getByRole("heading", { name: "编辑用户" })).toBeInTheDocument();
  expect(form).toHaveClass("form-drawer--sticky-actions");
  expect(content).toContainElement(screen.getByText("财务范围").closest(".form-drawer__section"));
  expect(actions).toContainElement(screen.getByRole("button", { name: "取消" }));
  expect(actions).toContainElement(screen.getByRole("button", { name: "提交" }));
});
