Visual Testing in FOLIO-sec

by Yosuke Kurami

Slide 1

Slide 1 text

FOLIOʹը૾ճؼςετΛಋೖ ͨ͠࿩ 2018/8/23 Bonﬁre Frontend#2

Slide 2

Slide 2 text

- ૔ݟ ༸ี a.k.a. @Quramy - WebϑϩϯτΤϯυΤϯδχΞ - ൒೥લʹFOLIOͱ͍͏ωοτূ݊ձࣾʹೖࣾ ࣗݾ঺հ

Slide 3

Slide 3 text

ಥવͰ͕͢

Slide 4

Slide 4 text

ը໘ͷςετॻ͍ͯ·͔͢ʁ

Slide 5

Slide 5 text

- DOMͷΞαʔγϣϯΛॻ͘ͷ͸໘౗ - Ͳ͜·ͰΞαʔτ͢Δ͔ɺ։ൃऀ࣍ୈʹͳΓ͕ͪ - Ξαʔτ͕গͳ͚Ε͹ɺෆ҆ - Ξαʔτ͕ଟ͗͢Ε͹ɺϝϯς͕େม ը໘ςετ͋Δ͋Δ

Slide 6

Slide 6 text

locale: fr ͷͱ͖ɺԿΛνΣοΫ͠·͔͢ʁ  nodeName, textContent, classList શ෦֬ೝ͢Δʁ Ͳ͜·ͰΞαʔτ͠·͔͢ʁ

Good evening, {{name}}.

Bon soir, {{name}}.

Other...

Slide 7

Slide 7 text

ʮલճ੒ޭͨ͠DOMग़ྗʯΛexpectedʹ͢Ε͹ɺ ։ൃऀ͕ΞαʔγϣϯίʔυΛهड़͢Δख͕ؒল͚Δ 4OBQTIPUςετͰָ͕Ͱ͖Δ The latest snapshot (DOM String) The actual snapshot (DOM String) Update if snapshot is accepted Assertion

Slide 8

Slide 8 text

DOMϕʔεsnapshotςετ͸ಋೖ͕༰қɻ ҰํͰɺDOMϕʔεͰ͸ελΠϧͷݕূ͸೉͍͠ɻ CSSͷద༻݁Ռ·ͰؚΊͯࣗಈςετͰ͖Δͱخ͍͠ɻ %0.WT*NBHF

Slide 9

Slide 9 text

͜͜ʹςΩετΛೖΕ·͢ɻ ͻͱͭͷεϥΠυʹ಺༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻ Կ౓΋͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ ͕εϥΠυ࡞ΓͷجຊͰ͢ɻ ը૾࢖ͬͨΒ͑͑΍Μ͚

Slide 10

Slide 10 text

Ͳ͏΍Δͷ͔

Slide 11

Slide 11 text

- UIίϯϙʔωϯτͷΩϟϓνϟը૾ੜ੒ - औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ ը૾ճؼςετʹඞཁͳཁૉ

Slide 12

Slide 12 text

FOLIOͷϑϩϯτΤϯυ͸ React + Reduxߏ੒ɻ Reactίϯϙʔωϯτ։ൃͰ͸StorybookΛར༻ɻ ͜ΕΛ࢖Θͳ͍ख͸ͳ͍ 6*ίϯϙʔωϯτͷΩϟϓνϟը૾ੜ੒

Slide 13

Slide 13 text

4UPSZCPPL

Slide 14

Slide 14 text

- ඳըʹඞཁͳpropsΛ༩͑Ε͹UIΛ࠶ݱͰ͖Δ  Flux / ReduxͷΞʔΩςΫνϟͱ૬ੑ͕Α͍ - ΠϨΪϡϥʔͳέʔεͷݟͨ໨΋؆୯ʹ࡞ΕΔ 4UPSZCPPL͸ίϯϙʔωϯτͷςετπʔϧ

Slide 15

Slide 15 text

Storybook͔ΒΩϟϓνϟը૾Λऔಘ͢Δπʔϧ΋৭ʑ ex: imageshots / roki / storybook-chrome-screenshot, etc… ※ Ωϟϓνϟऔಘʹ͍ͭͯ͸ޙड़ ΩϟϓνϟΛࡱΔͷ΋༰қ

Slide 16

Slide 16 text

https://github.com/reg-viz/reg-suit Λར༻ʢ͋Δҙຯࣗલ ը૾ճؼςετͷͨΊͷCLI - ൺֱର৅ͱ͢ΔGit commitͷಛఆ - ը૾ͷࠩ෼ΛνΣοΫ͠ɺ݁ՌΛHTMLϨϙʔτͱͯ͠ग़ྗ - ൺֱ݁ՌΛAWS S3΍Google Cloud Storage΁Ξοϓϩʔυ - ݁ՌΛSlack΍GitHub΁௨஌ औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ

Slide 17

Slide 17 text

- Reactίϯϙʔωϯτ΍CSSΛมߋͯ͠git push - CIͰStorybookͷ֤story͕Ωϟϓνϟ͞ΕΔ - reg-suitͰը૾ൺֱςετ͕࣮ߦ͞ΕΔ - SlackͱGitLabͷPRʹ௨஌͕ඈͿ ϫʔΫϑϩʔ·ͱΊ

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

͜͜ʹςΩετΛೖΕ·͢ɻ ͻͱͭͷεϥΠυʹ಺༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻ Կ౓΋͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ ͕εϥΠυ࡞ΓͷجຊͰ͢ɻ

