CMS设计系统

该设计系统是一套开源的设计和前端开发资源，用于创建符合508条款、响应式和一致的网站。它基于美国网页设计系统，并扩展支持额外的CSS和React组件、实用类和网格框架，使团队能够快速原型设计和构建可访问、响应式、可投入生产的网站。

包

你现在位于一个包含多个NPM包的monorepo的根目录，这些包位于packages目录中。查看每个包中的README.md获取更多详细信息。

名称	描述
CMS设计系统	设计系统的核心CSS、JS和React组件。<br>
Healthcare.gov设计系统	healthcare.gov应用团队使用的设计系统 <br>
Medicare.gov设计系统	medicare.gov应用团队使用的设计系统 <br>
CMSDS文档	基于Gatsby的CMSDS文档网站。

本地运行

本项目使用Yarn进行包管理。Yarn有助于确保每个人使用相同的包版本。如果你还没有安装，请安装Yarn。

注意：当你创建Git提交时，所有暂存的脚本将自动通过ESLint和Prettier运行。如果linter捕获到错误，你的提交将失败。这是一个功能，而不是bug :)

脚本

这些脚本都可以在repo的根目录下运行：

yarn install
- 注意，由于我们使用yarn工作区，我们的设计系统包在根node_modules目录中被符号链接，以便其他包直接使用。这意味着ds-healthcare-gov包始终使用我们本地design-system包的最新版本，以此类推。
yarn build
- 编译所有内容并使其准备好发布
- 构建是必需的，以便在子设计系统包中获得核心包的TypeScript完成功能
yarn build:{core,cmsgov,healthcare,medicare}
- 构建特定品牌的设计系统及其相应的包
yarn build:docs
- 静态构建文档网站的副本
- 然后你可以用yarn serve:docs来提供服务
yarn build:storybook
- 静态构建Storybook的副本到./storybook-static
- 然后你可以用yarn serve:storybook来提供服务
- 对于开发，只需使用yarn storybook
yarn build:examples
- 静态构建./examples中的示例项目副本
- 然后你可以用yarn serve:examples来提供服务
- 或者你可以构建和运行单个示例。更多详情请参见示例目录中的README。
yarn start
- 启动运行文档网站的本地服务器
- 文件更改时重新生成文档
- 在运行start之前，请运行build命令
yarn storybook
- 启动storybook，方便核心包的本地开发
- yarn storybook:react以React而不是Preact启动Storybook
yarn test
- yarn test:unit的别名
yarn test:unit
- 为所有包运行JS单元测试
- yarn test:unit -u更新Jest快照
- yarn test:unit:preact在Preact模式下运行单元测试
- yarn test:unit:wc运行Web组件的单元测试，必须在Preact模式下运行
yarn test:browser
- 使用Playwright运行可访问性和视觉回归测试。详情请参见下面的视觉回归测试部分。这是默认覆盖Storybook故事的基本测试的基本命令，但我们在不同的子命令下有几种不同类型的浏览器测试。
- 注意，此命令将接受Playwright接受的任何参数。
- yarn test:browser -u更新用于视觉回归测试的参考截图。仅在我们预期视觉变化时更新这些。你可以在任何浏览器测试子命令上使用此参数来更新特定类型测试的快照。
- yarn test:browser --no-build将跳过构建测试的先决条件。如果你已经完成并且没有对源代码进行任何更改，这很有用。
- yarn test:browser --grep "Alert"将只运行名称中包含"Alert"的测试。
- yarn test:browser:interaction运行VRT交互测试，以验证组件交互后的视觉状态。
- yarn test:browser:examples为我们的示例项目运行VRT测试。
- yarn test:browser:storybook-docs检查storybook文档中prop表格的回归。
- yarn test:browser:all运行我们所有的视觉回归测试。
yarn lint
- 仅运行测试的linting部分，eslint和stylelint
yarn type-check
- 检查静态TypeScript类型。注意，核心包必须成功构建，才能进行下游类型检查。
yarn deploy-demo
- 在本地构建文档网站并将其部署到GitHub Pages上特定分支的路径。终端将在运行完成后显示demo部署到的URL。
yarn release
- 交互式脚本，用于升级包版本、标记发布提交、起草说明等。阅读我们在Confluence上的发布指南获取更多信息。
- 注意，你需要在git和GitHub上配置GPG，以便它可以签署发布标签。
yarn release:notes
- 交互式脚本，从CMSDS公共仓库的GitHub里程碑生成发布说明草稿和相关票据信息。
yarn release:patch
- 交互式脚本，收集与给定里程碑相关的拉取请求的合并提交，并将它们cherry-pick到当前分支（与发布分支一起使用）

视觉回归测试

我们使用Playwright来测试我们组件的视觉回归。我们有几套视觉回归测试，但我们的主要套件使用Storybook故事作为参考。这些测试将加载故事或其他参考材料，在docker容器内（为了一致性）截图，并将这些截图与之前拍摄并提交到版本控制的截图进行比较。测试可以在Docker容器内或容器外运行，但我们只在Docker容器内获取并提交VRT参考图像，因为在容器外获取会导致不同机器之间的结果不一致。你可能会在容器外运行测试的原因是，如果你正在开发测试本身，并希望以有头模式运行，以便查看具体情况并进行故障排除。请注意，在本地更新视觉回归测试的参考图像需要你登录Docker。

由于测试很多，使用Playwright的--grep参数可以帮助你限制本地运行的测试范围。

使用Docker更新视觉回归测试：

打开Docker应用，确保已登录（Docker Desktop现在需要许可证）。
运行yarn test:browser开始比较组件图像
1. 如果检测到意外的差异，请评估你的更改 - 我们只想在预期出现视觉变化时更新和提交参考。
2. 如果检测到预期的差异，运行yarn test:browser -u，验证更改，然后提交它们。

在Docker外进行开发：

使用--no-docker标志运行任何浏览器测试子命令，如yarn test:browser:examples --no-docker。
如果你从未安装过Playwright，运行yarn test:browser命令会提示你安装它，你需要这样做。我们在Docker中运行时不需要安装它的原因是Docker镜像包含了所有自身的依赖项。
由于在Docker容器外可能会失败，如果你只想看到测试是否正确执行，请传递--ignore-snapshots参数。
你可以使用Playwright的--headed标志关闭无头模式。
Playwright的--debug标志是另一个有用的参数，因为它会暂停并允许你逐步执行测试。
别忘了你可以使用Playwright的--grep参数运行一部分测试。
记住，传递--no-build将跳过重新构建源材料（如Storybook故事），如果你没有对它们进行任何更改，只是更改测试本身。
以下是你可能用来调试下拉菜单测试的命令示例：yarn test:browser:interaction --no-docker --no-build --headed --debug --ignore-snapshots --grep "Dropdown"