niceeval 0.5.4 → 0.6.1

package/src/report/react/render.test.tsx

@@ -8,29 +8,35 @@ import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
+import type { AttemptLocator } from "../../results/locator.ts";
 
 import {
-  CaseList,
+  AttemptList,
   DeltaTable,
+  EvalList,
+  ExperimentList,
   MetricMatrix,
   MetricScatter,
   MetricTable,
   RunOverview,
   Scoreboard,
 } from "./index.tsx";
-import { NRE_PALETTE, colorClassForKey, colorIndexForKey } from "./colors.ts";
+import { colorClassForKey, seriesClassForKey } from "./colors.ts";
 import {
-  caseListData,
+  attemptListItems,
   deltaData,
+  evalListItems,
+  experimentListItems,
   matrixData,
   overviewData,
   overviewWithCost,
   scatterData,
   scoreboardData,
   tableData,
+  tableDataWithMeta,
 } from "./fixtures.ts";
 
-const attemptHref = (ref: { run: string; result: number }) => `/attempts/${ref.run}/${ref.result}`;
+const attemptHref = (locator: AttemptLocator) => `/attempts/${locator}`;
 
 describe("RunOverview", () => {
   const html = renderToStaticMarkup(<RunOverview data={overviewData} />);
@@ -39,7 +45,11 @@ describe("RunOverview", () => {
     expect(html).toContain("nre-overview");
     expect(html).toContain("<dd>12</dd>"); // 题目
     expect(html).toContain("<dd>48</dd>"); // attempts
-    expect(html).toContain("78%"); // 36 / (36+8+2),skipped 不进分母
+    // totals.passRate.display 原样渲染(两级聚合 70%),不是从 passed/failed/errored
+    // 现场重算的 78%(36/(36+8+2))—— 两个数刻意不同,证明组件没有偷懒重算
+    expect(html).toContain("70%");
+    expect(html).not.toContain("78%");
+    expect(html).toContain("46/48"); // samples < total:覆盖率角标(2 个 skipped attempt 不进桶)
     expect(html).toContain("4m 21s"); // 261000ms
   });
 
@@ -88,7 +98,54 @@ describe("MetricTable", () => {
   });
 
   it("refs + attemptHref 出普通 <a>", () => {
-    expect(html).toContain('href="/attempts/run-a/0"');
+    expect(html).toContain('href="/attempts/@1a0a0a0"');
+  });
+
+  it("渐进增强的 data 属性:所有表头 data-nre-sort、格子 data-sort-value(无 JS 时纯属性,内容完整)", () => {
+    expect(html.match(/data-nre-sort/g)).toHaveLength(3); // 维度列 + 2 指标列
+    expect(html).toContain('data-sort-value="codex"');
+    expect(html).toContain('data-sort-value="0.87"');
+    // 缺数据格子的排序值为空串:enhance.js 排序时恒沉底
+    expect(html).toContain('data-sort-value=""');
+  });
+});
+
+describe("MetricTable:meta 榜单 parity 与 filter", () => {
+  const html = renderToStaticMarkup(<MetricTable data={tableDataWithMeta} />);
+
+  it("meta 在场补 Model / Agent 列,列序 experiment、model、agent、指标、verdicts", () => {
+    expect(html).toContain(">Model</th>");
+    expect(html).toContain(">Agent</th>");
+    expect(html).toContain(">Verdicts</th>");
+    expect(html.indexOf(">Model</th>")).toBeLessThan(html.indexOf(">Agent</th>"));
+    expect(html.indexOf(">Agent</th>")).toBeLessThan(html.indexOf("pass rate"));
+    expect(html).toContain("gpt-5.4");
+  });
+
+  it("verdict 计票列:eval 级折叠口径的 pill,零计数不出 pill", () => {
+    expect(html).toContain("nre-verdict-pill");
+    expect(html).toContain("1 passed");
+    expect(html).toContain("1 failed");
+    expect(html).toContain("2 passed");
+    expect(html).not.toContain("0 errored");
+  });
+
+  it("filter 开:表格前渲染 data-nre-filter 输入框(无 JS 静默无功能),仍无 <script>", () => {
+    const filtered = renderToStaticMarkup(<MetricTable data={tableDataWithMeta} filter />);
+    expect(filtered).toContain("data-nre-filter");
+    expect(filtered).toContain('class="nre-filter"');
+    expect(filtered.indexOf("nre-filter")).toBeLessThan(filtered.indexOf("<table"));
+    expect(filtered).toContain('placeholder="Filter rows…"');
+    expect(filtered).not.toContain("<script");
+  });
+
+  it("locale=zh-CN:chrome 文案与 meta 列头走字典;display 不本地化", () => {
+    const zh = renderToStaticMarkup(<MetricTable data={tableDataWithMeta} filter locale="zh-CN" />);
+    expect(zh).toContain(">模型</th>");
+    expect(zh).toContain(">结果</th>");
+    expect(zh).toContain("1 通过");
+    expect(zh).toContain('placeholder="筛选行…"');
+    expect(zh).toContain("50%"); // display 是 format 产物,不本地化
   });
 });
 