Slide 20

Slide 20 text

ݱ৔Ͱͷ࿩

Slide 21

Slide 21 text

ίʔυϕʔεͷมߋʹର͢Δݟͨ໨ͷӨڹ͕Ұ໨ྎવͳͷͰɺ ϒϥϯσΟϯά࡮৽ʢ8/8ʹਖ਼ࣜϦϦʔε͠·ͨ͠ʂʣͰ͸ ໾ʹཱͬͨɻ ҰํͰɺҰےೄͰ͸͍͔ͳ͍՝୊΋ු্ɻ ࣮ࡍʹӡ༻ͯ͠Έͯ

Slide 22

Slide 22 text

ِཅੑޡݕग़(ຊ౰͸ਖ਼͍͠ͷʹɺޡͬͯࠩ෼ൃੜ ͱΈͳ͞ΕΔ)͕ଟൃ - ΞηοτಡΈࠐΈͷ௥͍ӽ͠ - CSSͷద༻ͷ௥͍ӽ͠ ൃੜͨ͠໰୊ᶃεΫγϣ͕ෆ҆ఆ

Slide 23

Slide 23 text

ը૾ͷಡΈࠐΈલʹεΫγϣ͞Εͯϩΰ͕ܽམ ൵͍ࣦ͠ഊྫͦͷ

Slide 24

Slide 24 text

webϑΥϯτͷಡΈࠐΈલʹεΫγϣ͞Εͯจࣈ͕ζϨΔ ൵͍ࣦ͠ഊྫͦͷ

Slide 25

Slide 25 text

PCͱεϚϗ྆ํͷViewportͰεΫγϣΛࡱΔstoryͰɺ Viewportͷมߋʹ෇ਵ͢ΔελΠϦϯάܭࢉ׬ྃલʹΩϟϓ νϟ͞ΕͯɺຊདྷSP༻ͷΩϟϓνϟ͕PC޲͚ͷը૾ʹͳͬ ͯ͠·ͬͨɻ ൵͍ࣦ͠ഊྫͦͷ

Slide 26

Slide 26 text

ൃੜͨ͠໰୊ᶄɿ$*͕௕͍ 1ճpushͯ͠CI͕ճΓ͖Δ·Ͱɺ15෼Ҏ্ඞཁ

Slide 27

Slide 27 text

10෼ఔ౓ΛStorybookΩϟϓνϟऔಘ͕઎Ί͍ͯͨɻ (Ωϟϓνϟର৅ը૾਺͸500ఔ౓) 1ຕ͝ͱʹϒϥ΢βͷϖʔδϩʔυ͕ൃੜ͢Δ࣮૷Ͱ͋ͬͨ ͨΊɺjsͷධՁ࣌ؒ౳͕ਖੵঢ়ଶͰ݁ߏͳϘϦϡʔϜɻ $*͕࣌ؒ௕͍

Slide 28

Slide 28 text

ʮ҆ఆͯ͠ྔ࢈͢ΔʯΛߟ͑ͳ͚Ε͹ɺͷ࿩ɻ ҆ఆੑɾੑೳͷ՝୊ͱ΋ʹʮStorybookͷΩϟϓνϟऔಘʯ ʹىҼ͍ͯ͠ΔͨΊɺ͜ͷ෦෼Λ1͔Βݟ௚͢͜ͱʹɻ (౰ॳ͸طଘͷOSSΛར༻͍ͯͨ͠) ΩϟϓνϟΛࡱΔͷ͸༰қʜ

Slide 29

Slide 29 text

StorybookͷΩϟϓνϟΛࡱΔCLIΛ࡞Γ·ͨ͠ɿ https://github.com/Quramy/zisui ※ ໋໊͸ʮࣗ෼Ͱٵ͍ग़ͧ͢ʂʯͱ͍͏͓ؾ࣋ͪͷද໌Ͱ͢ Α͠ɺࣗ෼Ͱ࡞Ζ͏

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

- ֤ϝτϦΫε(DOMཁૉ਺/Ϧϑϩʔճ਺/ελΠϧ ࠶ܭࢉճ਺)͕ఆৗঢ়ଶʹͳΔ·ͰΩϟϓνϟऔಘ Λ஗Ԇ - CSSΞχϝʔγϣϯͷࣗಈOFF [JTVJͷಛ௃ɿ҆ఆੑ

Slide 32

Slide 32 text

- ෳ਺ىಈͨ͠PuppeteerͰฒྻʹը૾औಘ - Storybookͷը໘ϩʔυ͸1ճͷΈ - storyͷ੾Γସ͑͸ postMessage [JTVJͷಛ௃ɿੑೳ

Slide 33

Slide 33 text

- Ϧιʔε͸ ͰઌಡΈ  ※ ݱঢ়͸preview-head.htmlʹgulpͰهड़ ͦͷଞ҆ఆԽͷͨΊͷϙΠϯτ

Slide 34

Slide 34 text

- StorybookͰը૾ճؼςετΛ͍ͯ͠·͢ - DOMϕʔεͷεφοϓγϣοτςετͱൺ΂Δ ͱɺϋʔυϧ͸ߴ͍͚Ͳɺಋೖ͢ΔՁ஋͸े෼ʹ ͋Δͱࢥ͏ ·ͱΊ

Slide 35

Slide 35 text

No content