1粒で3度おいしいStorybook

Transcript

1. ҰཻͰ ࡾ౓͓͍͍͠ Storybook
2. Today’s theme: Storybook in FOLIO
3. Storybook in FOLIO  '0-*0ϑϩϯτνʔϜͰͷ4UPSZCPPLར༻ྫ
    ϝϦοτΛ
   3ͭ঺հ͢ΔΑ
    ಺༰ͷେ൒͸3FBDUʹґଘ͠ͳ͍Α
    ؼͬͨΒ4UPSZCPPL͕࢖͍ͨ͘ͳΔʂ͸ͣ
4. Introduction
5. Storybook is a development environment for UI components. https://github.com/storybooks/storybook
6. Storybook basics  $PNQPOFOU
   ΧλϩάΛੜ੒͢Δπʔϧ
    ݩʑ͸3FBDU͕λʔήοτ
    ݱࡏ͸༷ʑͳ6*
   GSBNFXPSLTʹରԠ
    "OHVMBS
   7VFKT
   3FBDU
   /BUJWF
   1PMZNFS
8. 1. Developer experience
9. Story driven development  ίϯϙʔωϯτΛ༻ҙ͢Δ
    ίϯϙʔωϯτΛࢀরͨ͠TUPSJFTϑΝΠϧΛ࡞Δ
    QSPQTͷύλʔϯʹԠͯ͡TUPSZΛ૿΍͍ͯ͘͠
    ).3 )PU
   .PEVMF
   3FQMBDFNFOU ରԠͯ͠ΔͷͰɺ
 αΫαΫը໘Λ։ൃͰ͖Δ
10. Demo
11. Tips: Scaffold your stories  TUPSJFTͷ਽ܗΛੜ੒͢ΔTDSJQUΛ࡞͓ͬͯ͘ͱศར
     ྫ
    +49
    
    $44
    .PEVMFT
    
    TUPSJFT
     NVTUBDIFNJOJNJTUJORVJSFS
    ౳Λ૊Έ߹ΘͤΔͱ͓ खܰʹ$-*͕࡞ΕΔ
     ϝϯόʔͷͨΊʹಋೖোน͸গ͠Ͱ΋͓ܰͯ͘͘͠
12. Why do you need component catalogue?  ΞϓϦέʔγϣϯʹ͸ϨΞέʔε΍ҟৗܥ͕͖ͭ΋ͷ
     ௨ৗಈ࡞Ͱ͸౸ୡͰ͖ͳ͍ݟͨ໨
     7JFX͕औΓಘΔঢ়ଶ͸͢΂ͯΞΫηεՄೳͰ͋Δ΂͖
     ϨΞέʔεͷݟͨ໨ΛTUPSZͱͯ͠༻ҙ͢Δ͜ͱͰɺ
 ৗʹ֬ೝՄೳͳঢ়ଶʹ͓ͯ͘͠
13. Stories for abnormal properties ࣮ࡍͷΞϓϦέʔγϣϯͰ࠶ݱ͕໘౗ͳύλʔϯୡ
14. 2. Accelerate communication
15. With reviewers  ʮ7JFX͕औΓಘΔঢ়ଶʹΞΫηεՄೳʯͰ͋Δҙຯ
     6*ίϯϙʔωϯτͷมߋΛ4UPSZCPPLͰ֬ೝՄೳ
     ։ൃऀಉ࢜ͷϨϏϡʔ΋ḿΔ
16. With reviewers ֬ೝ͢΂͖TUPSZ͕Ұ໨ྎવ
17. With designers  4UPSZCPPLΛνʔϜͰڞ༗͢Ε͹ɺ࣮૷ͨ͠6*΁ͷ ϑΟʔυόοΫΛಘ΍͍͢
     Ξχϝʔγϣϯ΍άϥϑͳͲɺσβΠϯΧϯϓͷΈ Ͱ͸දݱ͕೉͍͠6*ͰޮՌత
     σβΠϯ
    
    ࣮૷ͷαΠΫϧΛΑΓૣ͘ճ͢͜ͱ͕Ͱ ͖Δ
18. Tips: How to deploy Storybook  build-storybook ίϚϯυͰ੩తαΠτग़ྗ
     (JU)VC
    1BHFT΍4ɺ$JSDMF$*
    "SUJGBDUTʹΞοϓϩʔυ # .circleci/config.yml
 - run: yarn run build-storybook -o /tmp/storybook - store_artifacts: path: /tmp/storybook
