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
7. None

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