v1.3.0: 修复验收链路（iframe 真实渲染+跨帧断言）、基座焦点环、契约第二批 15 个
回归通过率此前不可信：run-tests.ps1 抽取演示页 body 时剥离全部 <script>， 而 79 个 H5 演示页的 DOM 全由内联脚本渲染，且测试页从未引用 frameworks/<组件>.css —— 断言跑在空 DOM + 无组件样式上，v1.2.0 的 75.1% 属结构性误报。 Fixed — 验收链路 - 测试页改为 iframe 加载真实演示页（_template.html），_runtime.js 跨帧在真实 渲染结果上断言：帧内 getComputedStyle/styleSheets/outerHTML，用例自动标注 + 帧内描边，结果 postMessage 上报 - 标注改为容器下钻（.row/.demo-block → 首个含 ≥2 有效子元素的容器，最多 6 层） - 新增 N/A 语义：静态组件键盘/ARIA 记 skip 而非失败；对比度与 token 检查限定 在被测组件区，页头文档文字不计 - 通过率分母改为 pass/(pass+fail)，tools/run-regression.mjs 与收集器同口径 Added — 设计系统 - 基座 :focus-visible 统一焦点环（colors_and_type.css）。--au-color-focus-ring 此前只定义未消费，79 个组件样式仅 20 个自带 focus 规则 —— 一次性消除 66 页失败 - tests/_collect.html：零依赖浏览器批量回归收集器（并发 iframe + 汇总） - tests/_index_template.html：测试总览页模板外置，读数来自 data.json Added — 契约第二批（展示类 15 个） - tree/collapse/calendar/carousel/imagepreview/qrcode/countdown/watermark/ cardlist/treetable/timelinelist/steplist/chartpanel/dashboardcard/employeecard - 逐份从规格原文（组件2/4/7/9.txt）提炼，含 dims/variants/anatomy/structure/ usageHints/doNotInvent/unknowns；契约化 21 → 36/79 Changed - run-tests.ps1 重写：删除失效的快照抽取（占位符替换早已不匹配模板），改生成 iframe 版测试页；输出 WriteAllText 无 BOM；保持 ASCII-only，中文移入 UTF-8 模板 - 回归基线：960 断言 / 794 通过 / 85.1% / 11 页全通过 / N/A 27 - CHANGELOG/TESTING/改造清单同步；测试总览页与首页通过率联动 验证：浏览器全量 79 页收集器跑通两次，基线一致；详情页契约章节 （含 doNotInvent/unknowns）、chip、首页「通过率 85.1%」、changelog v1.3.0 实测通过
This commit is contained in:
aurora-admin
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>测试总览 — Aurora Admin 组件库</title>
|
||||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
|
||||
<link rel="stylesheet" href="../site/style.css">
|
||||
<style>
|
||||
body { margin: 0; font-family: var(--au-font-family); color: var(--au-color-text-body); background: var(--au-color-page-bg); }
|
||||
.shell { max-width: 1280px; margin: 0 auto; padding: 24px; }
|
||||
.shell h1 { margin: 0 0 4px; font-size: 24px; color: var(--au-color-text-title); }
|
||||
.shell h1 a { font-size: 13px; margin-left: 8px; color: var(--au-color-brand); }
|
||||
.shell .desc { margin: 0 0 20px; color: var(--au-color-text-secondary); font-size: 14px; }
|
||||
.summary { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
|
||||
.pill { height: 28px; padding: 0 12px; border-radius: var(--au-radius-base); background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); display: inline-flex; align-items: center; font-family: var(--au-font-family-num); font-size: 13px; color: var(--au-color-text-body); text-decoration: none; }
|
||||
.pill strong { margin-right: 4px; color: var(--au-color-brand); }
|
||||
.pill.link:hover { border-color: var(--au-color-brand); color: var(--au-color-brand); }
|
||||
.cat { margin: 24px 0 12px; }
|
||||
.cat h2 { margin: 0 0 10px; font-size: 16px; color: var(--au-color-text-title); }
|
||||
.cat h2 .en { font-family: var(--au-font-family-num); font-size: 12px; color: var(--au-color-text-secondary); margin-left: 8px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
|
||||
.card { background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: var(--au-radius-medium); padding: 12px; transition: border-color .15s, box-shadow .15s; cursor: pointer; text-decoration: none; display: block; }
|
||||
.card:hover { border-color: var(--au-color-brand); box-shadow: var(--au-shadow-low); }
|
||||
.card .zh { font-size: 14px; color: var(--au-color-text-title); }
|
||||
.card .en { font-family: var(--au-font-family-num); font-size: 11px; color: var(--au-color-text-secondary); }
|
||||
.card .badge { float: right; font-family: var(--au-font-family-num); font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--au-color-table-header-bg); color: var(--au-color-text-secondary); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<h1>测试总览 <a href="../site/index.html">← 文档站</a></h1>
|
||||
<p class="desc">每个组件一份独立测试页：iframe 加载真实 H5 演示页，断言在帧内真实渲染结果上运行（用例由 <code>_runtime.js</code> 运行期标注）。</p>
|
||||
<div class="summary">
|
||||
<span class="pill"><strong>__COUNT__</strong> 个组件测试</span>
|
||||
<span class="pill" id="report-rate">最近回归：—</span>
|
||||
<a class="pill link" href="_collect.html">▶ 批量回归收集器</a>
|
||||
</div>
|
||||
<div id="cats"><p class="desc">正在读取 site/data.json…</p></div>
|
||||
</div>
|
||||
|
||||
<script src="../site/logger.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
var CAT = [
|
||||
['general', '通用', 'general'],
|
||||
['navigation', '导航', 'navigation'],
|
||||
['input', '数据录入', 'input'],
|
||||
['display', '数据展示', 'display'],
|
||||
['feedback', '反馈', 'feedback'],
|
||||
['system', '工具与系统', 'system']
|
||||
];
|
||||
|
||||
function card(c) {
|
||||
var a = document.createElement('a');
|
||||
a.className = 'card';
|
||||
a.setAttribute('data-slug', c.slug);
|
||||
a.href = c.slug + '.html';
|
||||
var en = document.createElement('div'); en.className = 'en'; en.textContent = c.name;
|
||||
var zh = document.createElement('div'); zh.className = 'zh'; zh.textContent = c.name.split(' ')[0];
|
||||
if (c.contractRef) {
|
||||
var b = document.createElement('span'); b.className = 'badge'; b.textContent = '契约';
|
||||
zh.appendChild(b);
|
||||
}
|
||||
a.appendChild(zh); a.appendChild(en);
|
||||
return a;
|
||||
}
|
||||
|
||||
function render(components) {
|
||||
var host = document.getElementById('cats');
|
||||
host.innerHTML = '';
|
||||
CAT.forEach(function (row) {
|
||||
var slugCat = row[0], zh = row[1], en = row[2];
|
||||
var items = components.filter(function (c) { return (c.category || 'general') === slugCat; });
|
||||
if (!items.length) return;
|
||||
var wrap = document.createElement('div'); wrap.className = 'cat';
|
||||
var h = document.createElement('h2');
|
||||
h.textContent = zh;
|
||||
var s = document.createElement('span'); s.className = 'en'; s.textContent = en;
|
||||
h.appendChild(s);
|
||||
var grid = document.createElement('div'); grid.className = 'grid';
|
||||
items.forEach(function (c) { grid.appendChild(card(c)); });
|
||||
wrap.appendChild(h); wrap.appendChild(grid);
|
||||
host.appendChild(wrap);
|
||||
});
|
||||
}
|
||||
|
||||
fetch('../site/data.json', { cache: 'no-store' })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (d) { render(d.components || []); })
|
||||
.catch(function () {
|
||||
document.getElementById('cats').innerHTML = '<p class="desc">读取 site/data.json 失败：请先跑 build-site.ps1，并通过 dev-server 访问本页。</p>';
|
||||
});
|
||||
|
||||
fetch('report.json', { cache: 'no-store' })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (rep) {
|
||||
var el = document.getElementById('report-rate');
|
||||
if (el) el.textContent = '最近回归：' + rep.passRate + '%（' + rep.generated + '）';
|
||||
})
|
||||
.catch(function () {});
|
||||
|
||||
if (window.aaLogger) {
|
||||
var s = window.aaLogger.summary();
|
||||
var p = document.createElement('span');
|
||||
p.className = 'pill';
|
||||
p.textContent = '本机记录：通过 ' + s.testPass + ' / 失败 ' + s.testFail;
|
||||
document.querySelector('.summary').appendChild(p);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user