PJCHENder 未整理筆記

[JS] StoryBook 筆記

2018-11-23

[JS] StoryBook 筆記

@(JavaScript)

Snippets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

export const actions = {
onPinTask: action('onPinTask'),
onArchiveTask: action('onArchiveTask'),
};

storiesOf('TaskList', module)
.addDecorator(story => <div style={{ padding: '3rem' }}>{story()}</div>)
.add('default', () => <TaskList tasks={defaultTasks} {...actions} />)
.add('withPinnedTasks', () => <TaskList tasks={withPinnedTasks} {...actions} />)
.add('loading', () => <TaskList loading tasks={[]} {...actions} />)
.add('empty', () => <TaskList tasks={[]} {...actions} />);
  • action:在 Storybook 中提供 action 這個方法可以對某些事件進行測試。
  • addDecorator(),讓我們可以在 story root 的 DOM 周圍增加一些樣式或屬性,例如 <Provide> 也可以在這裡套用。

掃描二維條碼,分享此文章