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.3k
1粒で3度おいしいStorybook
Yosuke Kurami
April 19, 2018
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
About Type Syntax Proposal
quramy
1
1.3k
GraphQLとの向き合い方2022年版
quramy
16
8.3k
Generate React Component with TypeScript AST
quramy
6
2.2k
tsconfig options best5
quramy
0
150
DIY GraphQL Codegen
quramy
0
150
TypeScript Language Service Plugin backside
quramy
0
190
Extends Developer Experience
quramy
4
2.2k
VRT in Action
quramy
5
7.3k
typescript language update
quramy
0
710
Other Decks in Programming
See All in Programming
Terraform Plan/Apply結果の自動通知
ymmy02
0
280
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
820
Android スキルセットをフル活用して始めるスマートテレビアプリ開発
satsukies
1
200
Jetpack Composeでの画面遷移
iwata_n
0
170
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
1
180
Modern Android Developer ~ 안내서
pluu
1
640
React Nativeアプリを DDDで開発している話
nihemak
0
140
Haskellでオブジェクト指向プログラミング
koheisakata
0
110
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2k
heyにおけるCI/CDの現状と課題
fufuhu
2
560
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
130
RFC 9111: HTTP Caching
jxck
0
160
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
506
37k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
510
A Modern Web Designer's Workflow
chriscoyier
689
180k
Faster Mobile Websites
deanohume
294
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
For a Future-Friendly Web
brad_frost
166
7.4k
Statistics for Hackers
jakevdp
781
210k
Raft: Consensus for Rubyists
vanstee
126
5.4k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
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