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
Haunted House of Angular unit testing
Search
Yosuke Kurami
May 10, 2017
Programming
0
470
Haunted House of Angular unit testing
How to reduce execution time Angular Karma testing
Yosuke Kurami
May 10, 2017
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
600
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
620
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.3k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
Other Decks in Programming
See All in Programming
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
530
効率的な開発手段として VRTを活用する
ishkawa
0
150
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
110
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.2k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
Hack Claude Code with Claude Code
choplin
5
2.3k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
210
生成AI時代のコンポーネントライブラリの作り方
touyou
1
250
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
790
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
700
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building an army of robots
kneath
306
45k
How STYLIGHT went responsive
nonsquared
100
5.6k
Scaling GitHub
holman
460
140k
The Cult of Friendly URLs
andyhume
79
6.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Optimizing for Happiness
mojombo
379
70k
Fireside Chat
paigeccino
37
3.5k
For a Future-Friendly Web
brad_frost
179
9.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
Haunted House of Angular unit testing by @Quramy #ng_sake 2017.05.10
About me
ͦΕڈͷࢣͷ͜ͱ…
feature branch࡞ͬͯͶɺ ŝƄŕŰŲƄʹcommitͨ͠ΜͰ͢Α
ͦͨ͠ΒCI͕Γग़ͯ͠Ͷɺ
ͰͶɺ ͳʔΜ͔༷ࢠ͕͓͔͍͠
มͩͳʔɺා͍ͳʔ
ڪΔڪΔCIͷཧը໘Λ ։͍ͯΈΔͱ…
ςετ͕ऴΘΒͳ͍ΜͰ͢ Α͓͓͓͓͒͒͒͒͒
Angular
Scale of our product: ~130,000 loc ~30 angular modules ~700
components ~1,000 cases
1. Docker pull, run container 2. Webpack bundle 3. Run
Karma (with capture screenshots) 4. Upload screenshot images to AWS S3 Workflow of unit test on CI 1 2 3 4
Question: workflow࣮ߦʹͲΕ͘Βֻ͍͔Δͷ͔
Changes of duration ઢ: CIͰͷ୯ମςετ࣮ߦ࣌ؒ [msec]: ࠨ࣠, ੨ઢ: masterͷιʔείʔυߦ
[loc]: ӈ࣠
Changes of duration ઢ: CIͰͷ୯ମςετ࣮ߦ࣌ؒ [msec]: ࠨ࣠, ੨ઢ: masterͷιʔείʔυߦ
[loc]: ӈ࣠ 1 upgrade ng 4 3 2
ɹͰԿΛͨ͠ͷ͔?
Today’s theme: ୯ମςετߴԽςΫχοΫ (ςετίʔυͷॻ͖ํͱ͔Ұઆ໌͠ͳ͍Α!)
1. Good bye Phantom, welcome to Nightmare
Unit testing on CI • Angularͷ୯ମςετͰKarmaΛ༻͍Δ • Karmaͷಈ࡞ʹϒϥβ͕ඞཁ • CIͰheadlessʹಈ࡞ͤ͞ͳͯ͘ͳΒͳ͍
PhantomJS • Prjॳظkarma-phantomjs-launcher Λར༻ • PhantomJSࣗମɺChromeͱൺΔͱ͍ • ࠷େͷܽͦͷෆ҆ఆੑɻ “ྶ”ͱ͔ݴ͏ׂʹͨΒࢮ͵ɻ
PhantomJS -> hangs up
Nightmare • karma-nightmare[1] ʹΓ͑ • Nightmare: Electronϕʔεͷscraping tool • ҎલPhantomJSϕʔεͰ͕͋ͬͨɺੑೳվ
ળͷͨΊʹElectronϕʔεʹΓସ͑ΒΕͨ[2] <>https://github.com/bokuweb/karma-nightmare <>https://github.com/segmentio/nightmare/issues/484#issuecomment-184519591
How effective ? • 10%~20%ͷ࣮ߦ࣌ؒݮޮՌ • Pros: • ϋϯάൃੜ͕ແ͘ͳΓɺίϯελϯτʹςε τ͕ྃ͢ΔΑ͏ʹͳͬͨ
• ಋೖ͕༰қ. karma-confͷઃఆ + ԾϑϨʔ ϜόοϑΝઃఆͰCIಈ࡞͢Δ
2. More Karma, more and more…!
Multiple cores, single thread • Karmaϒϥβ্ͰςετΛ࣮ߦ͢Δ • جຊతʹγϯάϧεϨου • ϚϧνίΞڥͰଞͷίΞ͕༡ͼ͕ͪʹ
• ͋Εɺϓϩηε͚ΕΑ͘Ͷʁ
CPU Load ϩʔΧϧ(MBP, 4 core)ͰͷCPUෛՙ ۀ ۀ
ͦ͏ɺզʑʹ ۀ͕Γ͍ͯͳ͔ͬͨͷͩ
Split test bundles • test bundleΛmodule୯ҐͰׂ, bundle୯ҐͰKarmaϓϩηεΛىಈ /* test.ts */
const context = require.context('./', true, /\.spec\.ts$/); context.keys().map(context); /* test-a.ts */ const context = require.context('./module-a', true, /\.spec\.ts$/); context.keys().map(context); /* test-b.ts */ const context = require.context('./module-b', true, /\.spec\.ts$/); context.keys().map(context);
How effective ? • 50%~60%ͷ࣮ߦ࣌ؒݮޮՌ • Cons: • ʮCPUΛ͑Δ͚ͩ͏ʯઓུͷͨΊɺ CI(Wercker)ͷՔಇঢ়گ࣍ୈͳ෦ΞϦ
• ಋೖোนߴΊɻbundle࡞ॲཧΛΠδΔͨΊɺ angular-cliͷ߹ཁng eject
3. Zombie compiler
What does make tests slow? JiT Compiler. CPU profile with
~300 components, 15 test cases
What TestBed does? it(…)ͷɺFooModuleͷશcomponent͕compile͞ΕΔ beforeEach(async(() => { TestBed.configureTestingModule({ imports: [
FooModule, ], }).compileComponents(); })); it('should ...', () => { /* ... /* }); .component.spec.tsͰimportsΛॻ͘ͱ…
Avoid to compile components componentͷcompileճΛݮΒͤ, ͦͷߴԽ • moduleΛదͳཻʹׂͯ͠ґଘରΛখ͘͢͞Δ • componentΛcompile͠ͳ͍.
௨ৗͷclassͱͯ͠test͢Δ (isolated-component-tests) • ෳࡶͳॲཧΛcomponent͔ΒserviceҠߦ͢Δ service testͷׂ߹Λ૿͢
None
͏গ͠ૡ͍ͯΈΑ͏
TestingCompiler impl • JiT CompilerΩϟογϡػߏΛඋ͍͑ͯΔ • Compiler Lifecycleit(…)ຖͰ͋ΔͨΊɺςε τέʔεΛލ͙ͱΩϟογϡ͝ͱഁغ͞ΕΔ •
it(“should do A”) ͱ it(“should do B”) Ͱ Ωϟογϡ͕࠶ར༻͞ΕΔࣄͳ͍
ͰςετରͷఆٛͳΜͯɺ Karma࣮ߦதෆม͡ΌͶʁ ※ overrideComponentͷར༻͕ແ͍ͱ͍͏લఏͰ
Make compiler “undead” ngx-zombie-compiler[1] • ςετέʔεΛލ͍Ͱʮࢮͳͳ͍ʯcompiler • (ՄೳͳݶΓ)cacheͨ͠compile݁ՌΛ͍ճͨ͢Ίɺߴ import {
ZOMBIE_COMPILER_PROVIDERS } from "ngx-zombie-compiler"; beforeEach(() => { TestBed.configureCompiler({ providers: ZOMBIE_COMPILER_PROVIDERS, }); }); [1] https://github.com/Quramy/ngx-zombie-compiler
Demonstration normal with zombie
How effective ? • ࣮prjͰ50~60%ͷ࣮ߦ࣌ؒݮޮՌ • Pros: • ಋೖ༰қɻtest.tsͷमਖ਼ͷΈͰಈ࡞͢Δ •
Cons: • Angular 5.xͷࠒʹ௨༻͠ͳ͘ͳΔ… • ୯ମςετͷႈੑΛߟྀ͢ΔͱΩϫϞϊ…
Summary
Improvement techniques ҙ֎ͱڭՊॻʹԊͬͯΔײɿ • Nightmare < - > ߴͳ࣮ߦج൫ͷಋೖ •
Parallel Karma < - > ྻॲཧͷฒྻԽ • Zombie Compiler < - > Flyweightύλʔϯద༻ ʮ͍͔Βճ͞ͳ͍ʯ͑ɻͲ͠Ͳ͠ςετॻ͜͏ʂ
Thank you!