feat: 初始提交

tests/web/components/Sidebar/index.test.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { screen } from "@testing-library/react";
+import { describe, expect, test } from "bun:test";
+import { createElement } from "react";
+
+import { Sidebar } from "../../../../src/web/components/Sidebar";
+import { renderWithProviders } from "../../test-utils";
+
+describe("Sidebar", () => {
+  test("渲染菜单项", () => {
+    renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }));
+
+    expect(screen.getByText("仪表盘")).not.toBeNull();
+    expect(screen.getByText("用户管理")).not.toBeNull();
+    expect(screen.getByText("系统设置")).not.toBeNull();
+  });
+
+  test("折叠状态下仍渲染菜单项", () => {
+    renderWithProviders(createElement(Sidebar, { collapsed: true, onToggleCollapsed: () => {} }));
+
+    expect(screen.getByText("仪表盘")).not.toBeNull();
+    expect(screen.getByText("用户管理")).not.toBeNull();
+    expect(screen.getByText("系统设置")).not.toBeNull();
+  });
+
+  test("高亮当前路由对应的菜单项", () => {
+    renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }), {
+      initialRoute: "/users",
+    });
+
+    const activeItem = document.querySelector(".t-is-active");
+    expect(activeItem).not.toBeNull();
+    expect(activeItem?.textContent).toContain("用户管理");
+  });
+
+  test("展开态底部渲染折叠按钮", () => {
+    renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }));
+
+    const collapseBtn = document.querySelector(".app-sidebar-collapse-btn");
+    expect(collapseBtn).not.toBeNull();
+  });
+
+  test("点击底部按钮调用 onToggleCollapsed", () => {
+    let called = false;
+    const onToggle = () => {
+      called = true;
+    };
+    renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: onToggle }));
+
+    const btn = document.querySelector<HTMLButtonElement>(".app-sidebar-collapse-btn");
+    expect(btn).not.toBeNull();
+    btn!.click();
+    expect(called).toBe(true);
+  });
+
+  test("折叠态底部按钮仍渲染且菜单项高亮不变", () => {
+    renderWithProviders(createElement(Sidebar, { collapsed: true, onToggleCollapsed: () => {} }), {
+      initialRoute: "/users",
+    });
+
+    const collapseBtn = document.querySelector(".app-sidebar-collapse-btn");
+    expect(collapseBtn).not.toBeNull();
+
+    const activeItem = document.querySelector(".t-is-active");
+    expect(activeItem).not.toBeNull();
+    expect(activeItem?.textContent).toContain("用户管理");
+  });
+});