Archify测试体系全景82个测试文件如何守护5种渲染器【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify是一个面向 AI Agent 的开源画图 Skill能把architecture架构、workflow流程、sequence时序、dataflow数据流和lifecycle生命周期五种图渲染成自带动效、可离线打开、一键导出的自包含 HTML。而让这份「JSON → 像素」过程稳定可信的正是藏在archify/test/下的一整套测试体系。本文带你全景看懂它如何守护 5 种渲染器。一、测试体系概览它到底守护什么Archify 的核心承诺是同样的 JSON 输入永远产出完全一致的 HTML 输出。渲染器是确定性的这为测试提供了天然抓手。整套体系围绕三层展开渲染层五种图各自一条render-mode.mjs渲染管线位于 archify/renderers/。契约层JSON 必须符合 JSON Schema非法输入必须报错。体验层HTML 在真实浏览器里的交互、动画、导出、离线字体等表现。 标题里的「82」是某个时点的文件快照。如今 archify/test/ 目录已扩展出109 个.test.mjs文件其中 13 个是浏览器级测试其余 96 个运行在 Node 环境。二、5 种渲染器 5 条测试主线每一种图都有自己的布局规则测试就逐条守护它们渲染器守护的重点代表性测试Architecture组件网格、尺寸约束grid.test.mjsWorkflow泳道列、路由、端点扩散automatic-port-spread.test.mjsSequence泳道列宽自适应sequence-column-fit.test.mjsDataflow布局与图元规则layout-rules.test.mjsLifecycle状态间距 ≥ 10px 等硬约束vertical-edge.test.mjs三、黄金文件机制确定性输出的终极校验整个体系的「锚点」是 golden.mjs。它不依赖任何测试框架逻辑直白现场渲染一遍必须和仓库里已提交的示例 HTML 一字不差。GOLDEN 清单 里恰好列着 5 种渲染器每个都要同时比对「开发目录」和「打包进 zip 的目录」两份产物[workflow, agent-tool-call.workflow.json, workflow-agent-tool-call-rendered.html], [sequence, cache-miss-request.sequence.json, sequence-cache-miss-request.html], [dataflow, product-analytics.dataflow.json, dataflow-product-analytics.html], [lifecycle, agent-run.lifecycle.json, lifecycle-agent-run.html], [architecture, web-app.architecture.json, web-app-rendered.html],比对前会先归一化换行符兼容 Windows 的 CRLF 与 Unix 的 LF所以「提交换行」不会误报。只要有人不小心改了渲染逻辑导致输出漂移这里立刻红灯。四、Schema 负向测试坏输入必须优雅失败好测试不只验证「对的能过」更要验证「错的会崩」。golden 脚本内置了expectFailure负向用例故意把合法 JSON 改坏断言渲染器必须以带路径前缀的信息报错退出例如卡片dot取到枚举外的pink→ 报错要带/cards/0/dot组件size出现0或负数 → 报错指向/components/0/size/0生命周期两个状态挤在同一列 → 提示「间距不足 10px」。这保证 AI 写错 JSON 时用户看到的是能定位到具体字段的清晰提示而不是空白页或静默成功。五、浏览器级测试把 HTML 真正跑起来HTML 是「活」的动画、悬停、镜头、导出、离线字体都得在真实引擎里验证。13 个*-browser.test.mjs正是干这个的。它们通过 helpers/desktop-browser.mjs 用 CDPChrome DevTools 协议驱动无头 Chrome甚至先注入一段脚本采集hover / fine / pointer能力确保「桌面指针」模拟不偏。而解析 SVG/HTML 结构时则交给 helpers/xml.mjs——用parse5saxes精确抽出每一张svg含srcdoc内嵌图供断言几何与图元数量。六、一键运行从契约检查到全量回归入口是 scripts/run-tests.mjs它扫描archify/test/下所有.test.mjs按字母排序后交给node --test并按 Node 版本自动开启--test-concurrency2并发。而npm test在跑它之前会先串起一串「前置闸门」check:viewer → check:brand-marks → check:validators → check:release-identity → golden → run-tests也就是说模板是否过期、品牌图标是否新鲜、校验器是否同步、版本号是否对齐都会先被拦下任何一环失守都不会进入渲染回归。七、总结Archify 用「黄金文件 Schema 负向 浏览器实测」三层防线把 5 种渲染器的确定性、合法性与体验一一锁死。109 个测试文件看似繁多实则各司其职让 AI 每次画出的图都能被验证、可复现、可交付。这套体系也正是普通用户放心把架构图交给 Agent 的底气所在。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Archify测试体系全景：82个测试文件如何守护5种渲染器
Archify测试体系全景82个测试文件如何守护5种渲染器【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify是一个面向 AI Agent 的开源画图 Skill能把architecture架构、workflow流程、sequence时序、dataflow数据流和lifecycle生命周期五种图渲染成自带动效、可离线打开、一键导出的自包含 HTML。而让这份「JSON → 像素」过程稳定可信的正是藏在archify/test/下的一整套测试体系。本文带你全景看懂它如何守护 5 种渲染器。一、测试体系概览它到底守护什么Archify 的核心承诺是同样的 JSON 输入永远产出完全一致的 HTML 输出。渲染器是确定性的这为测试提供了天然抓手。整套体系围绕三层展开渲染层五种图各自一条render-mode.mjs渲染管线位于 archify/renderers/。契约层JSON 必须符合 JSON Schema非法输入必须报错。体验层HTML 在真实浏览器里的交互、动画、导出、离线字体等表现。 标题里的「82」是某个时点的文件快照。如今 archify/test/ 目录已扩展出109 个.test.mjs文件其中 13 个是浏览器级测试其余 96 个运行在 Node 环境。二、5 种渲染器 5 条测试主线每一种图都有自己的布局规则测试就逐条守护它们渲染器守护的重点代表性测试Architecture组件网格、尺寸约束grid.test.mjsWorkflow泳道列、路由、端点扩散automatic-port-spread.test.mjsSequence泳道列宽自适应sequence-column-fit.test.mjsDataflow布局与图元规则layout-rules.test.mjsLifecycle状态间距 ≥ 10px 等硬约束vertical-edge.test.mjs三、黄金文件机制确定性输出的终极校验整个体系的「锚点」是 golden.mjs。它不依赖任何测试框架逻辑直白现场渲染一遍必须和仓库里已提交的示例 HTML 一字不差。GOLDEN 清单 里恰好列着 5 种渲染器每个都要同时比对「开发目录」和「打包进 zip 的目录」两份产物[workflow, agent-tool-call.workflow.json, workflow-agent-tool-call-rendered.html], [sequence, cache-miss-request.sequence.json, sequence-cache-miss-request.html], [dataflow, product-analytics.dataflow.json, dataflow-product-analytics.html], [lifecycle, agent-run.lifecycle.json, lifecycle-agent-run.html], [architecture, web-app.architecture.json, web-app-rendered.html],比对前会先归一化换行符兼容 Windows 的 CRLF 与 Unix 的 LF所以「提交换行」不会误报。只要有人不小心改了渲染逻辑导致输出漂移这里立刻红灯。四、Schema 负向测试坏输入必须优雅失败好测试不只验证「对的能过」更要验证「错的会崩」。golden 脚本内置了expectFailure负向用例故意把合法 JSON 改坏断言渲染器必须以带路径前缀的信息报错退出例如卡片dot取到枚举外的pink→ 报错要带/cards/0/dot组件size出现0或负数 → 报错指向/components/0/size/0生命周期两个状态挤在同一列 → 提示「间距不足 10px」。这保证 AI 写错 JSON 时用户看到的是能定位到具体字段的清晰提示而不是空白页或静默成功。五、浏览器级测试把 HTML 真正跑起来HTML 是「活」的动画、悬停、镜头、导出、离线字体都得在真实引擎里验证。13 个*-browser.test.mjs正是干这个的。它们通过 helpers/desktop-browser.mjs 用 CDPChrome DevTools 协议驱动无头 Chrome甚至先注入一段脚本采集hover / fine / pointer能力确保「桌面指针」模拟不偏。而解析 SVG/HTML 结构时则交给 helpers/xml.mjs——用parse5saxes精确抽出每一张svg含srcdoc内嵌图供断言几何与图元数量。六、一键运行从契约检查到全量回归入口是 scripts/run-tests.mjs它扫描archify/test/下所有.test.mjs按字母排序后交给node --test并按 Node 版本自动开启--test-concurrency2并发。而npm test在跑它之前会先串起一串「前置闸门」check:viewer → check:brand-marks → check:validators → check:release-identity → golden → run-tests也就是说模板是否过期、品牌图标是否新鲜、校验器是否同步、版本号是否对齐都会先被拦下任何一环失守都不会进入渲染回归。七、总结Archify 用「黄金文件 Schema 负向 浏览器实测」三层防线把 5 种渲染器的确定性、合法性与体验一一锁死。109 个测试文件看似繁多实则各司其职让 AI 每次画出的图都能被验证、可复现、可交付。这套体系也正是普通用户放心把架构图交给 Agent 的底气所在。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考