UI_DEV_Environment 之 StoryBook

寫在前面

因爲本文主要集中關注與工具使用，因此不可能徹底介紹工具的全部功能，因此要想了解更多，能夠本身去各自官方網站上查看。

• github
• examples

什麼是UI開發環境

UI開發環境專一於用戶體驗設計師與開發人員之間的協做（UI dev environments），爲UI組件的快速迭代提供了綜合環境。

通俗點來說，目前主要應用於個項目中組件的測試、開發以及文檔編寫中，這樣設計人員和開發人員能夠經過組件預覽的方式來指定設計規範。

目前可使用的工具主要有：Storybook、React Styleguidist、Compositor和MDX。本文會重點介紹storybook以及React Styleguidist。

各工具之間的比較概括

Tools	React/Angular/Vue	上手程度	主題自定義	附加功能(插件)	測試環境
Storybook	✔️ / ✔️ / ✔️	中等	簡便、顏色變化	豐富(源碼/viewport/backgrounds...)	提供了各類測試案例
React Styleguidist	✔️ / X / X	簡單	簡便、顏色結構變化	無	Enzyme、jest
Compositor	✔️ / X / X	簡單	暫不支持	無	Enzyme、jest
MDX	✔️ / X / ✔️(Beta)	簡單	簡便、能夠徹底自定義	通常(remark/rehype )	Enzyme、jest

StoryBook

storybook的界面清新脫俗，至少我的認爲仍是比較好看的，像下面這樣：

同時，storybook能夠更換主題，具體能夠戳這裏，更換的只是配色系統，結構方面改動的話可能有點困難。

storybook 能夠支持多種語言，包括react,vue,angular...等主流前端庫。

storybook中的一個重要概念就是story，翻譯過來就是故事，不過能夠通俗的理解爲一個組件的一種狀態。固然這個狀態是你本身添加的，若是添加的故事越多，同時也就代表了你編寫的組件複雜度就很高了，這時候你就能夠考慮是否要拆分組件來使得組件的功能變得單一純粹了，這樣組件維護的成本纔會變少，同時可用性也會更加高。

簡單的入門

下面以一個React小項目來練手，若是對Vue以及Angular感興趣的童鞋，能夠去官網瞭解一下，官方網站上有大量的例子以及新手教程。

Step 1: 建立一個項目名爲stroybook, 同時建立package.json文件

mkdir stroybook
cd storybook
yarn init

填寫你要初始化的信息，下一步。

Step2: 安裝依賴

yarn add @storybook/react react react-dom babel-loader @babel/core --dev

Step3: 添加npm腳本

{
"scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "serve": "yarn build-storybook && npx http-server ./storybook-static"
  }
}

• storybook: 運行這個腳本會起一個本地服務器，監聽在6006端口
• build-storybook: 經過webpack進行打包，生成靜態文件
• serve: 使用node服務運行靜態文件

Step4: 建立配置文件，讓storybook可以找到stories

import { configure } from '@storybook/react';

// 手動添加全部stories
function loadStories() {
  require('../stories/index.js');
  // You can require as many stories as you need.
}

/**
* 或者匹配指定文件夾下的全部stories
*

function loadStories() {
  const req = require.context('../stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}

*/

configure(loadStories, module);

Step5: 編寫組件故事

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';

storiesOf('Button', module)
  .add('with text', () => (
    <Button>Hello Button</Button>
  ))
  .add('with emoji', () => (
    <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
  ));

Step6: Run

yarn storybook

// open browser
localhost:6006

你就能夠看到文章上面的界面了。

組件測試

storybook在UI測試方面也提供了多種角度的測試方式：

• 內容結構測試：內容結構測試主要關注點在組件中的內容是否存在，好比內容是否包含hello world等字段，是否存在一個button等等
• 交互測試：交互測試主要是測試用戶的點擊、輸入事件，會對結果形成的一個影響，好比點擊了一個按鈕以後，是否是會跳轉到一個新的頁面
• 視覺(樣式)測試: 主要比較的是變動發生前和發生以後的images的變化，多是像素級的
• 手動測試

結構測試

在storybook中使用jest's snapshot testing做爲組件的結構測試，使用的原理爲：

比較變動以前的html結構和變動以後的html結構，若是不一樣，要麼是如今的變動影響的，這時候咱們只須要更新爲最新的結構就能夠了，反之就是出現了未知的錯誤形成的，就須要進行排查了。

使用storybook的結構測試也很簡單，只須要兩步配置便可：

• 安裝依賴

