响应式UI组件测试

测试多个视图并设置捕获延迟

加载
多米尼克阮
@domyen

从简单的按钮到响应式屏幕 任何东西 可以是一个组件. 今天发布的版本提供了两个彩色api,这两个api开启了无限的测试可能性:

  • 📱 视窗 允许您为测试响应性UI组件分配屏幕大小. 对于那些使用组件组装复杂功能和屏幕的人来说,它很有用.
  • 延迟 允许您在固定的时间内延迟快照. 如果你有JavaScript触发的动画(e.g.,情态动词,“animate in”)或需要等待第三方功能.

故事书4上的彩色背.0’s 新的参数API 提供无缝的、对未来友好的开发人员体验. 更新 storybook-chromatic 包以获得新特性. 十博体育备用网址的目标是用更少的工作扩展UI测试覆盖率.

响应式ui的视图

开发人员创建的UI组件可以响应任何设备宽度. 新的视窗参数帮助您定义一个或多个viewport大小来捕获组件.

您可以将视图分配给一个故事、组件,甚至是整个故事书. 下面是一个为故事添加视图的例子:

MyComponent storiesOf(“添加”模块)
   .add(‘story’, () => , {
   彩色:{视口:[320,1200]},
});

这告诉彩色捕捉你的组件在320px和1200px视口宽度. 没有多余的导入或外部依赖.

在这里了解更多关于使用视图的信息→

延迟快照

组件有时会在渲染时触发自定义交互. 例如,javascript驱动的动画. 通过延迟,你可以让《十博体育备用网址》等待一段固定的时间,让你的故事进入预期状态. 这里有一个故事延迟设置的例子:

MyComponent storiesOf(“添加”模块)
   .add(‘story’, () => , {
   彩色:{延迟:300},
});

这将延迟快照300毫秒,而您的组件正在得到展示.

在这里阅读更多关于使用延迟的信息→

Bug修复和改进

🔄加载资源的智能重试
在极少数情况下,图片和字体等资源无法加载,导致快照不正确. 十博体育备用网址现在可以智能地重试,给资产更多加载的机会.

📦 storybook-chromatic
这个包改进了对Windows的支持, 修复了Node v6, and can capture stories with element

📚支持 ——storybook-build-dir (β)
如果你已经在制作你的故事书的副本, 使用这个上传您构建的故事书到十博体育备用网址的服务器. 这意味着您的构建将更快,甚至更可靠.

彩色故事书-由故事书维护者

十博体育备用网址的目标是在Storybook中实现无缝的自动化可视化测试. 每一个版本, 十博体育备用网址构建功能来扩展你的UI测试覆盖范围,同时也节省你的时间和避免麻烦. 构建这么简单的产品是相当复杂的.

今天就试一试吧

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4402个开发者,还在增加

十博体育备用网址正在招聘!

加入故事书和彩色的团队. 构建成千上万开发人员在生产环境中使用的工具. Remote-first.

视图的工作

受欢迎的文章

快照历史 & 调整的通知

查看快照基线如何随时间变化
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10