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

const abilities = { canCreate: true, canGrant: true, canLoadPermissions: true, canUpdate: true };

test("shows role permissions as a searchable category workspace", async () => {
    const user = userEvent.setup();
    render(
        <RoleFormDrawer
            abilities={abilities}
            editingRole={{ id: 1 }}
            form={{ code: "ops", description: "", name: "运营", permissionIds: [1] }}
            onClose={vi.fn()}
            onSubmit={vi.fn()}
            onTogglePermission={vi.fn()}
            onTogglePermissionGroup={vi.fn()}
            open
            permissionGroups={[
                {
                    items: [
                        { code: "user:view", id: 1, name: "用户查看" },
                        { code: "user:update", id: 2, name: "用户更新" },
                    ],
                    key: "users",
                    title: "后台用户",
                },
            ]}
            setForm={vi.fn()}
        />,
    );

    await user.click(screen.getByRole("button", { name: "权限配置1" }));

    expect(screen.getByRole("navigation", { name: "权限分类" })).toBeInTheDocument();
    expect(screen.getByPlaceholderText("搜索权限名称或编码")).toBeInTheDocument();
    expect(screen.getByText("user:view")).toBeInTheDocument();
    expect(screen.getByText("已选 1 / 2 项")).toBeInTheDocument();
});
