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
1k
フロントエンドテストの育て方
quramy
12
3.5k
App Router 悲喜交々
quramy
8
640
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
710
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.4k
Next.js App Router
quramy
15
3.7k
Fragment Composition of GraphQL
quramy
16
4.1k
reg-viz VRT tools
quramy
4
1.5k
Other Decks in Programming
See All in Programming
A Gopher's Guide to Vibe Coding
danicat
0
190
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
710
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.6k
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
160
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
190
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.4k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
980
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Speed Design
sergeychernyshev
32
1.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
GitHub's CSS Performance
jonrohan
1032
460k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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!