Upgrade to Pro — share decks privately, control downloads, hide ads and more …

1粒で3度おいしいStorybook

 1粒で3度おいしいStorybook

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

April 19, 2018
Tweet

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.PEVMF3FQMBDFNFOU ରԠͯ͠ΔͷͰɺ
 αΫαΫը໘Λ։ൃͰ͖Δ
  10. Demo

  11. Tips: Scaffold your stories  TUPSJFTͷ਽ܗΛੜ੒͢ΔTDSJQUΛ࡞͓ͬͯ͘ͱศར  ྫ+49$44.PEVMFTTUPSJFT  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)VC1BHFT΍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 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
  34. Summary

  35. Storybook provides  ίϯϙʔωϯτΛαΫαΫ࡞ΕΔ؀ڥ  ࣮ࡍʹʮಈ͘ʯ6*ΛνʔϜશମʹڞ༗  ͦͷ··7JFXͷςετج൫ͱͯ͠࢖͑Δ

  36. What’s important  ಋೖʹΑΔෆརӹ͕Ͳ͜ʹ΋ແ͍  ʮςετॻ͚ʂʯͰॻ͍ͯ͘ΕΕ͹ۤ࿑͸͠ͳ͍  ؾ͍ͮͨΒςετʹͳͬͯɺଞͷϝϯόʔ΋تΜͰ͘ ΕΔͬͯɺ࠷ߴ͡Όͳ͍Ͱ͔͢ʁ

  37. Appendix  ࣮͸4UPSZCPPLΛಋೖͨ͠ͷ͸ൺֱత࠷ۙ
 5;   ͓Αͦϲ݄ͰͲͷఔ౓࢖ΘΕ͍ͯΔ͔  d4UPSJFT 

    $PWFSBHF
  38. Storybook is a development environment for UI components. https://github.com/storybooks/storybook

  39. Thank you! By @Quramy