測試結果面板

給 AI 程式助理跑完測試後的結果面板，或 CI 摘要頁使用。標頭三個計數 chip——通過、失敗、略過——的數字逐位滾動，旁邊是總耗時；下方的分段比例條以 spring 平順增長，仍在執行的部分以斜紋表示。計數 chip 同時是篩選鈕，選中底塊會滑到新的位置。列表依 suite 分組、可摺疊，失敗項展開後顯示錯誤訊息與逐行 diff（- 預期／+ 實際），並提供「只重跑這個」與「複製錯誤」。篩選支援受控／非受控雙模式。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<TestResultsPanel/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/test-results-panel.json

使用

import { TestResultsPanel } from "@/components/ui/test-results-panel";

<TestResultsPanel
  running={false}
  suites={[
    {
      id: "cart",
      name: "購物車計算.test.ts",
      tests: [
        { id: "c1", name: "加入商品後小計正確", status: "pass", duration: 12 },
        {
          id: "c2",
          name: "滿千折百應套用於含運總額",
          status: "fail",
          duration: 18,
          error: { message: "折扣未套用", expected: "950", actual: "1000" },
        },
        { id: "c3", name: "庫存不足時顯示提示", status: "skip" },
      ],
    },
  ]}
  onRerun={(testId) => console.log(testId ? `重跑 ${testId}` : "全部重跑")}
/>

Props

TestSuite

TestCase

TestError

另外具名匯出純函式 diffLines(expected, actual)，回傳 { type: "same" | "removed" | "added"; text }[]，可在別處重用同一套逐行比對。

細節

• 計數逐位滾動：每一位數是一個 overflow-hidden 的欄，0–9 縱向堆疊，以 spring（stiffness／damping）把位移滾到目標數字；位數增加時個位保住自己的滾輪。
• 比例條：通過／失敗／略過／執行中四段的寬度以同一組 spring 補間，執行中的部分用斜紋表示。
• 篩選：計數 chip 為 aria-pressed 按鈕組，再按一次已選中的 chip 回到「全部」；選中底塊以 layoutId 滑動。篩選變化時列以高度與透明度進出。
• 逐行 diff：diffLines 以最長共同子序列（LCS）比對兩段文字，不依賴任何套件；預期行紅底、實際行綠底、相同行灰字。
• 自動展開：defaultExpandFailed 開啟時，第一次出現失敗項會自動展開它；之後全部失敗清空再出現時才會再展開一次，單獨重跑不會一直搶展開。
• 任一測試的 status 仍為 running 也視為執行中，所以只重跑單一測試時不必另外切換 running。
• 外層寫入 --wb-test-results-panel-duration，色彩過渡共用這個時長，可從全域覆寫。

可及性

• 計數 chip 為 aria-pressed 按鈕，aria-label 包含狀態與數量；逐位滾動的數字對輔助科技隱藏
• 執行結束時以 aria-live="polite" 宣告一次「通過 42，失敗 3，略過 1」，執行中的每次跳動不會打擾
• 比例條設為 aria-hidden，資訊已在計數中
• suite 標頭與失敗列為按鈕並設定 aria-expanded／aria-controls；以 ↑／↓／Home／End 在其間移動焦點（roving tabindex），Enter／Space 展開或收合
• diff 每行的 −／+ 符號對輔助科技隱藏，改以 sr-only 的「預期」「實際」朗讀；每列狀態與慢測試也有 sr-only 文字
• 使用者系統開啟「減少動態效果」時，計數直接替換、比例條直接到位、展開直接出現、狀態 icon 不彈跳