3月31日日记【material-ui】【storybook】

在使用material-ui 作为布局的项目中使用storybook 测试组件

1. 安装create-react-app

npx create-react-app my-app

2.安装 material-ui相关库类

yarn add material-ui/core material-ui/icons

3.安装storybook
facebook 官方指南 里面有详细介绍，反正我写的也是不对的。

以上便配置好了相关环境，但是由于material-ui组件会使用withstyles 封装组件，而storybook原生必须要使用addDecorator给组件添加修饰器，显然这里面有很多值得研究的地方，而我并没有那么多时间去研究，所以直接google了一下，解决方法是安装相关插件： storybook-addon-material-ui。

yarn add storybook-addon-material-ui  // 一步到位

使用方法：

/// Login.stories.js
import React from 'react'
import {storiesOf, addDecorator} from '@storybook/react';
import {muiTheme} from 'storybook-addon-material-ui';

import Login from './index.js';

storiesOf("Login", module)
    .addDecorator(muiTheme())
    .add("Login Component Test", () => (
        <Login />
))

实际上storybook可以添加一个插件，而我们伟大的一线开发者已经为我们写好相应的插件，直接使用即可。

关于SPA 开发流程：

1. 组件分离开发。
2. 组件分离测试。
3. 组件组合页面。
4. 组件页面测试。
5. redux内容编写。
6. fake datas 编写。
7. routers 编写。
8. 测试。