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
スタックトレース始めてみた
kuro_kurorrr
5
1.2k
WebGLで始める コンピュータグラフィックス入門
heller77
0
390
Productivity is Messing Around and Having Fun
hollycummins
1
180
株式会社ゼネテック
genetec
0
120
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
130
GoでParserを書く
karupanerura
3
420
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
230
Dev ContainersとTestcontainers
bells17
3
100
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
160
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Building Adaptive Systems
keathley
32
1.9k
What's new in Ruby 2.0
geeforr
338
31k
GitHub's CSS Performance
jonrohan
1025
450k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Facilitating Awesome Meetings
lara
43
5.6k
Robots, Beer and Maslow
schacon
PRO
155
8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
Design by the Numbers
sachag
274
18k
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!