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
330
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
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
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
74k
JS RPCを理解する
yusukebe
5
310
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
440
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
140
RustでAWS Lambda functionをいい感じに書く
taiki45
2
160
mb_trim関数を作りました
youkidearitai
PRO
1
250
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
520
酒飲んでたらテックリードになった話
spbaya0141
0
210
哲学史とモデリング
tanakahisateru
3
440
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
260
JavaScript Closure
asoluka
0
2k
『WordPressコミュニティで学ぶ』OSS貢献の多様性
ippey
0
300
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Building Your Own Lightsaber
phodgson
100
5.7k
KATA
mclloyd
16
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
A designer walks into a library…
pauljervisheath
201
23k
Web Components: a chance to create the future
zenorocha
306
41k
Navigating Team Friction
lara
179
13k
Atom: Resistance is Futile
akmur
260
25k
A Tale of Four Properties
chriscoyier
153
22k
YesSQL, Process and Tooling at Scale
rocio
165
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Thoughts on Productivity
jonyablonski
60
3.9k
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!