yarn add --dev @storybook/addon-storyshots

• 在測試文件中初始化，例如storyshots.test.js

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({ /* configuration options */ });

而後運行yarn test便可。

交互測試

一般使用Enzyme來測試用戶的輸入以及點擊事件。同時storybook也繼承了相關的插件Specs Addon

這裏就很少作演示了，詳情能夠戳上面的連接。

自動化的視覺測試

視覺測試主要的優勢就是一目瞭然，若是視覺測試可以作得很是容易，那麼甚至能夠取代一些比較脆弱的測試，好比判斷是否有哪些css聲明，html標籤等等，若是視覺上看起來和變動先後保持一致，這些測試咱們都是能夠不關注的。

然而視覺測試最大的難點就是人類的對像素的感知度不一樣，機器相對人眼來講，能夠識別的像素辨識度會高出許多，不少看上去相同的頁面實際上是發生了變化，可是人的肉眼可能看不出來而已。

關於視覺測試，有一些比較知名的庫能夠進行參考：

• Applitools
• Chromatic
• Happo
• Loki
• Percy
• Screener
• StoryShots with its seamless integration with jest-image-snapshot

更多請參看這裏

強大的插件

storybook集成了許多優秀的插件，這些插件都是能夠自由安裝和卸載的，下面主要介紹幾款實用的插件：

注1：storybook的絕大部分插件須要首先安裝依賴，而後在.storybook/addons中進行註冊，最後使用.storybook/config進行參數配置。固然也有例外，能夠直接在config中進行引用，具體使用參看文檔。

注2：storybook提供了不少有用的插件，這裏就不一一列舉的了，能夠本身去Addons瞭解

• console

一般咱們使用command + alt + I(Mac)以及F12(Windows)打開chrome的控制檯來查看打印的日誌，而這個插件可使咱們不須要這麼作，直接在Actions面板中就能夠查看打印的日誌，而且能夠篩選出本身關心的日誌，能夠分爲如下幾步

// install dependence
yarn add --dev @storybook/addon-console

// .storybook/config.js
import { setConsoleOptions } from '@storybook/addon-console';

setConsoleOptions({
  panelExclude: [],
});

// or write in story singly
// wrap your stories with specified addon options.
import { storiesOf } from '@storybook/react';
import { withConsole } from '@storybook/addon-console';

storiesOf('withConsole', module)
 .addDecorator((storyFn, context) => withConsole()(storyFn)(context))
 .add('with Log', () => <Button onClick={() => console.log('Data:', 1, 3, 4)}>Log Button</Button>)
 .add('with Warning', () => <Button onClick={() => console.warn('Data:', 1, 3, 4)}>Warn Button</Button>)
 .add('with Error', () => <Button onClick={() => console.error('Test Error')}>Error Button</Button>)
 .add('with Uncatched Error', () =>
   <Button onClick={() => console.log('Data:', T.buu.foo)}>Throw Button</Button>
 )
 // Action Logger Panel:
 // withConsole/with Log: ["Data:", 1, 3, 4]
 // withConsole/with Warning warn: ["Data:", 1, 3, 4]
 // withConsole/with Error error: ["Test Error"]
 // withConsole/with Uncatched Error error: ["Uncaught TypeError: Cannot read property 'foo' of undefined", "http://localhost:9009/static/preview.bundle.js", 51180, 42, Object]

• source

source插件主要會在工具欄面板中展現出咱們當前所在的story源碼

具體配置以下：

yarn add @storybook/addon-storysource --dev

而後在addon中註冊

import '@storybook/addon-storysource/register';

最後在.storybook中添加webpack.config.js，給每一個story添加decorator

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  });

  return config;
};

• knobs

安裝了knobs插件以後，能夠在控制面板中編輯React組件中的props，同時knobs插件也會容許修改在story中編寫的臨時變量。

yarn add @storybook/addon-knobs --dev

import '@storybook/addon-knobs/register';

import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';

const stories = storiesOf('Storybook Knobs', module);

// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);

// Knobs for React props
stories.add('with a button', () => (
  <button disabled={boolean('Disabled', false)} >
    {text('Label', 'Hello Storybook')}
  </button>
));

• notes
• backgrounds
• viewport
• spec
• react-live-edit

寫在最後

storybook做爲一個組件開發工具來講，總體上手難度以及接入到已有項目中的成本並非特別高。

同時對組件的預覽、文檔生成、測試以及功能編輯等等都提供了很好的支持，因此對於想相似於開發公共組件庫的團隊來講storybook是一個比較好的選擇。