geo/frontend/e2e/tests/health-score-interaction.spec.ts

import { test, expect } from "../fixtures";

test.describe("健康评分 - 交互测试", () => {
  test.beforeEach(async ({ authenticatedPage }) => {
    await authenticatedPage.goto("/dashboard/health-score");
    await authenticatedPage.waitForLoadState("networkidle");
  });

  test("页面加载后显示综合健康评分仪表盘", async ({ authenticatedPage }) => {
    // 验证页面标题
    await expect(
      authenticatedPage.getByRole("heading", { name: "健康评分" })
    ).toBeVisible({ timeout: 15000 });

    // 验证综合评分仪表盘或空状态
    const scoreGauge = authenticatedPage.locator(".recharts-pie").first();
    const emptyState = authenticatedPage.getByText("暂无健康评分数据");
    const hasGauge = await scoreGauge.isVisible({ timeout: 10000 }).catch(() => false);
    const hasEmpty = await emptyState.isVisible({ timeout: 3000 }).catch(() => false);

    if (!hasGauge && !hasEmpty) {
      test.skip();
      return;
    }
    expect(hasGauge || hasEmpty).toBeTruthy();
  });

  test("点击维度评分卡片查看详细评分", async ({ authenticatedPage }) => {
    // 等待维度评分卡片加载
    const dimensionCard = authenticatedPage.locator("div.grid.gap-4").first();
    const hasDimensions = await dimensionCard.isVisible({ timeout: 10000 }).catch(() => false);

    if (!hasDimensions) {
      test.skip();
      return;
    }

    // 验证维度评分卡片中的进度条
    const progressBars = authenticatedPage.locator("div.h-2.w-full.overflow-hidden.rounded-full");
    const barCount = await progressBars.count();

    if (barCount === 0) {
      test.skip();
      return;
    }

    // 点击第一个维度卡片，验证交互
    const firstDimCard = dimensionCard.locator("> div").first();
    if (await firstDimCard.isVisible()) {
      await firstDimCard.click();
      // 验证维度详情描述可见（维度卡片内有 description 文本）
      const dimDescription = firstDimCard.locator("p.text-xs.text-muted-foreground");
      const hasDesc = await dimDescription.isVisible({ timeout: 3000 }).catch(() => false);
      // 描述可能不存在，仅验证卡片可点击不报错
      expect(true).toBeTruthy();
    }
  });

  test("切换到竞品对比Tab查看雷达图", async ({ authenticatedPage }) => {
    // 验证 Tab 组件存在
    const compareTab = authenticatedPage.getByRole("tab", { name: "竞品对比" });
    const hasTab = await compareTab.isVisible({ timeout: 10000 }).catch(() => false);

    if (!hasTab) {
      test.skip();
      return;
    }

    await compareTab.click();

    // 验证竞品对比内容区域加载
    const radarChart = authenticatedPage.locator(".recharts-radar");
    const emptyCompare = authenticatedPage.getByText("暂无竞品对比数据");
    const loadingState = authenticatedPage.locator(".animate-pulse");

    const hasRadar = await radarChart.isVisible({ timeout: 10000 }).catch(() => false);
    const hasEmpty = await emptyCompare.isVisible({ timeout: 5000 }).catch(() => false);
    const isLoading = await loadingState.isVisible({ timeout: 3000 }).catch(() => false);

    if (!hasRadar && !hasEmpty && !isLoading) {
      test.skip();
      return;
    }

    expect(hasRadar || hasEmpty || isLoading).toBeTruthy();
  });

  test("切换到历史趋势Tab查看评分趋势图", async ({ authenticatedPage }) => {
    const historyTab = authenticatedPage.getByRole("tab", { name: "历史趋势" });
    const hasTab = await historyTab.isVisible({ timeout: 10000 }).catch(() => false);

    if (!hasTab) {
      test.skip();
      return;
    }

    await historyTab.click();

    // 验证历史趋势图表或空状态
    const lineChart = authenticatedPage.locator(".recharts-line");
    const emptyHistory = authenticatedPage.getByText("暂无历史趋势数据");
    const loadingState = authenticatedPage.locator(".animate-pulse");

    const hasChart = await lineChart.isVisible({ timeout: 10000 }).catch(() => false);
    const hasEmpty = await emptyHistory.isVisible({ timeout: 5000 }).catch(() => false);
    const isLoading = await loadingState.isVisible({ timeout: 3000 }).catch(() => false);

    if (!hasChart && !hasEmpty && !isLoading) {
      test.skip();
      return;
    }

    expect(hasChart || hasEmpty || isLoading).toBeTruthy();
  });

  test("历史趋势图表可交互 - 悬停显示Tooltip", async ({ authenticatedPage }) => {
    const historyTab = authenticatedPage.getByRole("tab", { name: "历史趋势" });
    const hasTab = await historyTab.isVisible({ timeout: 10000 }).catch(() => false);

    if (!hasTab) {
      test.skip();
      return;
    }

    await historyTab.click();

    // 等待图表加载
    const lineChart = authenticatedPage.locator(".recharts-line");
    const hasChart = await lineChart.isVisible({ timeout: 10000 }).catch(() => false);

    if (!hasChart) {
      test.skip();
      return;
    }

    // 悬停在图表上，验证 Tooltip 出现
    const chartArea = authenticatedPage.locator(".recharts-wrapper").first();
    if (await chartArea.isVisible()) {
      await chartArea.hover();
      // Tooltip 可能出现，验证 recharts-tooltip 类
      const tooltip = authenticatedPage.locator(".recharts-tooltip-wrapper");
      const hasTooltip = await tooltip.isVisible({ timeout: 3000 }).catch(() => false);
      // Tooltip 可能不出现（取决于数据），仅验证悬停不报错
      expect(true).toBeTruthy();
    }
  });

  test("维度评分卡片显示百分比和进度条", async ({ authenticatedPage }) => {
    // 等待数据加载完成
    await authenticatedPage.waitForTimeout(2000);

    const percentTexts = authenticatedPage.locator("span.text-sm.font-semibold");
    const count = await percentTexts.count();

    if (count === 0) {
      test.skip();
      return;
    }

    // 验证至少有一个百分比文本
    const firstPercent = percentTexts.first();
    const text = await firstPercent.textContent().catch(() => "");
    // 百分比格式如 "85.5%" 或 "0%"
    expect(text).toMatch(/\d+(\.\d+)?%/);
  });
});