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
フロントエンドテストプラクティス in open 8
Search
Yosuke Furukawa
PRO
September 13, 2021
Programming
44
15k
フロントエンドテストプラクティス in open 8
2021/09/13
Open8 で発表したフロントエンドテストプラクティスの話です。
Yosuke Furukawa
PRO
September 13, 2021
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Module Harmony について
yosuke_furukawa
PRO
3
1.4k
LTのやり方
yosuke_furukawa
PRO
15
1.8k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
620
Node.js v22 で変わること
yosuke_furukawa
PRO
13
4.7k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
8.9k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3.4k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.5k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
18
10k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.8k
Other Decks in Programming
See All in Programming
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
【Go言語】golangci-lintの使い方
tomo1227
0
280
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
最近追加した型の紹介とその振り返り
aki19035vc
0
180
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Git: the NoSQL Database
bkeepers
PRO
423
64k
How to Think Like a Performance Engineer
csswizardry
4
590
Become a Pro
speakerdeck
PRO
15
4.8k
The Invisible Customer
myddelton
117
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Being A Developer After 40
akosma
72
580k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Debugging Ruby Performance
tmm1
71
11k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Transcript
ϑϩϯτΤϯυςετ ϓϥΫςΟε 2021/09/13 @ Open8
Twitter: @yosuke_furukawa Github: yosuke-furukawa
ςετॻ͍ͯ·͔͢ʁ
খωλ ͜Εॻ͍ͨͷͳΜͰ͢ɻ
Testʹର͢Δίϝϯτ ఆྔతʹޮՌΛଌΓ͍ͨ
Testʹର͢Δίϝϯτ ͜ͷҙݟͰ'JO
ऴΘΓͰ͋Δͷͷɺ͏ গ͠ิ͍͖͍ͤͯͨͩͨ͞
ͦͷલʹ
ͦͦςετͱԿ͔ • ࣭Λ্͛Δͷʢʁʣ • কདྷͷมߋΛ༰қʹͯ͘͠ΕΔͷʢʁʣ • ෆ۩߹Λݟ͚ͭͯ͘ΕΔͨΊͷະདྷͷࢿ ʢʁʣ ͲΕਖ਼ղ
ιϑτΣΞͷςετɺϓ ϩμΫτ·ͨαʔϏεͷ ࣭ʹؔ͢ΔใΛεςʔΫϗ ϧμʔʹఏڙ͢ΔͨΊʹߦΘ ΕΔௐࠪͰ͋Δɻ Cem Kaner "Exploratory Testing"
ా͞Μͷݴ༿ https://www.slideshare.net/t_wada/jasst-2014-hokkaidotwadatdd Test Yourself - ςετΛॻ͘ͱԿ͕Ͳ͏มΘΔ͔
ా͞Μͷݴ༿ https://www.slideshare.net/t_wada/jasst-2014-hokkaidotwadatdd Test Yourself - ςετΛॻ͘ͱԿ͕Ͳ͏มΘΔ͔
ςετ = ମॏܭ • ͜ͷϝλϑΝʔΛ͏·͘ҙࣝ͢Δͱ৭ʑཧղ͍͢͠ • QA = ਓؒυοΫ •
ຖਓؒυοΫʹߦͬͯຖϝσΟΧϧνΣοΫΛड ͚Δਓ͍ͳ͍ • ମॏܭʹͬͨΓɺ݂ѹܭͰଌͬͨΓ͢Δ͘Β͍͕ຖ Δ͜ͱͱͯ͠ஸ͍͍ൣғͩͬͨΓ͢Δ
ςετ = ମॏܭ • ຖମॏܭͬͯΔ͚ͩ͡Ό૫ͤͳ͍ͷͱҰॹͰຖCI ճͯ͠Δ͚ͩ͡Ό࣭ྑ͘ͳΒͳ͍ • ݱঢ়͕ѲͰ͖Δͷ͕ମॏܭͷׂɺඪΛݟਾ͑ͯվ ળΛ͢Δʹ৯ੜ׆ݟͨ͠Γɺӡಈͨ͠Γ͢Δඞཁ͕ ͋Δɻ
• ࣭ಉ༷ɺ࣮ࡍʹϦϑΝΫλϦϯάͨ͠Γɺෆ۩߹ʹ ͳΓͦ͏ͳՕॴΛݟ͚ͭͯमਖ਼ͨ͠Γ͠ͳ͍ͱྑ͘ͳΒ ͳ͍ɻ
ςετ = ମॏܭ • ͜͜·ͰདྷͨΒΘ͔Δͱࢥ͏͚Ͳɺʮ૫͍͔ͤͨΒମ ॏܭΛങ͍͍ͨʯ͍ͬͯ͏࣌ʹʮମॏܭͷࢿରޮՌ ʁʯͱฉ͔͘Β͓͔͘͠ͳΔɻ • ମॏܭ͋͘·Ͱݱঢ়ѲͷͨΊͷπʔϧɺ૫ͤΔͷ ৯ੜ׆ݟͨ͠Γɺӡಈ͢Δ͔Βɻ
• ମॏܭΒͳͯ͘૫ͤΔਓ͍Δ͚Ͳكɻ • ମॏܭങΘͳ͍ͱ૫ͤͳ͍ɻ
ͪͳΈʹຖηϧϑνΣοΫ ͢Δ͖݈߁߲
ιϑτΣΞͷςετҰॹ Logic UT E2E Test Visual Reg Test A11Y
্࣭͛Δͷʹςετ͚ͩͰ͍ ͍Θ͚Ͱͳ͍ • ຖηϧϑνΣοΫΛ͍ͯͯ͠Λग़ͨ͠ Γɺ෩अΛҾ͍ͨΓ͢Δࣄ͋Δ • ࢹॏཁ • ԿΛͨ͠Βࣄ͕ى͖ͨͷ͔Λه͢ΔͨΊ ʹϩάग़͞ͳ͍ͱ͍͚ͳ͍
ςετͱࣗͨͪͷݱ࣌ Ͱͷ࣭ΛνΣοΫ͢ΔͨΊ ͷݱঢ়ੳख๏ ࣭վળ৭ʑͳΞϓϩʔν ͕༗ΓɺͦͷதͷҰख๏
͍ΖΜͳख๏͕͋Δͱݴͬͨ ͕ɺଞͷͷհ
ςεςΟϯάͱνΣοΩϯά
ςεςΟϯάͱνΣοΩϯά • ςετۦಈ։ൃ • https://www.amazon.co.jp/dp/B077D2L69C/
checking • ࣗͨͪͷ಄ͷதͰʮਖ਼͍͠ʯͱࢥ͍ͬͯΔ͜ ͱΛ֬ೝ͢Δ͜ͱ • ֬ೝɾݕূɾଥ͔Ͳ͏͔ • ίʔυΛมߋͯ͠ಉ͡Α͏ʹಈ࡞͢Δ͔ͱ͔ ͜ͷ checking
• ։ൃऀ͕Δςετେମ͜Ε
testing • ࣗͨͪͷϓϩμΫτʹରͯ͠৽͍͠ใΛ ݟ͚ͭΔ୳ࡧߦಈ • ఆ֎ͷΛݟ͚ͭΔΑ͏ͳͷ • ୳ࡧɾൃݟɾڀ໌ɾֶश • QAΤϯδχΞ͕࣮ࢪ͢Δςετେମͬͪ͜
test = check + explore
։ൃऀQAͷ྆ํ͕check͠ ͔ͯ͠ͳ͍ঢ়ଶͩͱ test ʹͳ Βͳ͍ɻ୳ࡧͯ͠ൃݟ͢Δϓ ϩηεΛೖΕΔඞཁ͕͋Δɻɹ
୳ࡧ ༷ͷൣғʹॻ͍ͯ͋Δ͚ͩ ͡Όͳ͘ɺͦͷ֎ଆʹ͍Δ ϢʔβʔͷͭΓͰධՁ͢Δ
։ൃऀ͚͕ͩ୲อ͢ΔͷͰ ͳ͍ɻ
QA͚͕ͩ୲อ͢ΔͷͰͳ ͍ɻ
શһٿ
͜͜·Ͱͷ·ͱΊ • ςετମॏܭ • ςετͷίεύΛฉ͍ͯΔͷʮମॏܭങͬͨΒͲΕ͘ Β͍૫ͤ·͔͢ʁʯͬͯฉ͍ͯΔͷͱҰॹ • ཧͷςετ֬ೝ(check)ͱ୳ࡧ(explore)ཱ͕͍྆ͯ͠ Δςετ •
ͦΕΛ࣮ݱ͢ΔͨΊʹQAͱ։ൃͱϓϩδΣΫτΦʔφʔ ҰؙʹͳΔඞཁ͕͋Δ
ͬͯϑϩϯτΤϯυͷ ςετͷ
ϑϩϯτΤϯυςετ • ։ൃऀͷҙਤ௨ΓʹϢʔβʔ͕ΞϓϦέʔγϣϯ αʔϏεΛӾཡ͠ɺػೳ͕ར༻Ͱ͖͍ͯΔͷ͔Λݕ ূ͢ΔͨΊͷͷ • όοΫΤϯυͷςετσʔλϕʔεʹ࣮ࡍʹҙਤ ௨Γʹσʔλ͕ετΞ͞ΕͯΔ͔ɺΓͷJSONͷ ߏ͕͋ͬͯΔ͔ͳͲ͕ͩɺϑϩϯτΤϯυ ʮʢओʹʣΫϥΠΞϯταΠυͰى͖ΔΤϥʔΛൃ
ݟ͠ɺσϓϩΠલʹमਖ਼͢Δ͜ͱʯ͕ॏཁʹͳΔ
ϑϩϯτΤϯυςετ • Ϣχοτςετ • ݁߹ςετ • E2Eςετ • a11yςετ •
ύϑΥʔϚϯεςετ • ϏδϡΞϧϦάϨογϣϯςετ
Ϣχοτςετ • ୯ମͷίϯϙʔωϯτɺٴͼ୯Ұػೳͷؔ ͷ in / out ΛνΣοΫ͢Δςετ function doSomething(name)
{ if (name) { return name; } return "no name"; } // ୯ମςετ෦ test("doSomething", () => { assert("test", doSomething("test")); });
Why Ϣχοτςεπʁ • ΤοδέʔεʹΑͬͯϩδοΫ͕ഁ͍ͯ͠ͳ ͍͔ΛνΣοΫ͢ΔͨΊ • E2EIntegration TestͰ࣮ݱͰ͖ͳ͍͕ɺ কདྷతͳมߋʹΑͬͯΤοδέʔε͕ೖΕΒ Εͨ࣌Ͱਖ਼ͦ͘͠ͷ୯ମίϯϙʔωϯτ͕
ಈ͔͘Ͳ͏͔Λ֬ೝ͢ΔͨΊ
݁߹ςετ • "୯ମ"Λ͑ͯෳͷίϯϙʔωϯτΛΈ߹ Θͤͨςετͷ͜ͱ export const Greeting = () =>
{ const [showGreeting, setShowGreeting] = useState(false); return ( <div> <p data-testid="greeting">{showGreeting && sayHello()}</p> <button data-testid="show-greeting-button" onClick={() => setShowGreeting(true)}>Show Greeting</ button> </div> ); }; test('shows correct greeting', () => { const screen = render(<Greeting />); const greeting = screen.getByTestId('greeting'); const button = screen.getByTestId('show-greeting- button'); expect(greeting.textContent).toBe(''); fireEvent.click(button); expect(greeting.textContent).toBe('Hello human!'); });
Why ݁߹ςετ • Ϣχοτςετ͕୯ମͷϩδοΫΛݕূ͢Δ ͷʹରͯ͠ɺ݁߹ςετϢχοτΛෳ ݁߹ͨ͠ࡍͷৼΔ͍Λݕূ͍ͯ͠Δ • Ϣʔβʔ͕ΞϓϦέʔγϣϯΛ͏ࡍʹෳ ͷϢχοτ͕ؔΘΔͨΊɺ͜ͷํ͕Ϣʔ βʔͷಈ࡞ʹ͍ۙ
E2Eςετ • ࣮ࡍʹϒϥβΛىಈͤͯ͞ϒϥβϨϕϧͰͷ ৼΔ͍ɾΠϯλϥΫγϣϯΛݕূ͢Δ • ίʔυͷϩδοΫίϯϙʔωϯτͷৼΔ͍Ͱ ͳ͘ɺϢʔβʔ͕ͲͷΑ͏ʹૢ࡞͢Δ͔Λ฿ ͨ͠ςετ • ͋Γͱ͋ΒΏΔύλʔϯΛཏ͠Α͏ͱ͢Δͱര
ൃతʹ͕͔͔࣌ؒΔ
E2Eςετ
Why E2E ςετ • Ϣχοτςετ݁߹ςετΛͨ͠ͱͯͦ͜͠ ͔Β࿙Εͯ͠·͏έʔε͕͋ΓಘΔ • ࣮ίʔυ͚ͩͰͳ͘ɺnginxCDNͳͲͷ ϛυϧΣΞΛט·ͤͨΓ͢Δͱ݁Ռ͕ҟͳΔ έʔε
• ࣮ࡍʹຊ൪ʹ͍ۙڥͰ࣮ࢪ͢Εͷະવൃ ੜ͕͍͗͢
ͲΕ͘Β͍ͷׂ߹ͰΔͷ͕͍ ͍͔ʁ • Google • 10% E2E • 20%
Integration • 70% Unit • ͱ͍͏ϐϥϛουΛܗͯ͠Δ https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html
a11y ςετ • ࠷ۙྲྀߦΓͷΞΫηγϏϦςΟ·ͰؚΊͨςετ • εΫϦʔϯϦʔμʔͰͪΌΜͱಡΊΔͷ͔ͷΞ Ϋηγϒϧ͔Ͳ͏͔Λ֬ೝ͢Δͷ • ͪΌΜͱΖ͏ͱ͢Δͱେม͕ͩɺ࠷ۙͩͱ lighthouse
ͳͲͷ؆қπʔϧͰݕূͰ͖ͨΓ͢ Δɻ
Why a11y tests? • ϙΠϯςΟϯάσόΠε͕ͪΌΜͱ͑ͯɺͬ ͖Γͱ͕ݟ͑Δਓ͔ΓͰͳ͍ɻ • ৭ऑ͋ͬͨΓɺ৭͋ͬͨΓɺ͕ݟ͑ΔΘ ͚͡Όͳ͔ͬͨΓɺख͕͋ΔΘ͚͡Όͳ͔ͬͨΓ ͢Δɻ
• ΧδϡΞϧʹΔͳΒlighthouseͰ͕ग़ͯϚΠ φεཁҼ͕͔ͬͨΓ͢Δɻ
Why a11y tests? • Lighthouse ͷ݁Ռ • ͪͳΈʹ͜Ε puppeteer ͰऔΕΔ
Why a11y tests? • test ͡Όͳͯ͘ lint ͕ͩɺ accesslint
axe- core(LH͕தͰͬͯΔͭ) ͱ͔ͷνΣοΫ πʔϧ͋Δ
ύϑΥʔϚϯεςετ • ࣮ࡍʹϖʔδΛ։͍ͯදࣔ͞ΕΔ·ͰͩͬͨΓɺΠϯλ ϥΫγϣϯ͕ߦΘΕΔ·Ͱͷ࣌ؒΛܭଌͯ͠ݕূ͢Δͨ Ίͷςετ • ͜Ε a11y ·Ͱͱಉ༷ʹΧδϡΞϧʹΔͳΒ Lighthouse
ͰΔखஈ͋Δ • ҰํͰͪΌΜͱΖ͏ͱ͢Δͱେมɺ͜ͷ͋ͨΓ a11y ςετͱࣅ͍ͯΔ
Why ύϑΥʔϚϯεςετ? • ΞϓϦέʔγϣϯ͕ظ௨Γͷ͕ग़ͯΔͷ͔ɺ࣮ࡍʹ֬ೝ͠ ͍ͨɻ • ࡢࠓύϑΥʔϚϯεϏδωεʹͱͬͯ༗ޮͳ߹͕͋Γɺͦ ΕʹΑͬͯSEOͷ݁ՌʹӨڹ͢ΔͳͲͷঢ়گ͋ͬͯԹײ͕ߴ ͘ͳ͍ͬͯΔɻ •
Why ύϑΥʔϚϯεςετ? • ύϑΥʔϚϯεʹؔ͢Δͷ࣮ࡍଟذʹΘͨΔ • όϯυϧαΠζ • ϖʔδಡΈࠐΈ࣌ؒ • ը૾αΠζ
• ͳͲͳͲ • ͜ΕΒͷཁҼΛ·Δͬͱ͍͍ײ͡ʹධՁͯ͘͠ΕΔͷ͕Core Web Vitals • ҰํͰύϑΥʔϚϯεຊདྷత͕͋ΔͷͰࣗͨͪͰKPIΛ࡞ͬͯݕূΛ ࣮ࢪ͢Δͷ͕ϕετɻ
ϏδϡΞϧϦάϨογϣϯςε τ • ࠓճͷຊ • ͜Ε·Ͱ͕"ૢ࡞"ʹରͯ͠ͷ"ৼΔ͍"Λςετ͍ͯ͠ ͨͷʹରͯ͠ɺVRT"ݟͨ"Λςετ͢Δ • ࣮ࡍ"ݟͨ"Ұ൪มߋ͕ଟ͍ͱ͜ΖͳͷͰɺ͍͠ɻ •
ݟ͕ͨมΘΔ͔Β view ͷςετࢿରޮՌ͕ѱ͍ ͱݴΘΕͨΓ͢Δɻ
ϏδϡΞϧϦάϨογϣϯςε τ • ݟ্ͨͷࠩΛݕग़ͯ͠ɺݟͤΔͷ • E2EͰ͢Γൈ͚ͯ͠·͏Α͏ͳݟͨͷ่Ε ͱ͔Λݕग़Ͱ͖Δɻ
ϏδϡΞϧϦάϨογϣϯςε τ • ӡ༻࢝͠ΊΔͱେมͦ͏ • େମ߹ͬͯΔ • ͕ࠩͲΕ͘Β͍ग़Δ͔Λ͖͍͠ͱͯ͠ઃఆ͢Δ • ಛʹ͖͍͠ΛదʹܾΊͯӡ༻͢Δͷ͕େม
• ڊେͳϖʔδͰΔͱ͍͍͖͍ͩͨ͠ͷઃఆ͕ ϖʔδ͝ͱʹҧ͍ͬͯͨΓͰେม
ϏδϡΞϧϦάϨογϣϯςε τ • ӡ༻࢝͠ΊΔͱେมͦ͏ • ͨͩҰํͰΕΔͱඇৗʹॿ͔Δଆ໘͕͋Δ • ಛʹݟͨʹΑͬͯCSSͷෆ۩߹Λݟ͚ͭΒ ΕΔ •
ܦݧ্CSSͷෆ۩߹͕Ұ൪ΊΜͲ͍
ϏδϡΞϧϦάϨογϣϯςε τ • Ͳͷ͘Β͍ͷཻͰΔͱ͍͍ͷ͔ʁ • StoryBook ͰίϯϙʔωϯτΛ·ͱΊΔ͜ͱ͕͋Δͱࢥ͏͕ɺͦͷ୯ Ґ͘Βׂ͍͕ͱྑ͍ɻ • ཻ͕େ͖͍ͱ৭Μͳෆ֬ఆཁૉ͕བྷΉͷͰɺςετ͕
flaky ʹͳΓ͕ ͪ • ฐࣾͩͱશʹίϯϙʔωϯτ୯ҐͰ StoryBook Λ࡞Γͳ͕Βɺ reg- suit ͱΈ߹ΘͤͯσβΠϯ่ΕΛࣄલݕ͍ͯ͠Δ • StoryBook ۦಈ։ൃͱ͔ݺΕͯΔɻ
ϏδϡΞϧϦάϨογϣϯςε τ • Ͳͷ͘Β͍ͷཻͰΔͱ͍͍ͷ͔ʁ • ཻ͕େ͖͍ͱ͜Ζ Autify ͱ͔ೖΕͯΔ • ͜ͷ͋ͨΓશʹ༧ࢉͱͷউෛ
• ମॏܭͱ͍ͬͨͷͷɺͳΜͰ͔ΜͰ πʔϧೖΕΕ͍͍ͱ͍͏ͷͰͳ͍
ςετϕετϓϥΫςΟε • ϢχοτςετͱΠϯςάϨʔγϣϯςετؤுͬͯॻ͍͓ͯ ͘ɻ • E2EҰ൪ҰൠతͳϩάΠϯ͔ͯ͠Β࠷ॳͷϖʔδϙνϙν͢Δ ͘Β͍·ͰΓ͍ͨɻ • a11y /
performance Lighthouseͱ͔Ͱ࠷ॳΧδϡΞϧʹɺ ঃʑʹࣗͨͪͷతʹ߹Θ͍ͤͯ͘ • VRT StoryBook ϕʔεͰ࣮ࢪͭͭ͠ɺ͜Εతʹ߹Θͤͯ૿ ͍ͯ͘͠
ϑϩϯτΤϯυͷ·ͱΊ • ୯ମςετ • ΠϯςάϨʔγϣϯςετ • E2Eςετ • a11yςετ •
ύϑΥʔϚϯεςετ • Visual Regression Test