1粒で3度おいしいStorybook

Slide 1

Slide 1 text

ҰཻͰ ࡾ౓͓͍͍͠ Storybook

Slide 2

Slide 2 text

Today’s theme: Storybook in FOLIO

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Introduction

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

1. Developer experience

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Demo

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

2. Accelerate communication

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

As CircleCI artifacts

Slide 20

Slide 20 text

3. Improve unit testing

Slide 21

Slide 21 text

BTW, How to test view?

Slide 22

Slide 22 text

What should we assert?

Good evening, {{name}}.

Bon soir, {{name}}!

Good evening, {{name}}.

Bon soir, {{name}}!

Slide 23

Slide 23 text

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’)

Slide 24

Slide 24 text

Does the test make sense…? %0.ͷΞαʔγϣϯ͸ෆໟʹͳΓ͕ͪ ʮEJWλάͰ͋Δ͜ͱʯΛ͔֬Ίͯ΋ҙຯͳ͍  Ͱ΋ʮϨϯμϦϯά͞Εͨ͜ͱʯ͸ݕূ͍ͨ͠ Կؾͳ͍࢓༷มߋ͕ΞαʔγϣϯΛই͚ͭͯ͠·͏ ࠷ѱͳͷ͸ςετΛॻ͘श׳͕ແ͘ͳͬͯ͠·͏͜ͱ

Slide 25

Slide 25 text

So, snapshot testing

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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(); });

Slide 28

Slide 28 text

Snapshot with Jest & Storybook ެࣜΞυΦϯ4UPSZTIPUT ॻ͍ͨTUPSJFT͕ͦͷ··ςετʹͳΔ௒ศརͳࢠ ֤TUPSZΛ+FTUͷςετέʔεͱͯ͠ɺ  ࣗಈతʹεφοϓγϣοτςετΛ࣮ߦͯ͘͠ΕΔ

Slide 29

Slide 29 text

Workﬂow with Storyshots ίϯϙʔωϯτͷग़ྗ %0. ʹมߋ͕ͳ͍έʔε લճͷεφοϓγϣοτͱࠓճͷεφοϓγϣοτ ʹࠩ෼͕ੜ͡ͳ͍ͨΊɺςετ0,

Slide 30

Slide 30 text

Workﬂow with Storyshots ίϯϙʔωϯτͷग़ྗ %0. ʹมߋ͕͋Δέʔε εφοϓγϣοτʹࠩ෼͕ੜ͡ɺςετࣦഊ͢Δ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Summary

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Thank you! By @Quramy