Files
UHD_Media_Tool/apps/web/app/components/console/data-table.test.ts
T
rootandClaude Opus 5.5 4480fc346d refactor(copy): 术语统一——收录版本、模型服务、智能体等(DEAI-2)
- 版本目标 → 收录版本(前后端用户可见字符串、能力描述、给模型的提示)
- Agent 上游 / 上游 → 模型服务;界面上的 Agent / Agent 会话 → 智能体 / 智能体会话
- 身份歧义 / 识别有歧义 / 无法确定作品 → 没识别出作品;待识别(池) → 未识别
- 建档 → 加入媒体库;资产 → 文件;库根 → 媒体库目录;纳管 → 本工具 / 外部任务;
  哨兵 → 标记文件 / 检查目录;站点快照 → 抓取;Feed / RSS 订阅 / 来源健康 → RSS
- 代码标识符、API 字段名、迁移文件不改;glossary.md 同步;smoke 选择器跟随

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-09-29 20:35:43 +08:00

91 lines
3.3 KiB
TypeScript

import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import { DataTable } from "./data-table.tsx";
import { groupRows, readCollapsed, toggleCollapsed, writeCollapsed } from "./data-table-groups.ts";
type Row = { id: string; status: string; name: string };
const rows: Row[] = [
{ id: "1", status: "未识别", name: "a.mkv" },
{ id: "2", status: "已登记", name: "b.mkv" },
{ id: "3", status: "未识别", name: "c.mkv" },
];
describe("DataTable groupBy:分组逻辑", () => {
it("按首次出现顺序分组,组内保持原顺序", () => {
expect(groupRows(rows, (r) => r.status).map((g) => [g.key, g.rows.map((r) => r.id)])).toEqual([
["未识别", ["1", "3"]],
["已登记", ["2"]],
]);
});
it("给 order 时按 order 排组", () => {
const g = groupRows(
rows,
(r) => r.status,
(a, b) => a.localeCompare(b, "zh-CN"),
);
expect(g.map((x) => x.key)).toEqual(["未识别", "已登记"].sort((a, b) => a.localeCompare(b, "zh-CN")));
});
it("折叠切换返回新集合", () => {
const a = new Set<string>();
const b = toggleCollapsed(a, "x");
expect([...b]).toEqual(["x"]);
expect(a.size).toBe(0);
expect([...toggleCollapsed(b, "x")]).toEqual([]);
});
});
describe("DataTable groupBy:记住折叠态", () => {
it("写入后能读回;没有 storageKey、内容损坏或存储不可用时为 null", () => {
const map = new Map<string, string>();
const store = () => ({
getItem: (k: string) => map.get(k) ?? null,
setItem: (k: string, v: string) => void map.set(k, v),
});
writeCollapsed("t", new Set(["已登记"]), store);
expect([...(readCollapsed("t", store) ?? [])]).toEqual(["已登记"]);
expect(readCollapsed(undefined, store)).toBeNull();
map.set("umt.table-groups:bad", "{oops");
expect(readCollapsed("bad", store)).toBeNull();
const blocked = () => ({
getItem: (): string | null => {
throw new Error("blocked");
},
setItem: () => {
throw new Error("blocked");
},
});
expect(readCollapsed("t", blocked)).toBeNull();
expect(() => writeCollapsed("t", new Set(), blocked)).not.toThrow();
expect(readCollapsed("t", () => undefined)).toBeNull();
});
});
describe("DataTable groupBy:渲染", () => {
it("每组一个可折叠组头,带计数;首屏全部展开", () => {
const html = renderToStaticMarkup(
createElement(DataTable<Row>, {
columns: [{ key: "name", header: "名称", cell: (r: Row) => r.name }],
rows,
rowKey: (r: Row) => r.id,
groupBy: { key: (r: Row) => r.status },
}),
);
expect(html.match(/aria-expanded="true"/g)).toHaveLength(2);
expect(html).toContain("未识别");
expect(html).toMatch(/未识别<\/span><span[^>]*>2<\/span>/);
expect(html).toMatch(/已登记<\/span><span[^>]*>1<\/span>/);
for (const n of ["a.mkv", "b.mkv", "c.mkv"]) expect(html).toContain(n);
});
it("不给 groupBy 时没有组头", () => {
const html = renderToStaticMarkup(
createElement(DataTable<Row>, {
columns: [{ key: "name", header: "名称", cell: (r: Row) => r.name }],
rows,
rowKey: (r: Row) => r.id,
}),
);
expect(html).not.toContain("aria-expanded");
});
});