Storybook和彩色教程

本教程是一个快速的概述,指导您安装Storybook和集成彩色. 它是为那些还没有使用过Storybook的人准备的.

如果您已经在使用Storybook,那么很好!跳过的 开始 指南. 如果你更喜欢在一个免费的11章教程中学习Storybook,看看 介绍Storybook教程.

半音色的工作原理(简而言之)

彩色出版你的Storybook到一个安全的CDN每次提交. 它使用Storybook中的故事进行可视化回归测试和UI审查.

每次提交都会为每个故事拍摄一个映像快照. 将这些快照与以前的版本进行比较,以识别bug 用户界面测试. 它比较快照 分支机构之间 的生成变更集 UI审查 (类似于代码审查).


什么是Storybook?

Storybook是主导 组件的探险家 对于反应、Angular和Vue. 它提供了一个专用的UI来帮助您可视化, 交互, 并在创建组件状态的同时开发它们(在Storybook中称为“故事”). 当嵌入到您的开发工作流中时, 它是一种省时的工具,用于在一个 组件-driven 时尚. Storybook是开发人员为设计系统构建组件库的必要工具(请阅读十博体育备用网址的 指南).

Storybook

对于视觉测试,Storybook帮助您将视觉测试规范创建为故事. 与您的故事同步,以自动化视觉测试. 如果你改变一个故事,你的色度测试也会改变. 当检测到变色时, 十博体育备用网址通知你, 并引导你去看Storybook中需要复习的故事. 对于UI评论,《十博体育网站》向你展示了由PRs引入的故事的视觉差异.


安装Storybook

Storybook很容易设置. 在你的应用程序中,运行以下命令:

npx -p @Storybook / cli某人init

或者你没有npx,或者你想全局添加cli:

#全局安装cli
npm 安装 -g @Storybook / cli

#添加Storybook到应用程序
某人init

某人init 命令将安装一些重要的开发依赖项, 添加一些npm脚本来启动你的Storybook, 并创建一个 .Storybook 应用程序中的目录.

你现在可以开始你的Storybook:

npm运行Storybook

配置Storybook

很可能您不需要进一步配置Storybook. 但如果你需要:

您可以使用 .Storybook/主要.js 应用所需配置.


设置 .Storybook/预览.js

如果您需要加载自定义样式,十博体育备用网址建议将它们导入 .Storybook/预览.js.

// .Storybook/预览.js

//应用的全局CSS
进口 '../ src /索引.css';

写你的第一个故事

假设您想要测试一个名为 柱状图,它住在 src /组件/直方图.js.

创建一个名为 src /组件/直方图.故事.js 并写如下:

/ / src /组件/直方图.故事.js | src /组件/直方图.故事.ts

进口 反应  '反应';
进口 柱状图  './柱状图';

出口 默认的 {
  组件: 柱状图,
  title: 柱状图.displayName,
};

常量 Template = (arg游戏) => <柱状图 {...arg游戏} />;

出口 常量 加载= Template.绑定({});
加载.arg游戏 = {
  加载: 真正的
};

出口 常量 FullData = Template.绑定({});
FullData.arg游戏 = {
  系列:[
    { x: 1, y: 1 },
    { x: 2, y: 2 },
  ]
};

这将为直方图创建两个故事. 浏览您之前运行的Storybook npm运行Storybook 查看实现. 此伪代码用于演示目的, 你需要调整上面的组件和道具来与你的应用程序相关.

当你满足于你的故事是合理的, 你可以开始你的第一个彩色构建,并设置这些故事的基线:

彩色 ——project-token=

从中获取项目令牌 www.彩色.com 并在那里查看生成的构建,以确保正确地对故事进行了快照. 阅读更多关于 运行测试.


资源

友情链接: 1 2 3 4 5 6 7 8 9 10