UI审查

UI测试可以防止意外回归. 但, 在你船, 你会想邀请开发人员, 设计师, 和pm检查UI以确保其正确.

UI审查创建了PR引入的精确的视觉更改集. 您指派审阅人员,他们可以对不太正确的更改进行评论和请求调整. 可以把它看作是代码审查,但是是针对你的UI.

UI审查

注意: 你必须有一个 相关项目 利用UI审查功能,让chrom可以同步PR数据.

启用

在管理屏幕上为您的项目启用UI审查. 然后去PRs/MRs标签在网页应用程序侧边栏. 你会被提示安装GitHub应用程序或GitLab/Bitbucket都的webhooks.

使UI审查

注意: 你必须 设置CI 这样的话,chroms就可以为PR分支的每次提交运行构建.

找到你的pull请求

导航到侧边栏的PRs链接,找到你的拉/合并请求. 你将登陆活动选项卡,它显示的时间线 构建,积极讨论,并审查状态. 这展示了在准备合并之前需要做什么.

活动选项卡

邀请队友

邀请其他开发人员、设计人员、pm和涉众来帮助评审变更. 这关闭了学科之间的反馈循环,并帮助你找到“这看起来是否正确”的答案?”.

如果你 联系您的项目 到GitHub, Bitbucket都, 或GitLab, 您的项目权限将被同步,以便协作者可以立即登录进行审查. 如果你的 项目链接,使用项目邀请代码添加协作者.

分配审稿人

使用PR活动屏幕上的分配评审员链接,从项目的合作者中选择评审员. 审稿人将通过电子邮件发送到公关屏幕的链接,开始他们的审查.

分配审稿人

从叉子中提取请求

chromic支持跨分支的UI测试和UI审查,但有一些警告. 首先,它只适用于 CI集成 配置也从分支构建PR分支. 其次,你必须暴露你的 project-token 这样叉子就可以用了. 最简单的方法就是把它包含在你的 包.json,例如:

{
  “脚本”: {
    “色”: "chromatic --project-token "
  }
}

如果您使用GitHub以外的CI提供程序,您仍然可以使用环境变量. 只需确保将CI配置为也构建分支. 的 project-token 不授予对项目的访问权限(它只能检索一组严格的不敏感数据), 但它确实允许运行新的构建,这些构建计算到您的快照配额.

审核变更集

PR屏幕包括一个Changeset选项卡,显示PR中引入的所有视觉更改的并排视图. 它将主分支上的UI与基本分支上的UI进行比较. 每次更改,您都将看到应用PR之前和之后的组件故事.

变更集选项卡

为了提示UI改变了什么,打开和关闭突出显示的差异(霓虹绿色).

讨论

审阅人员可以通过每个更改下方的注释框请求对实现的更新. 讨论是围绕变更所代表的特定故事进行的.

变更集的评论

UI的清单

在PR屏幕的底部 活动选项卡 在UI准备合并之前,有一个任务列表必须完成. 如果发现更改,则PR将进入 🟡Pending 状态. 当变更被批准并且检查表项目完成后,PR将被执行 🟢Passed.

  1. 变更必须被批准→分配审阅者或批准自己.
  2. 未完成的讨论必须得到解决→在讨论上单击“解决”.
  3. 所有分配的审阅人员必须批准→单击PR屏幕标签栏中的“批准”.

UI的清单

PR检查“UI审查”

您将得到一个“UI审查”状态检查,每个PR显示UI检查表的状态. 要求入住 GitHub, GitLab, or Bitbucket都 确保团队在合并之前考虑了有影响的更改.

UI审查的PR


下一步:了解如何对可重用组件进行文档化

现在您已经了解了如何在合并之前检查UI更改集, 学习如何使彩色是简单的共享版本和交互式组件文档.

阅读下一章


常见问题

我应该在什么时候要求UI审查?

您可以在任何时候发起UI审查. 然而, 十博体育备用网址建议在开发周期的后期进行, 一旦基线被批准,UI测试是绿色的. 了解更多关于 UI审查.

我可以禁用UI审查,如果我不喜欢使用它?

是的. 转到项目的管理页面,在那里您可以禁用UI审查. 彩色将不再添加状态检查你的PRs为UI审查一旦它被禁用.

commit是用什么来计算UI更改集的?

类似于 GitHub代码评审, 在PR分支和“合并基”commit之间的最新commit的颜色比较, 它是PR分支和创建它的分支之间的共享祖先. 重要的是,chroms在上面列出的两次提交中都运行了构建. 如果您最近启用了CI,并且有想要查看的现有PRs, 确保这两个PR分支都在CI中运行.

这个过程看起来像这样:

  1. 创建一个新的公关 main 添加色彩到CI中
  2. 当一切顺利时合并PR.
  3. 更新您现有的特性PR /最新的 main (从主服务器合并或重基).
友情链接: 1 2 3 4 5 6 7 8 9 10