import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { type CacheRegionList, DEFAULT_SETTINGS } from "@umt/contracts";
import { createElement } from "react";
import { renderToString } from "react-dom/server";
import { MemoryRouter } from "react-router";
import { describe, expect, it } from "vitest";
import { qk } from "~/lib/query-keys.ts";
import { CacheSection, hitDetailText, hitRateText } from "./cache.tsx";

// 设置 → 缓存:缓存区表显示统一元数据缓存的命中率(最近 7 天、三个进程合计)。

const hits = { l1Hits: 50, l2Hits: 30, staleHits: 4, misses: 12, failures: 1, refreshes: 4, hitRate: 84 / 96 };

describe("缓存区命中率", () => {
  it("命中率按百分比显示一位小数;没有统计的区显示「—」,没读取过显示「暂无读取」", () => {
    expect(hitRateText(hits)).toBe("87.5%");
    expect(hitRateText(undefined)).toBe("—");
    expect(hitRateText({ ...hits, hitRate: null })).toBe("暂无读取");
    expect(hitDetailText(hits)).toBe("内存 50 · 数据库 30 · 旧值 4 · 未命中 12 · 回源失败 1 · 后台刷新 4");
    expect(hitDetailText({ ...hits, staleHits: 0, failures: 0, refreshes: 0 })).toBe("内存 50 · 数据库 30 · 未命中 12");
  });

  it("缓存区表有「命中率」列,元数据区显示命中率与明细", () => {
    const qc = new QueryClient({ defaultOptions: { queries: { retry: false, enabled: false } } });
    qc.setQueryData(qk.settings, DEFAULT_SETTINGS);
    const regions: CacheRegionList = {
      items: [
        { region: "tmdb.request", entries: 120, expired: 0, bytes: 4096, lastWriteAt: null, hits },
        { region: "site.detail", entries: 3, expired: 0, bytes: 100, lastWriteAt: null },
      ],
    };
    qc.setQueryData(["cache", "regions"], regions);
    const html = renderToString(
      createElement(
        QueryClientProvider,
        { client: qc },
        createElement(MemoryRouter, { initialEntries: ["/console/settings#cache"] }, createElement(CacheSection)),
      ),
    );
    expect(html).toContain("命中率");
    expect(html).toContain("87.5%");
    expect(html).toContain("内存 50 · 数据库 30");
    expect(html).toContain("最近 7 天");
  });
});