19. As CircleCI artifacts
20. 3. Improve unit testing
21. BTW, How to test view?
22. 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>
23. 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’)
24. Does the test make sense…?  %0.ͷΞαʔγϣϯ͸ෆໟʹͳΓ͕ͪ
     ʮEJWλάͰ͋Δ͜ͱʯΛ͔֬Ίͯ΋ҙຯͳ͍
 Ͱ΋ʮϨϯμϦϯά͞Εͨ͜ͱʯ͸ݕূ͍ͨ͠
     Կؾͳ͍࢓༷มߋ͕ΞαʔγϣϯΛই͚ͭͯ͠·͏
     ࠷ѱͳͷ͸ςετΛॻ͘श׳͕ແ͘ͳͬͯ͠·͏͜ͱ
25. So, snapshot testing
26. Snapshot testing  ςετ݁Ռ 4OBQTIPU Λʮਖ਼͍݁͠Ռʯͱͯ͠อଘ
     ࣍ճςετ࣌ʹલճ݁Ռͱͷࠩ෼Λݕࠪ͢Δ The latest snapshot (DOM String) The actual snapshot (DOM String) Update if snapshot is accepted Assertion
27. 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(); });
28. Snapshot with Jest & Storybook  ެࣜΞυΦϯ
    4UPSZTIPUT
     ॻ͍ͨ
    TUPSJFT
    ͕ͦͷ··ςετʹͳΔ௒ศརͳࢠ
     ֤TUPSZΛ+FTUͷςετέʔεͱͯ͠ɺ
 ࣗಈతʹεφοϓγϣοτςετΛ࣮ߦͯ͘͠ΕΔ
29. Workflow with Storyshots  ίϯϙʔωϯτͷग़ྗ %0. ʹมߋ͕ͳ͍έʔε
     લճͷεφοϓγϣοτͱࠓճͷεφοϓγϣοτ ʹࠩ෼͕ੜ͡ͳ͍ͨΊɺςετ0,
30. Workflow with Storyshots  ίϯϙʔωϯτͷग़ྗ %0. ʹมߋ͕͋Δέʔε
     εφοϓγϣοτʹࠩ෼͕ੜ͡ɺςετࣦഊ͢Δ
31. Workflow with Storyshots  εφοϓγϣοτϑΝΠϧΛߋ৽ͯ͠ɺ
 13ͷϒϥϯνʹؚΊΔ
     ϨϏϡΞʔ͸ɺมߋ͞ΕͨεφοϓγϣοτϑΝΠϧ ΋ؚΊͯϨϏϡʔΛߦ͏
     ҙਤ͠ͳ͍มߋ͕͋Δ৔߹͸ϨϏϡʔͰغ٫͢Δ
32. Tips: Coverage  4UPSZTIPUT͸7JFXͷΧόϨοδ΋औಘͯ͘͠ΕΔ
33. Furthermore: Screenshot test  4UPSZCPPLͰը૾ճؼςετ '0-*0Ͱ͸ະணख
     4UPSZCPPLͱSFHTVJUͰؾܰʹ͸͡ΊΔ7JTVBM
    3FHSFTTJPO
    5FTUJOH
 https://blog.wadackel.me/2018/storybook-chrome-screenshot-with-reg-viz/
     4DSFFOTIPU
    UFTUJOH
    XJUI
    3FBDU
    BOE
    4UPSZCPPL
 https://medium.com/bleeding-edge/screenshot-testing-with-react-and- storybook-19ab7e49ec92
34. Summary
35. Storybook provides  ίϯϙʔωϯτΛαΫαΫ࡞ΕΔ؀ڥ
     ࣮ࡍʹʮಈ͘ʯ6*ΛνʔϜશମʹڞ༗
     ͦͷ··7JFXͷςετج൫ͱͯ͠࢖͑Δ
36. What’s important  ಋೖʹΑΔෆརӹ͕Ͳ͜ʹ΋ແ͍
     ʮςετॻ͚ʂʯͰॻ͍ͯ͘ΕΕ͹ۤ࿑͸͠ͳ͍
     ؾ͍ͮͨΒςετʹͳͬͯɺଞͷϝϯόʔ΋تΜͰ͘ ΕΔͬͯɺ࠷ߴ͡Όͳ͍Ͱ͔͢ʁ
37. Appendix  ࣮͸4UPSZCPPLΛಋೖͨ͠ͷ͸ൺֱత࠷ۙ
 5;
     ͓Αͦϲ݄ͰͲͷఔ౓࢖ΘΕ͍ͯΔ͔
     d
    4UPSJFT
     $PWFSBHF
    
    
    
38. Storybook is a development environment for UI components. https://github.com/storybooks/storybook
39. Thank you! By @Quramy