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
430
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
App Router 悲喜交々
quramy
7
540
上手に付き合うコンポーネントテスト
quramy
4
1.9k
Patched fetch did not work
quramy
6
600
GraphQL あるいは React における自律的なデータ取得について
quramy
18
4.9k
Next.js App Router
quramy
15
3.4k
Fragment Composition of GraphQL
quramy
16
3.6k
reg-viz VRT tools
quramy
4
1.3k
NoInfer
quramy
0
250
Precondition with schema directives
quramy
0
1.5k
Other Decks in Programming
See All in Programming
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
Ruby on cygwin 2025-02
fd0
0
150
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
ML.NETで始める機械学習
ymd65536
0
210
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
670
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
180
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Scaling GitHub
holman
459
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Visualization
eitanlees
146
15k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Embracing the Ebb and Flow
colly
84
4.6k
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!