开始吧
- 注释：degit 从 github 拉去代码的工具，在国内范文 github 有问题，需要手动下载这个模板
npx degit chromaui/intro-storybook-vue-template taskbox
- 注释：启动组件开发环境
yarn storybook
简单组件
- 按照组件驱动开发 (CDD)来构建我们的 UI
- 注释：CDD 组件驱动开发，把一个页面分成边界清晰的小组件独立开发，这样更有利于提高可维护性和进行ui测试
- 我们根据上述的草图编写测试所需的状态(state)。然后我们使用 Storybook 模拟数据并独立的构建组件。我们可以“视觉测试”组件在每个状态下的外观。
- 创建 task 组件以及它相关的 story 文件：
src/components/Task.vue 和 src/components/Task.stories.js
- 注释：7.6提供的模板，组件放在
src/stories文件中
- 注释：其中
Task.stories.js用来创建不同测试状态
import Task from './Task.vue';
import { action } from '@storybook/addon-actions';
export default {
component: Task,
//? Our exports that end in "Data" are not stories.
excludeStories: /.*Data$/,
title: 'Task',
//? Our events will be mapped in Storybook UI
argTypes: {
onPinTask: {},
onArchiveTask: {},
},
};
export const actionsData = {
onPinTask: action('pin-task'),
onArchiveTask: action('archive-task'),
};
const Template = args => ({
components: { Task },
setup() {
return { args, ...actionsData };
},
template: '<Task v-bind="args" />',
});
export const Default = Template.bind({});
Default.args = {
task: {
id: '1',
title: 'Test Task',
state: 'TASK_INBOX',
},
};
export const Pinned = Template.bind({});
Pinned.args = {
task: {
...Default.args.task,
state: 'TASK_PINNED',
},
};
export const Archived = Template.bind({});
Archived.args = {
task: {
...Default.args.task,
state: 'TASK_ARCHIVED',
},
};