skyux 设计托盘
这个寄存器包含了用于SKY UX建筑风格的设计符. 信使被存储在'src/deign-tokens.yml'中 此软件包发布后将包含以下文件:
|-- scss
| |-- variables.scss (A sass variable file containing the design tokens)
| |-- mixins.scss (A file containing convenience mixins)
|-- yaml
| |-- design-tokens.yaml (The original yaml file containing the SKY UX design tokens)
|-- json
| |-- design-tokens.json (A JSON representation of the design tokens)
要在本地创建这些结果文件, 克隆此寄存器, 运行 npm install 接下来 npm run build。 。 。 .
更新快取测试
如果看到显示测试是"过时"的测试失败,则意味着输出的活字符号已经改变而快照测试失败. 要更新快照, 运行 vitest run --update 并审查对快照文件的修改,以确保这些修改都是预期的。 如果你没有 vitest 安装、 运行 npm i -g vitest。 。 。 .
以本地预览测试
查看本地产品 SPA 变化,确保您有 .env.local 文件并运行命令 npm run dev。本地预览将应用到与该预览相同的域中的所有SPA VITE_LAUNCH_URL 定义 .env.local当您编辑和保存文件时,预览会刷新.
如果你没有 .env.local 档案,联系团队中的人 帮助设置它.
要在本地预览的 SPA 中添加额外的 CSS, 请创建文件 src/dev/extra-styles.css。此样式表将添加到 SPA 中,并可用于测试目的覆盖样式。 这是一个普通的 CSS 文件,所以角选择器喜欢 :ng-deep 财务报告和审定财务报表 :host 而SCSS的筑巢语法不会奏效. !important 并将有助于测试.
视觉测试
src/visual-tests 是一个没有框架的页面,可以演示每个公共类别和自定义的自建属性 bundles/public-api-styles.json 财务报告和审定财务报表 bundles/public-api-tokens.json,由已建成的CSS所命名. 它用于视觉回归快照.
运行 npm run visual-tests 用于构建软件包并服务页面,或 npm run build:visual-tests 作为静态文件在 dist-visual-tests/。 。 。 .
查询参数选择要渲染的内容 :
| 参数 | 数值 | 默认 |
|---|---|---|
page | borders, (中文(简体) ), colors, (中文(简体) ), elevation, (中文(简体) ), spacing, (中文(简体) ), typography | 所有页面 |
theme | default, (中文(简体) ), modern | default |
mode | light, (中文(简体) ), dark | light |
brand | base, (中文(简体) ), blackbaud | base |
spacing | standard, (中文(简体) ), compact | standard |
mode, (中文(简体) ), brand,以及 spacing 仅适用于现代主题。 譬如说, ?page=colors&theme=modern&mode=dark&brand=blackbaud。 。 。 .
一旦页面打开, body 获得一个 data-ready 属性,因此可以等待快照工具 body[data-ready]。 。 。 .
珀西的快照
运行 npm run test:visual-tests 并使用 Playwright 来获取 珀西 佩尔 每一主题的每一页的简介:
defaultmodern内light财务报告和审定财务报表dark模式,与base财务报告和审定财务报表blackbaud品牌
compact 间距没有被快照, 因为还没有任何符号随它而改变 .
没有 PERCY_TOKEN 环境变量, Percy 被跳过 测试只检查每个页面。 设定 PERCY_TOKEN 将快照发给Percy.
这个 Visual tests GitHub 工作流程运行于每个拉动请求和推到 master 并释放分枝。 推力创建了比对拉动请求的基线. 从叉子上取出请求 无法进入信使,所以他们没有珀西.