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
1.9k
Visual Testing in FOLIO-sec
Yosuke Kurami
August 23, 2018
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
reg-viz VRT tools
quramy
4
810
NoInfer
quramy
0
100
Precondition with schema directives
quramy
0
1k
T3 Stack and TypeScript ecosystem
quramy
4
1.7k
apollo client / react / esm
quramy
1
200
Apollo Client useFragment
quramy
1
590
About Type Syntax Proposal
quramy
1
1.9k
GraphQLとの向き合い方2022年版
quramy
31
12k
Generate React Component with TypeScript AST
quramy
6
2.9k
Other Decks in Programming
See All in Programming
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
520
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
Semantic search with Django and pgvector
pauloxnet
0
240
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
470
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
150
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Web development in the modern age
philhawksworth
202
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Bash Introduction
62gerente
604
210k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
What's in a price? How to price your products and services
michaelherold
237
11k
The Invisible Side of Design
smashingmag
294
49k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
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