New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Intro to Storybook
Chapters
  • 開始
  • 簡易元件
  • 複合元件
  • 資料
  • 頁面
  • 部署
  • 進行測試
  • 外掛
  • 總結
  • 參與

外掛

了解整合、使用熱門功能:Control 外掛的方法
此社群翻譯還未更新至最新版本的 Storybook。請透過英文版本的更變,協助我們更新此翻譯。 歡迎發送 Pull Request.

Storybook 有精美的外掛生態系,可以用來加強團隊裡的開發者體驗。在這裡可以翻閱。

如果有仔細看這份教學,應該已經遇到許多外掛,在進行測試章節就有設定過。

各種情況都有適用的外掛,不可能全部都講一遍。我們以最廣泛使用的外掛:Controls 開始。

Controls 是什麼?

Controls 讓設計師和開發者可以輕易地探索元件行為,只要把玩參數即可,不必寫程式。Controls 是 story 旁邊新增的區塊,因此可以即時編輯參數。

Storybook 一出廠就有安裝好的 Controls。毋需額外設定。

外掛讓 Storybook 解鎖新的工作流程

Storybook 是擅長以元件為基礎的開發環境。Controls 外掛讓 Storybook 進化為互動式文件工具。

用 Controls 找出極端案例

有了 Controls,品管工程師、UI 工程師或其他利害關係人就可以把元件推向極致!請想想以下的範例:如果在 Task 增加超大一串字?

喔不!右邊的內容被截斷了!

這就不對勁了啊!文字已經超出 Task 元件的邊界。

Controls 可以快速驗證輸入進元件的內容。這裡用超長字串當作範例,減少察覺 UI 問題得花的工。

現在,在 Task.js 加入樣式,修正超出範圍的問題。

Copy
src/components/Task.js
<input
  type="text"
  value={title}
  readOnly={true}
  placeholder="Input title"
+ style={{ textOverflow: 'ellipsis' }}
/>

這樣好多了。

搞定了!文字達到 Task 範圍的邊界時,會有個帥氣的省略符號。

以另一組 story 避免影響已完成的地方

之後在 Controls 輸入相同字串,就可以手動重現問題。不過,只要展示出這樣的極端案例,就會更輕鬆。回溯測試的涵蓋範圍增加了,也為團隊其他人明確指出元件的限制。

Task.stories.js,以另一組 story 新增長文字的情況:

Copy
src/components/Task.stories.js
const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;

export const LongTitle = Template.bind({});
LongTitle.args = {
  task: {
    ...Default.args.task,
    title: longTitleString,
  },
};

可以重製極端案例後,處理起來就輕鬆了。

如果進行的是視覺測試,只要省略的作法壞了,也會看得到。若沒有加上測試,少見的極端案例很容易忘記!

💡 Controls 可以讓非開發者輕鬆把玩元件和 story。本文所提到的只是一小部分,建議在官方文件深入閱讀。然而,外掛還有更多讓你自訂 Storybook,得以符合工作流程的方法。在打造外掛的指南,就會教你如何自製外掛,讓開發工作流程更有威力。

合併

別忘了在 git 把更新的東西合併!

Keep your code in sync with this chapter. View 9b5a6d7 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
總結
總結已學到的,接著學習更多 Storybook 技巧
✍️ Edit on GitHub – PRs welcome!
Join the community
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI