Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Visual Testing in FOLIO-sec
Search
Yosuke Kurami
August 23, 2018
Programming
3
2k
Visual Testing in FOLIO-sec
Yosuke Kurami
August 23, 2018
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
Next.js App Router
quramy
14
2.3k
Fragment Composition of GraphQL
quramy
14
1.7k
reg-viz VRT tools
quramy
4
900
NoInfer
quramy
0
120
Precondition with schema directives
quramy
0
1.1k
T3 Stack and TypeScript ecosystem
quramy
4
1.7k
apollo client / react / esm
quramy
1
210
Apollo Client useFragment
quramy
1
630
About Type Syntax Proposal
quramy
1
1.9k
Other Decks in Programming
See All in Programming
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
Dev ContainersとTestcontainers
bells17
3
100
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
1
220
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.4k
Implementing Design Systems in Swift
seyfoyun
2
530
Deep Dive into React Stream/Serialize
mugi_uno
4
880
An adventure of Happy Eyeballs
coe401_
1
310
The Design of Everyday APIs - PyCon 2024
roguelynn
1
240
TypeScriptの型とパフォーマンス (TSKaigi 2024)
ypresto
14
5.2k
Featured
See All Featured
Designing with Data
zakiwarfel
96
4.8k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Designing for humans not robots
tammielis
247
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
A better future with KSS
kneath
231
16k
What's new in Ruby 2.0
geeforr
338
31k
Agile that works and the tools we love
rasmusluckow
325
20k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
How GitHub (no longer) Works
holman
305
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Transcript
FOLIOʹը૾ճؼςετΛಋೖ ͨ͠ 2018/8/23 Bonfire Frontend#2
- ݟ ༸ี a.k.a. @Quramy - WebϑϩϯτΤϯυΤϯδχΞ - લʹFOLIOͱ͍͏ωοτূ݊ձࣾʹೖࣾ ࣗݾհ
ಥવͰ͕͢
ը໘ͷςετॻ͍ͯ·͔͢ʁ
- DOMͷΞαʔγϣϯΛॻ͘ͷ໘ - Ͳ͜·ͰΞαʔτ͢Δ͔ɺ։ൃऀ࣍ୈʹͳΓ͕ͪ - Ξαʔτ͕গͳ͚Εɺෆ҆ - Ξαʔτ͕ଟ͗͢Εɺϝϯς͕େม ը໘ςετ͋Δ͋Δ
locale: fr ͷͱ͖ɺԿΛνΣοΫ͠·͔͢ʁ nodeName, textContent, classList શ෦֬ೝ͢Δʁ Ͳ͜·ͰΞαʔτ͠·͔͢ʁ <template> <div
class="greeting"> <div v-if="locale === 'en'"> Good evening, {{name}}. </div> <div v-else-if="locale === 'fr'"> Bon soir, {{name}}. </div> <div v-else>Other...</div> </div> </template>
ʮલճޭͨ͠DOMग़ྗʯΛexpectedʹ͢Εɺ ։ൃऀ͕ΞαʔγϣϯίʔυΛهड़͢Δख͕ؒল͚Δ 4OBQTIPUςετͰָ͕Ͱ͖Δ The latest snapshot (DOM String) The actual
snapshot (DOM String) Update if snapshot is accepted Assertion
DOMϕʔεsnapshotςετಋೖ͕༰қɻ ҰํͰɺDOMϕʔεͰελΠϧͷݕূ͍͠ɻ CSSͷద༻݁Ռ·ͰؚΊͯࣗಈςετͰ͖Δͱخ͍͠ɻ %0.WT*NBHF
͜͜ʹςΩετΛೖΕ·͢ɻ ͻͱͭͷεϥΠυʹ༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻ Կ͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ ͕εϥΠυ࡞ΓͷجຊͰ͢ɻ ը૾ͬͨΒ͑͑Μ͚
Ͳ͏Δͷ͔
- UIίϯϙʔωϯτͷΩϟϓνϟը૾ੜ - औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ ը૾ճؼςετʹඞཁͳཁૉ
FOLIOͷϑϩϯτΤϯυ React + Reduxߏɻ Reactίϯϙʔωϯτ։ൃͰStorybookΛར༻ɻ ͜ΕΛΘͳ͍खͳ͍ 6*ίϯϙʔωϯτͷΩϟϓνϟը૾ੜ
4UPSZCPPL
- ඳըʹඞཁͳpropsΛ༩͑ΕUIΛ࠶ݱͰ͖Δ Flux / ReduxͷΞʔΩςΫνϟͱ૬ੑ͕Α͍ - ΠϨΪϡϥʔͳέʔεͷݟͨ؆୯ʹ࡞ΕΔ 4UPSZCPPLίϯϙʔωϯτͷςετπʔϧ
Storybook͔ΒΩϟϓνϟը૾Λऔಘ͢Δπʔϧ৭ʑ ex: imageshots / roki / storybook-chrome-screenshot, etc… ※ Ωϟϓνϟऔಘʹ͍ͭͯޙड़
ΩϟϓνϟΛࡱΔͷ༰қ
https://github.com/reg-viz/reg-suit Λར༻ʢ͋Δҙຯࣗલ ը૾ճؼςετͷͨΊͷCLI - ൺֱରͱ͢ΔGit commitͷಛఆ - ը૾ͷࠩΛνΣοΫ͠ɺ݁ՌΛHTMLϨϙʔτͱͯ͠ग़ྗ - ൺֱ݁ՌΛAWS
S3Google Cloud StorageΞοϓϩʔυ - ݁ՌΛSlackGitHub௨ औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ
- ReactίϯϙʔωϯτCSSΛมߋͯ͠git push - CIͰStorybookͷ֤story͕Ωϟϓνϟ͞ΕΔ - reg-suitͰը૾ൺֱςετ͕࣮ߦ͞ΕΔ - SlackͱGitLabͷPRʹ௨͕ඈͿ ϫʔΫϑϩʔ·ͱΊ
None
͜͜ʹςΩετΛೖΕ·͢ɻ ͻͱͭͷεϥΠυʹ༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻ Կ͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ ͕εϥΠυ࡞ΓͷجຊͰ͢ɻ
ݱͰͷ
ίʔυϕʔεͷมߋʹର͢ΔݟͨͷӨڹ͕ҰྎવͳͷͰɺ ϒϥϯσΟϯά৽ʢ8/8ʹਖ਼ࣜϦϦʔε͠·ͨ͠ʂʣͰ ʹཱͬͨɻ ҰํͰɺҰےೄͰ͍͔ͳ͍՝ු্ɻ ࣮ࡍʹӡ༻ͯ͠Έͯ
ِཅੑޡݕग़(ຊਖ਼͍͠ͷʹɺޡͬͯࠩൃੜ ͱΈͳ͞ΕΔ)͕ଟൃ - ΞηοτಡΈࠐΈͷ͍ӽ͠ - CSSͷద༻ͷ͍ӽ͠ ൃੜͨ͠ᶃεΫγϣ͕ෆ҆ఆ
ը૾ͷಡΈࠐΈલʹεΫγϣ͞Εͯϩΰ͕ܽམ ൵͍ࣦ͠ഊྫͦͷ
webϑΥϯτͷಡΈࠐΈલʹεΫγϣ͞Εͯจࣈ͕ζϨΔ ൵͍ࣦ͠ഊྫͦͷ
PCͱεϚϗ྆ํͷViewportͰεΫγϣΛࡱΔstoryͰɺ Viewportͷมߋʹਵ͢ΔελΠϦϯάܭࢉྃલʹΩϟϓ νϟ͞ΕͯɺຊདྷSP༻ͷΩϟϓνϟ͕PC͚ͷը૾ʹͳͬ ͯ͠·ͬͨɻ ൵͍ࣦ͠ഊྫͦͷ
ൃੜͨ͠ᶄɿ$*͕͍ 1ճpushͯ͠CI͕ճΓ͖Δ·Ͱɺ15Ҏ্ඞཁ
10ఔΛStorybookΩϟϓνϟऔಘ͕Ί͍ͯͨɻ (Ωϟϓνϟରը૾500ఔ) 1ຕ͝ͱʹϒϥβͷϖʔδϩʔυ͕ൃੜ͢Δ࣮Ͱ͋ͬͨ ͨΊɺjsͷධՁ͕࣌ؒਖੵঢ়ଶͰ݁ߏͳϘϦϡʔϜɻ $*͕͍࣌ؒ
ʮ҆ఆͯ͠ྔ࢈͢ΔʯΛߟ͑ͳ͚Εɺͷɻ ҆ఆੑɾੑೳͷ՝ͱʹʮStorybookͷΩϟϓνϟऔಘʯ ʹىҼ͍ͯ͠ΔͨΊɺ͜ͷ෦Λ1͔Βݟ͢͜ͱʹɻ (ॳطଘͷOSSΛར༻͍ͯͨ͠) ΩϟϓνϟΛࡱΔͷ༰қʜ
StorybookͷΩϟϓνϟΛࡱΔCLIΛ࡞Γ·ͨ͠ɿ https://github.com/Quramy/zisui ※ ໋໊ʮࣗͰٵ͍ग़ͧ͢ʂʯͱ͍͏͓ؾ࣋ͪͷද໌Ͱ͢ Α͠ɺࣗͰ࡞Ζ͏
None
- ֤ϝτϦΫε(DOMཁૉ/Ϧϑϩʔճ/ελΠϧ ࠶ܭࢉճ)͕ఆৗঢ়ଶʹͳΔ·ͰΩϟϓνϟऔಘ ΛԆ - CSSΞχϝʔγϣϯͷࣗಈOFF [JTVJͷಛɿ҆ఆੑ
- ෳىಈͨ͠PuppeteerͰฒྻʹը૾औಘ - Storybookͷը໘ϩʔυ1ճͷΈ - storyͷΓସ͑ postMessage [JTVJͷಛɿੑೳ
- Ϧιʔε <link rel=“preload” > ͰઌಡΈ ※ ݱঢ়preview-head.htmlʹgulpͰهड़ ͦͷଞ҆ఆԽͷͨΊͷϙΠϯτ
- StorybookͰը૾ճؼςετΛ͍ͯ͠·͢ - DOMϕʔεͷεφοϓγϣοτςετͱൺΔ ͱɺϋʔυϧߴ͍͚Ͳɺಋೖ͢ΔՁेʹ ͋Δͱࢥ͏ ·ͱΊ
None