@@ -107,8 +164,8 @@ describe("MetricMatrix", () => {
   it("格子数字与 refs 下钻链接", () => {
     expect(html).toContain("100%");
     expect(html).toContain("0%");
-    expect(html).toContain('href="/attempts/run-b/3"');
-    expect(html).toContain('href="/attempts/run-b/7"');
+    expect(html).toContain('href="/attempts/@1b3b3b3"');
+    expect(html).toContain('href="/attempts/@1b7b7b7"');
   });
 
   it("列头(维度键)带稳定散列配色 class", () => {
@@ -145,13 +202,14 @@ describe("Scoreboard", () => {
 describe("MetricScatter", () => {
   const html = renderToStaticMarkup(<MetricScatter data={scatterData} pointHref={(row) => `/exp/${row.key}`} />);
 
+  // data-key 在点的 <g> 上,坐标在其内第一个 circle 上(非贪婪跨标签匹配)
   const cxOf = (key: string): number => {
-    const m = html.match(new RegExp(`data-key="${key}"[^>]*\\bcx="([\\d.]+)"`));
+    const m = html.match(new RegExp(`data-key="${key}"[\\s\\S]*?\\bcx="([\\d.]+)"`));
     expect(m, `circle for ${key}`).toBeTruthy();
     return Number(m![1]);
   };
   const cyOf = (key: string): number => {
-    const m = html.match(new RegExp(`data-key="${key}"[^>]*\\bcy="([\\d.]+)"`));
+    const m = html.match(new RegExp(`data-key="${key}"[\\s\\S]*?\\bcy="([\\d.]+)"`));
     expect(m, `circle for ${key}`).toBeTruthy();
     return Number(m![1]);
   };
@@ -168,12 +226,21 @@ describe("MetricScatter", () => {
     expect(cyOf("compare/bub-high")).toBeLessThan(cyOf("compare/bub-low"));
   });
 
-  it("同系列点连线并标系列名,线色来自稳定散列调色板", () => {
+  it("同系列点连线,系列色走类名(nre-series-cN,CSS 上色跟随深浅主题),图例列系列名", () => {
     expect(html).toContain("<polyline");
-    expect(html).toContain(">bub</text>");
-    expect(html).toContain(NRE_PALETTE[colorIndexForKey("bub")]);
-    // codex 只有 1 个可画点:不出线,但系列名仍标出
-    expect(html).toContain(">codex</text>");
+    expect(html).toContain(`nre-scatter-line ${seriesClassForKey("bub")}`);
+    // 渲染面零内联 hex:深色主题下由 CSS 变量切换
+    expect(html).not.toMatch(/#[0-9a-f]{6}/i);
+    // 图例:codex 只有 1 个可画点、不出线,但系列名仍在图例里
+    expect(html).toContain(">bub</span>");
+    expect(html).toContain(">codex</span>");
+  });
+
+  it("niceTicks 网格与每点直接标签(id 末段)", () => {
+    expect(html).toContain("nre-scatter-grid");
+    expect(html.match(/nre-scatter-tick/g)!.length).toBeGreaterThanOrEqual(6);
+    expect(html).toContain(">bub-low</text>");
+    expect(html).toContain(">codex-mid</text>");
   });
 
   it("null 点不画,底部注脚如实报数", () => {
@@ -190,7 +257,7 @@ describe("MetricScatter", () => {
     expect(html).toContain('href="/exp/compare/bub-low"');
   });
 
-  it("全部点都缺数据时不画空坐标系", () => {
+  it("全部点都缺数据时不画空坐标系:显式说明缺哪两个指标", () => {
     const empty = renderToStaticMarkup(
       <MetricScatter
         data={{
@@ -200,9 +267,23 @@ describe("MetricScatter", () => {
       />,
     );
     expect(empty).not.toContain("<svg");
-    expect(empty).toContain("no data");
+    expect(empty).toContain("No data to plot"); // 0 可画点:命名 x/y 指标,不画空图
     expect(empty).toContain("4 points missing data");
   });
+
+  it("恰好 1 个可画点:照常画出单点", () => {
+    const single = renderToStaticMarkup(
+      <MetricScatter
+        data={{
+          ...scatterData,
+          // 只留第一个点可画,其余 x 置空
+          rows: scatterData.rows.map((r, i) => (i === 0 ? r : { ...r, x: { ...r.x, value: null } })),
+        }}
+      />,
+    );
+    expect(single).toContain("<svg");
+    expect(single).toContain("nre-scatter-point");
+  });
 });
 
 describe("DeltaTable", () => {
@@ -233,12 +314,16 @@ describe("DeltaTable", () => {
   });
 });
 
-describe("CaseList", () => {
-  const html = renderToStaticMarkup(<CaseList data={caseListData} attemptHref={attemptHref} />);
+// AttemptList / EvalList / ExperimentList 的公开(报告组件)Props 没有 attemptHref 覆盖口子——
+// 证据室深链恒经 ctx.attemptHref,宿主外直接嵌进 React 应用时退化为默认 `#/attempt/<locator>`
+// (tree.ts 的 DEFAULT_WEB_CONTEXT),不是纯展示、也不发明另一套断链(与 MetricTable 等
+// 可选 attemptHref 的组件不同,这三个组件的下钻不是可选行为)。
+
+describe("AttemptList", () => {
+  const html = renderToStaticMarkup(<AttemptList items={attemptListItems} />);
 
-  it("逐条失败断言:name、score、detail、evidence", () => {
+  it("逐条断言:name、score、detail、evidence", () => {
     expect(html).toContain("roots-correct");
-    expect(html).toContain("score 0");
     expect(html).toContain("expected x=2, got x=3");
     expect(html).toContain("judge: sign flipped when substituting into the quadratic formula");
   });
@@ -247,21 +332,83 @@ describe("CaseList", () => {
     expect(html).toContain("TypeError: cannot read properties of undefined");
   });
 
-  it("truncated 如实报「还有 n 条没列」", () => {
-    expect(html).toContain("and 2 more not shown");
+  it("total > items.length 时如实报「还有 n 条没列」", () => {
+    const html2 = renderToStaticMarkup(<AttemptList items={attemptListItems} total={attemptListItems.length + 2} />);
+    expect(html2).toContain("and 2 more not shown");
+    // 不传 total(或 total === items.length)不产出截断文案
+    expect(html).not.toContain("more not shown");
   });
 
-  it("每条案例带 attemptHref 下钻链接", () => {
-    expect(html).toContain('href="/attempts/run-a/4"');
-    expect(html).toContain('href="/attempts/run-c/1"');
+  it("每条 attempt 带 locator + 默认证据室深链,不追加字母缩写", () => {
+    expect(html).toContain('href="#/attempt/@1a4a4a4"');
+    expect(html).toContain('href="#/attempt/@1c1c1c1"');
+    expect(html).not.toMatch(/\[[EXD⏱,]+\]/);
   });
 
-  it("长文本收进 <details>,零 JS 可展开", () => {
+  it("长文本(evidence)收进 <details>,零 JS 可展开", () => {
     expect(html).toContain("<details");
     expect(html).toContain("<summary>");
   });
 });
 
+describe("EvalList", () => {
+  const html = renderToStaticMarkup(<EvalList items={evalListItems} />);
+
+  it("每项一个 experimentId + evalId,判定与分数在场", () => {
+    expect(html).toContain("algebra/quadratic");
+    expect(html).toContain("geometry/angles");
+    expect(html).toContain("compare/bub");
+    expect(html).toContain("compare/codex");
+  });
+
+  it("展开到这道题的 Attempt(与 AttemptList 同一套 AttemptRow 渲染)", () => {
+    expect(html).toContain('href="#/attempt/@1a4a4a4"');
+    expect(html).toContain("roots-correct");
+  });
+
+  it("零 JS 靠原生 <details>,静态 HTML 内容已完整", () => {
+    expect(html).toContain("<details");
+    expect(html).not.toContain("<script");
+  });
+});
+
+describe("ExperimentList", () => {
+  const html = renderToStaticMarkup(<ExperimentList items={experimentListItems} filter />);
+
+  it("web 面是带过滤框与八个固定列头的 experiment 比较表", () => {
+    expect(html).toContain('data-nre-experiment-filter=""');
+    for (const header of ["Experiment", "Model", "Agent", "Avg duration", "Pass rate", "Tokens", "Est. cost", "Result"]) {
+      expect(html).toContain(`>${header}</button>`);
+    }
+    expect(html).toContain('data-nre-experiment-sort="4" class="nre-sort-desc"');
+  });
+
+  it("主行:身份、agent/model、官方两级聚合指标与判定构成", () => {
+    expect(html).toContain("compare/bub");
+    expect(html).toContain("compare/codex");
+    expect(html).toContain("gpt-5.4");
+    expect(html).toContain("50%"); // passRate.display
+    expect(html).toContain("1 passed / 1 failed");
+    expect(html).toContain("memory=true");
+  });
+
+  it("展开到 Eval:同一道题的全部 Attempt 逐条显示", () => {
+    expect(html).toContain("algebra/quadratic");
+    expect(html).toContain('href="#/attempt/@1a4a4a4"');
+    expect(html).toContain('href="#/attempt/@1b5b5b5"');
+    expect(html.match(/algebra\/quadratic/g)).toHaveLength(1);
+    expect(html).toContain("nre-experiment-eval-header");
+    expect(html.match(/nre-experiment-attempt-row/g)).toHaveLength(3);
+    expect(html).toContain("├─");
+    expect(html).toContain("└─");
+  });
+
+  it("零 JS 靠原生 <details>,无 <script>", () => {
+    expect(html).toContain("<details");
+    expect(html).not.toContain("<script");
+  });
+});
+
 describe("跨组件契约", () => {
   it("同一维度键在所有块里同色(稳定散列,与渲染顺序无关)", () => {
     const cls = colorClassForKey("bub");
@@ -269,12 +416,12 @@ describe("跨组件契约", () => {
     const matrix = renderToStaticMarkup(<MetricMatrix data={matrixData} />);
     const board = renderToStaticMarkup(<Scoreboard data={scoreboardData} />);
     const delta = renderToStaticMarkup(<DeltaTable data={deltaData} />);
-    const cases = renderToStaticMarkup(<CaseList data={caseListData} />);
-    for (const html of [table, matrix, board, delta, cases]) {
+    const attempts = renderToStaticMarkup(<AttemptList items={attemptListItems} />);
+    for (const html of [table, matrix, board, delta, attempts]) {
       expect(html).toContain(cls);
     }
     const scatter = renderToStaticMarkup(<MetricScatter data={scatterData} />);
-    expect(scatter).toContain(NRE_PALETTE[colorIndexForKey("bub")]);
+    expect(scatter).toContain(seriesClassForKey("bub"));
   });
 
   it("静态输出不含 <script>:交互只靠 <a>/<details>/CSS", () => {
@@ -285,7 +432,9 @@ describe("跨组件契约", () => {
       renderToStaticMarkup(<Scoreboard data={scoreboardData} />),
       renderToStaticMarkup(<MetricScatter data={scatterData} />),
       renderToStaticMarkup(<DeltaTable data={deltaData} />),
-      renderToStaticMarkup(<CaseList data={caseListData} />),
+      renderToStaticMarkup(<AttemptList items={attemptListItems} />),
+      renderToStaticMarkup(<EvalList items={evalListItems} />),
+      renderToStaticMarkup(<ExperimentList items={experimentListItems} />),
     ].join("");
     expect(all).not.toContain("<script");
   });