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

1粒で3度おいしいStorybook

 1粒で3度おいしいStorybook

Yosuke Kurami

April 19, 2018
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. ҰཻͰ
    ࡾ౓͓͍͍͠
    Storybook

    View full-size slide

  2. Today’s theme:
    Storybook in FOLIO

    View full-size slide

  3. Storybook in FOLIO
    '0-*0ϑϩϯτνʔϜͰͷ4UPSZCPPLར༻ྫ
    ϝϦοτΛ3ͭ঺հ͢ΔΑ
    ಺༰ͷେ൒͸3FBDUʹґଘ͠ͳ͍Α
    ؼͬͨΒ4UPSZCPPL͕࢖͍ͨ͘ͳΔʂ͸ͣ

    View full-size slide

  4. Introduction

    View full-size slide

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

    View full-size slide

  6. Storybook basics
    $PNQPOFOUΧλϩάΛੜ੒͢Δπʔϧ
    ݩʑ͸3FBDU͕λʔήοτ
    ݱࡏ͸༷ʑͳ6*GSBNFXPSLTʹରԠ
    "OHVMBS 7VFKT 3FBDU/BUJWF 1PMZNFS

    View full-size slide

  7. 1. Developer experience

    View full-size slide

  8. Story driven development
    ίϯϙʔωϯτΛ༻ҙ͢Δ
    ίϯϙʔωϯτΛࢀরͨ͠TUPSJFTϑΝΠϧΛ࡞Δ
    QSPQTͷύλʔϯʹԠͯ͡TUPSZΛ૿΍͍ͯ͘͠
    ).3 )PU.PEVMF3FQMBDFNFOU
    ରԠͯ͠ΔͷͰɺ

    αΫαΫը໘Λ։ൃͰ͖Δ

    View full-size slide

  9. Tips: Scaffold your stories
    TUPSJFTͷ਽ܗΛੜ੒͢ΔTDSJQUΛ࡞͓ͬͯ͘ͱศར
    ྫ+49$44.PEVMFTTUPSJFT
    NVTUBDIFNJOJNJTUJORVJSFS౳Λ૊Έ߹ΘͤΔͱ͓
    खܰʹ$-*͕࡞ΕΔ
    ϝϯόʔͷͨΊʹಋೖোน͸গ͠Ͱ΋͓ܰͯ͘͘͠

    View full-size slide

  10. Why do you need component
    catalogue?
    ΞϓϦέʔγϣϯʹ͸ϨΞέʔε΍ҟৗܥ͕͖ͭ΋ͷ
    ௨ৗಈ࡞Ͱ͸౸ୡͰ͖ͳ͍ݟͨ໨
    7JFX͕औΓಘΔঢ়ଶ͸͢΂ͯΞΫηεՄೳͰ͋Δ΂͖
    ϨΞέʔεͷݟͨ໨ΛTUPSZͱͯ͠༻ҙ͢Δ͜ͱͰɺ

    ৗʹ֬ೝՄೳͳঢ়ଶʹ͓ͯ͘͠

    View full-size slide

  11. Stories for abnormal properties
    ࣮ࡍͷΞϓϦέʔγϣϯͰ࠶ݱ͕໘౗ͳύλʔϯୡ

    View full-size slide

  12. 2. Accelerate communication

    View full-size slide

  13. With reviewers
    ʮ7JFX͕औΓಘΔঢ়ଶʹΞΫηεՄೳʯͰ͋Δҙຯ
    6*ίϯϙʔωϯτͷมߋΛ4UPSZCPPLͰ֬ೝՄೳ
    ։ൃऀಉ࢜ͷϨϏϡʔ΋ḿΔ

    View full-size slide

  14. With reviewers
    ֬ೝ͢΂͖TUPSZ͕Ұ໨ྎવ

    View full-size slide

  15. With designers
    4UPSZCPPLΛνʔϜͰڞ༗͢Ε͹ɺ࣮૷ͨ͠6*΁ͷ
    ϑΟʔυόοΫΛಘ΍͍͢
    Ξχϝʔγϣϯ΍άϥϑͳͲɺσβΠϯΧϯϓͷΈ
    Ͱ͸දݱ͕೉͍͠6*ͰޮՌత
    σβΠϯ࣮૷ͷαΠΫϧΛΑΓૣ͘ճ͢͜ͱ͕Ͱ
    ͖Δ

    View full-size slide

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

    View full-size slide

  17. As CircleCI artifacts

    View full-size slide

  18. 3. Improve unit testing

    View full-size slide

  19. BTW,
    How to test view?

    View full-size slide

  20. What should we assert?



    Good evening, {{name}}.


    Bon soir, {{name}}!






    Good evening, {{name}}.


    Bon soir, {{name}}!



    View full-size slide

  21. What should we assert?



    Good evening, {{name}}.


    Bon soir, {{name}}!






    Good evening, {{name}}.


    Bon soir, {{name}}!



    assert.equal(node.textContents, ‘Bon soir Quramy!’)
    assert(node.hasClass(‘fr’))
    assert.equal(node.nodeName, ’div’)

    View full-size slide

  22. Does the test make sense…?
    %0.ͷΞαʔγϣϯ͸ෆໟʹͳΓ͕ͪ
    ʮEJWλάͰ͋Δ͜ͱʯΛ͔֬Ίͯ΋ҙຯͳ͍

    Ͱ΋ʮϨϯμϦϯά͞Εͨ͜ͱʯ͸ݕূ͍ͨ͠
    Կؾͳ͍࢓༷มߋ͕ΞαʔγϣϯΛই͚ͭͯ͠·͏
    ࠷ѱͳͷ͸ςετΛॻ͘श׳͕ແ͘ͳͬͯ͠·͏͜ͱ

    View full-size slide

  23. So, snapshot testing

    View full-size slide

  24. Snapshot testing
    ςετ݁Ռ 4OBQTIPU
    Λʮਖ਼͍݁͠Ռʯͱͯ͠อଘ
    ࣍ճςετ࣌ʹલճ݁Ռͱͷࠩ෼Λݕࠪ͢Δ
    The latest snapshot (DOM String)
    The actual snapshot (DOM String)
    Update if snapshot is accepted
    Assertion

    View full-size slide

  25. 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(Facebook)
    .toJSON();
    expect(tree).toMatchSnapshot();
    });

    View full-size slide

  26. Snapshot with Jest & Storybook
    ެࣜΞυΦϯ4UPSZTIPUT
    ॻ͍ͨTUPSJFT͕ͦͷ··ςετʹͳΔ௒ศརͳࢠ
    ֤TUPSZΛ+FTUͷςετέʔεͱͯ͠ɺ

    ࣗಈతʹεφοϓγϣοτςετΛ࣮ߦͯ͘͠ΕΔ

    View full-size slide

  27. Workflow with Storyshots
    ίϯϙʔωϯτͷग़ྗ %0.
    ʹมߋ͕ͳ͍έʔε
    લճͷεφοϓγϣοτͱࠓճͷεφοϓγϣοτ
    ʹࠩ෼͕ੜ͡ͳ͍ͨΊɺςετ0,

    View full-size slide

  28. Workflow with Storyshots
    ίϯϙʔωϯτͷग़ྗ %0.
    ʹมߋ͕͋Δέʔε
    εφοϓγϣοτʹࠩ෼͕ੜ͡ɺςετࣦഊ͢Δ

    View full-size slide

  29. Workflow with Storyshots
    εφοϓγϣοτϑΝΠϧΛߋ৽ͯ͠ɺ

    13ͷϒϥϯνʹؚΊΔ
    ϨϏϡΞʔ͸ɺมߋ͞ΕͨεφοϓγϣοτϑΝΠϧ
    ΋ؚΊͯϨϏϡʔΛߦ͏
    ҙਤ͠ͳ͍มߋ͕͋Δ৔߹͸ϨϏϡʔͰغ٫͢Δ

    View full-size slide

  30. Tips: Coverage
    4UPSZTIPUT͸7JFXͷΧόϨοδ΋औಘͯ͘͠ΕΔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Appendix
    ࣮͸4UPSZCPPLΛಋೖͨ͠ͷ͸ൺֱత࠷ۙ

    5;

    ͓Αͦϲ݄ͰͲͷఔ౓࢖ΘΕ͍ͯΔ͔
    d4UPSJFT
    $PWFSBHF

    View full-size slide

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

    View full-size slide

  36. Thank you!
    By @Quramy

    View full-size slide