前端权限管理：添加单元测试

新增测试文件： - ApiPermissions.test.ts: 权限管理主页面测试 - ApiEndpointPermissions.test.ts: 接口级权限矩阵组件测试 - PermissionMonitoring.test.ts: 权限监控仪表板组件测试测试覆盖： - 组件渲染验证 - 事件发出验证 - 搜索和筛选功能测试 - 数据显示验证 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-05-14 09:23:17 +08:00
parent c73c00d932
commit 35acf96d6b
4 changed files with 345 additions and 5 deletions
@@ -0,0 +1,198 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import PermissionMonitoring from "@/components/PermissionMonitoring.vue";
+import type { PermissionMetricsResponse, HealthResponse, AlertsResponse } from "@/types/api";
+
+describe("PermissionMonitoring.vue", () => {
+  const mockMetrics: PermissionMetricsResponse = {
+    check_metrics: {
+      total_checks: 1000,
+      allowed_checks: 950,
+      denied_checks: 50,
+      total_time: 5.234,
+      min_time: 0.001,
+      max_time: 0.05,
+      avg_time: 0.005,
+      allow_rate: 95.0,
+      deny_rate: 5.0,
+      error_rate: 0.1,
+      errors: 1,
+    },
+    cache_metrics: {
+      total_accesses: 1000,
+      cache_hits: 850,
+      cache_misses: 150,
+      cache_invalidations: 5,
+      hit_rate: 85.0,
+      miss_rate: 15.0,
+    },
+    uptime_seconds: 3600,
+  };
+
+  const mockHealth: HealthResponse = {
+    status: "healthy",
+    health_score: 95,
+    issues: [],
+    metrics: mockMetrics,
+    cache_stats: {
+      cache_items: {
+        project_permissions_count: 10,
+        member_role_count: 50,
+        total_count: 60,
+      },
+      cache_metrics: mockMetrics.cache_metrics,
+    },
+  };
+
+  const mockAlerts: AlertsResponse = {
+    total: 2,
+    alerts: [
+      {
+        timestamp: 1715692800.123,
+        level: "warning",
+        type: "slow_permission_check",
+        message: "权限检查耗时过长: 52.34ms",
+        data: { elapsed_time: 0.05234 },
+      },
+      {
+        timestamp: 1715692799.456,
+        level: "error",
+        type: "permission_check_error",
+        message: "权限检查出错: database connection timeout",
+        data: { error: "database connection timeout" },
+      },
+    ],
+  };
+
+  it("renders monitoring dashboard", () => {
+    const wrapper = mount(PermissionMonitoring, {
+      props: {
+        metrics: mockMetrics,
+        health: mockHealth,
+        alerts: mockAlerts,
+      },
+      global: {
+        stubs: {
+          ElTag: false,
+          ElProgress: false,
+          ElTable: false,
+          ElEmpty: false,
+        },
+      },
+    });
+
+    expect(wrapper.find(".permission-monitoring").exists()).toBe(true);
+  });
+
+  it("displays health status", () => {
+    const wrapper = mount(PermissionMonitoring, {
+      props: {
+        metrics: mockMetrics,
+        health: mockHealth,
+        alerts: mockAlerts,
+      },
+      global: {
+        stubs: {
+          ElTag: false,
+          ElProgress: false,
+          ElTable: false,
+          ElEmpty: false,
+        },
+      },
+    });
+
+    const healthCard = wrapper.find(".health-card");
+    expect(healthCard.exists()).toBe(true);
+    expect(healthCard.text()).toContain("系统健康状态");
+  });
+
+  it("displays metric cards", () => {
+    const wrapper = mount(PermissionMonitoring, {
+      props: {
+        metrics: mockMetrics,
+        health: mockHealth,
+        alerts: mockAlerts,
+      },
+      global: {
+        stubs: {
+          ElTag: false,
+          ElProgress: false,
+          ElTable: false,
+          ElEmpty: false,
+        },
+      },
+    });
+
+    const metricCards = wrapper.findAll(".metric-card");
+    expect(metricCards.length).toBeGreaterThan(0);
+  });
+
+  it("displays cache efficiency", () => {
+    const wrapper = mount(PermissionMonitoring, {
+      props: {
+        metrics: mockMetrics,
+        health: mockHealth,
+        alerts: mockAlerts,
+      },
+      global: {
+        stubs: {
+          ElTag: false,
+          ElProgress: false,
+          ElTable: false,
+          ElEmpty: false,
+        },
+      },
+    });
+
+    const cacheCard = wrapper.find(".cache-card");
+    expect(cacheCard.exists()).toBe(true);
+    expect(cacheCard.text()).toContain("缓存效率");
+  });
+
+  it("displays alerts list", () => {
+    const wrapper = mount(PermissionMonitoring, {
+      props: {
+        metrics: mockMetrics,
+        health: mockHealth,
+        alerts: mockAlerts,
+      },
+      global: {
+        stubs: {
+          ElTag: false,
+          ElProgress: false,
+          ElTable: false,
+          ElEmpty: false,
+        },
+      },
+    });
+
+    const alertsCard = wrapper.find(".alerts-card");
+    expect(alertsCard.exists()).toBe(true);
+    expect(alertsCard.text()).toContain("最近告警");
+  });
+
+  it("emits refresh event when refresh button clicked", async () => {
+    const wrapper = mount(PermissionMonitoring, {
+      props: {
+        metrics: mockMetrics,
+        health: mockHealth,
+        alerts: mockAlerts,
+      },
+      global: {
+        stubs: {
+          ElTag: false,
+          ElProgress: false,
+          ElTable: false,
+          ElEmpty: false,
+          ElButton: false,
+        },
+      },
+    });
+
+    const refreshButton = wrapper.find("button");
+    if (refreshButton.exists()) {
+      await refreshButton.trigger("click");
+      expect(wrapper.emitted("refresh")).toBeTruthy();
+    }
+  });
+});