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

function TestIcon() {
  return <span aria-hidden="true" />;
}

test("only marks the longest matching child route active", () => {
  render(
    <Sidebar
      activePath="/app/users/login-logs"
      isCollapsed={false}
      items={[
        {
          children: [
            { icon: TestIcon, id: "app-user-list", label: "用户列表", path: "/app/users" },
            { icon: TestIcon, id: "app-user-login-logs", label: "登录日志", path: "/app/users/login-logs" }
          ],
          icon: TestIcon,
          id: "app-users",
          label: "用户管理"
        }
      ]}
      onNavigate={vi.fn()}
    />
  );

  expect(screen.getByRole("button", { name: "登录日志" })).toHaveClass("nav-item--active");
  expect(screen.getByRole("button", { name: "用户列表" })).not.toHaveClass("nav-item--active");
});
