可视化测试

我们使用 Loki 和 Storybook 进行可视化测试。Loki 从选定的 stories 中捕获快照，并在 ./loki/references 文件夹中创建 PNG 参考。

本地机器

在本地运行 Loki 测试之前，请确保 Storybook 和 Docker 都在运行。

命令

• 运行可视化测试：yarn test-visual:loki
• 更新快照：yarn test-visual:loki-update
• 生成 HTML 报告：yarn test-visual:loki-report
• 生成并打开报告：yarn test-visual:loki-report-open

CI

可视化测试在拉取请求上自动触发。Loki CI 作业构建 Storybook，捕获新快照，并将它们与参考进行比较。如果存在差异，“Loki 可视化回归测试”检查将失败。

要查看可视化差异报告，请打开失败的作业页面，转到“摘要”部分，然后下载 loki-report 工件。

如果差异是故意的或由偶然错误引起的，请通过将 loki-update 标签添加到拉取请求来更新参考快照。

添加新测试

添加新测试就像添加新的 stories 一样简单。截至目前，我们仅对图表使用可视化测试，但是，您可以将其用于任何其他 stories。确保 loki.config.js 中的 storiesFilter 值包含您希望作为可视化测试的 stories。