Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
1粒で3度おいしいStorybook
Yosuke Kurami
April 19, 2018
Programming
4
5.5k
1粒で3度おいしいStorybook
Yosuke Kurami
April 19, 2018
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
T3 Stack and TypeScript ecosystem
quramy
3
760
apollo client / react / esm
quramy
1
40
Apollo Client useFragment
quramy
1
120
About Type Syntax Proposal
quramy
1
1.6k
GraphQLとの向き合い方2022年版
quramy
20
9.9k
Generate React Component with TypeScript AST
quramy
6
2.4k
tsconfig options best5
quramy
0
180
DIY GraphQL Codegen
quramy
0
210
TypeScript Language Service Plugin backside
quramy
0
230
Other Decks in Programming
See All in Programming
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
180
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
300
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
300
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
410
OSSから学んだPR Descriptionの書き方
fugakkbn
4
130
子育てとEMと転職と
_atsushisakai
1
410
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
260
Swift Expression Macros: a practical introduction
kishikawakatsumi
2
730
What's new in Shopware 6.5
shyim
0
110
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
240
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
9
2.3k
Use KMM to call the API of the National Tax Agency
akkeylab
0
300
Featured
See All Featured
Designing with Data
zakiwarfel
91
4.2k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
Building Your Own Lightsaber
phodgson
96
4.9k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Facilitating Awesome Meetings
lara
33
4.6k
Teambox: Starting and Learning
jrom
124
7.9k
Transcript
ҰཻͰ ࡾ͓͍͍͠ Storybook
Today’s theme: Storybook in FOLIO
Storybook in FOLIO '0-*0ϑϩϯτνʔϜͰͷ4UPSZCPPLར༻ྫ ϝϦοτΛ3ͭհ͢ΔΑ ༰ͷେ3FBDUʹґଘ͠ͳ͍Α
ؼͬͨΒ4UPSZCPPL͕͍ͨ͘ͳΔʂͣ
Introduction
Storybook is a development environment for UI components. https://github.com/storybooks/storybook
Storybook basics $PNQPOFOUΧλϩάΛੜ͢Δπʔϧ ݩʑ3FBDU͕λʔήοτ ݱࡏ༷ʑͳ6*GSBNFXPSLTʹରԠ "OHVMBS
7VFKT 3FBDU/BUJWF 1PMZNFS
None
1. Developer experience
Story driven development ίϯϙʔωϯτΛ༻ҙ͢Δ ίϯϙʔωϯτΛࢀরͨ͠TUPSJFTϑΝΠϧΛ࡞Δ QSPQTͷύλʔϯʹԠͯ͡TUPSZΛ૿͍ͯ͘͠
).3 )PU.PEVMF3FQMBDFNFOU ରԠͯ͠ΔͷͰɺ αΫαΫը໘Λ։ൃͰ͖Δ
Demo
Tips: Scaffold your stories TUPSJFTͷܗΛੜ͢ΔTDSJQUΛ࡞͓ͬͯ͘ͱศར ྫ+49$44.PEVMFTTUPSJFT NVTUBDIFNJOJNJTUJORVJSFSΛΈ߹ΘͤΔͱ͓
खܰʹ$-*͕࡞ΕΔ ϝϯόʔͷͨΊʹಋೖোนগ͠Ͱ͓ܰͯ͘͘͠
Why do you need component catalogue? ΞϓϦέʔγϣϯʹϨΞέʔεҟৗܥ͕͖ͭͷ ௨ৗಈ࡞Ͱ౸ୡͰ͖ͳ͍ݟͨ
7JFX͕औΓಘΔঢ়ଶͯ͢ΞΫηεՄೳͰ͋Δ͖ ϨΞέʔεͷݟͨΛTUPSZͱͯ͠༻ҙ͢Δ͜ͱͰɺ ৗʹ֬ೝՄೳͳঢ়ଶʹ͓ͯ͘͠
Stories for abnormal properties ࣮ࡍͷΞϓϦέʔγϣϯͰ࠶ݱ͕໘ͳύλʔϯୡ
2. Accelerate communication
With reviewers ʮ7JFX͕औΓಘΔঢ়ଶʹΞΫηεՄೳʯͰ͋Δҙຯ 6*ίϯϙʔωϯτͷมߋΛ4UPSZCPPLͰ֬ೝՄೳ ։ൃऀಉ࢜ͷϨϏϡʔḿΔ
With reviewers ֬ೝ͖͢TUPSZ͕Ұྎવ
With designers 4UPSZCPPLΛνʔϜͰڞ༗͢Εɺ࣮ͨ͠6*ͷ ϑΟʔυόοΫΛಘ͍͢ ΞχϝʔγϣϯάϥϑͳͲɺσβΠϯΧϯϓͷΈ Ͱදݱ͕͍͠6*ͰޮՌత σβΠϯ࣮ͷαΠΫϧΛΑΓૣ͘ճ͢͜ͱ͕Ͱ
͖Δ
Tips: How to deploy Storybook build-storybook ίϚϯυͰ੩తαΠτग़ྗ (JU)VC1BHFT4ɺ$JSDMF$*"SUJGBDUTʹΞοϓϩʔυ
# .circleci/config.yml - run: yarn run build-storybook -o /tmp/storybook - store_artifacts: path: /tmp/storybook
As CircleCI artifacts
3. Improve unit testing
BTW, How to test view?
What should we assert? <template> <div class="greeting"> <div v-if="lang==='en'"> Good
evening, {{name}}. </div> <div class="fr" v-if="lang==='fr'"> Bon soir, {{name}}! </div> </div> </template> <template> <div class="greeting"> <div v-if="lang==='en'"> Good evening, {{name}}. </div> <div class="fr" v-if="lang==='fr'"> Bon soir, {{name}}! </div> </div> </template>
What should we assert? <template> <div class="greeting"> <div v-if="lang==='en'"> Good
evening, {{name}}. </div> <div class="fr" v-if="lang==='fr'"> Bon soir, {{name}}! </div> </div> </template> <template> <div class="greeting"> <div v-if="lang==='en'"> Good evening, {{name}}. </div> <div class="fr" v-if="lang==='fr'"> Bon soir, {{name}}! </div> </div> </template> assert.equal(node.textContents, ‘Bon soir Quramy!’) assert(node.hasClass(‘fr’)) assert.equal(node.nodeName, ’div’)
Does the test make sense…? %0.ͷΞαʔγϣϯෆໟʹͳΓ͕ͪ ʮEJWλάͰ͋Δ͜ͱʯΛ͔֬Ίͯҙຯͳ͍ ͰʮϨϯμϦϯά͞Εͨ͜ͱʯݕূ͍ͨ͠
Կؾͳ͍༷มߋ͕ΞαʔγϣϯΛই͚ͭͯ͠·͏ ࠷ѱͳͷςετΛॻ͘श׳͕ແ͘ͳͬͯ͠·͏͜ͱ
So, snapshot testing
Snapshot testing ςετ݁Ռ 4OBQTIPU Λʮਖ਼͍݁͠Ռʯͱͯ͠อଘ ࣍ճςετ࣌ʹલճ݁ՌͱͷࠩΛݕࠪ͢Δ The latest
snapshot (DOM String) The actual snapshot (DOM String) Update if snapshot is accepted Assertion
Snapshot with Jest import React from 'react'; import Link from
'../Link.react'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); });
Snapshot with Jest & Storybook ެࣜΞυΦϯ4UPSZTIPUT ॻ͍ͨTUPSJFT͕ͦͷ··ςετʹͳΔศརͳࢠ
֤TUPSZΛ+FTUͷςετέʔεͱͯ͠ɺ ࣗಈతʹεφοϓγϣοτςετΛ࣮ߦͯ͘͠ΕΔ
Workflow with Storyshots ίϯϙʔωϯτͷग़ྗ %0. ʹมߋ͕ͳ͍έʔε લճͷεφοϓγϣοτͱࠓճͷεφοϓγϣοτ ʹ͕ࠩੜ͡ͳ͍ͨΊɺςετ0,
Workflow with Storyshots ίϯϙʔωϯτͷग़ྗ %0. ʹมߋ͕͋Δέʔε εφοϓγϣοτʹ͕ࠩੜ͡ɺςετࣦഊ͢Δ
Workflow with Storyshots εφοϓγϣοτϑΝΠϧΛߋ৽ͯ͠ɺ 13ͷϒϥϯνʹؚΊΔ ϨϏϡΞʔɺมߋ͞ΕͨεφοϓγϣοτϑΝΠϧ ؚΊͯϨϏϡʔΛߦ͏
ҙਤ͠ͳ͍มߋ͕͋Δ߹ϨϏϡʔͰغ٫͢Δ
Tips: Coverage 4UPSZTIPUT7JFXͷΧόϨοδऔಘͯ͘͠ΕΔ
Furthermore: Screenshot test 4UPSZCPPLͰը૾ճؼςετ '0-*0Ͱະணख 4UPSZCPPLͱSFHTVJUͰؾܰʹ͡ΊΔ7JTVBM 3FHSFTTJPO5FTUJOH
https://blog.wadackel.me/2018/storybook-chrome-screenshot-with-reg-viz/ 4DSFFOTIPUUFTUJOHXJUI3FBDUBOE4UPSZCPPL https://medium.com/bleeding-edge/screenshot-testing-with-react-and- storybook-19ab7e49ec92
Summary
Storybook provides ίϯϙʔωϯτΛαΫαΫ࡞ΕΔڥ ࣮ࡍʹʮಈ͘ʯ6*ΛνʔϜશମʹڞ༗ ͦͷ··7JFXͷςετج൫ͱͯ͑͠Δ
What’s important ಋೖʹΑΔෆརӹ͕Ͳ͜ʹແ͍ ʮςετॻ͚ʂʯͰॻ͍ͯ͘ΕΕۤ࿑͠ͳ͍ ؾ͍ͮͨΒςετʹͳͬͯɺଞͷϝϯόʔتΜͰ͘ ΕΔͬͯɺ࠷ߴ͡Όͳ͍Ͱ͔͢ʁ
Appendix ࣮4UPSZCPPLΛಋೖͨ͠ͷൺֱత࠷ۙ 5; ͓Αͦϲ݄ͰͲͷఔΘΕ͍ͯΔ͔ d4UPSJFT
$PWFSBHF
Storybook is a development environment for UI components. https://github.com/storybooks/storybook
Thank you! By @Quramy