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
Implementing a test suite in an existing Front...
Search
Mirjam Aulbach
February 23, 2021
Programming
0
150
Implementing a test suite in an existing Frontend application
Slides to my talk at JS World Conference 2021.
Mirjam Aulbach
February 23, 2021
Tweet
Share
More Decks by Mirjam Aulbach
See All by Mirjam Aulbach
Besser spät als nie - Testsuite in bestehende React Application nachziehen
programmiri
0
90
Better late than never - Retrofit test suite in existing React apps
programmiri
0
120
Treat yourself - EnterJS 2020
programmiri
0
73
Treat yourself - A tale about dogtraining and test driven development
programmiri
1
520
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
61
Full Skill Developer
programmiri
3
540
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
410
My approach to a component-based CSS
programmiri
0
84
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
programmiri
0
300
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
150
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
ニーリーにおけるプロダクトエンジニア
nealle
0
840
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Featured
See All Featured
It's Worth the Effort
3n
185
28k
What's in a price? How to price your products and services
michaelherold
246
12k
The Cult of Friendly URLs
andyhume
79
6.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Designing Experiences People Love
moore
142
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing for humans not robots
tammielis
253
25k
Adopting Sorbet at Scale
ufuk
77
9.5k
Transcript
Better late than never
Mirjam ! Software Engineer twitter: @mirjam_diala | github/gitlab: @programmiri
I ! Testing twitter: @mirjam_diala | github/gitlab: @programmiri
Me when someone says they don't like testing twitter: @mirjam_diala
| github/gitlab: @programmiri
Roadmap ✔ Hello World! " Where we started # First
steps $ When to test? % How to test? & The 3 most important learnings ' Summary twitter: @mirjam_diala | github/gitlab: @programmiri
Where we started twitter: @mirjam_diala | github/gitlab: @programmiri
twitter: @mirjam_diala | github/gitlab: @programmiri
23.03.2018 » 38.181 lines of code » 291 JS files
» 238 React components twitter: @mirjam_diala | github/gitlab: @programmiri
UI Tests: 877 twitter: @mirjam_diala | github/gitlab: @programmiri
Integration and Unit Tests: 0 twitter: @mirjam_diala | github/gitlab: @programmiri
actual footage of me seeing this numbers media source: https://giphy.com/gifs/queen-recap-geek-V9SviiJPLyFQ4/
Legacy Code? twitter: @mirjam_diala | github/gitlab: @programmiri
"Nobody touch nothing" Alien, 1986 media source: https://getyarn.io/yarn-clip/7555a768-216e-40a0-9f9d-bb417a138186
"To me, legacy code is simply code without tests." Michael
C. Feathers "Working Effectively with Legacy Code" media source: https://getyarn.io/yarn-clip/7555a768-216e-40a0-9f9d-bb417a138186
media source: https://imgur.com/gallery/XkM0Jqp
Solution? twitter: @mirjam_diala | github/gitlab: @programmiri
twitter: @mirjam_diala | github/gitlab: @programmiri
Why retrofit a test suite? (for real) twitter: @mirjam_diala |
github/gitlab: @programmiri
Why retrofit a test suite » become futureproof » keep
the Extensibility » Refactoring easier » reduce bugs long-term » find bugs before my user does media source: https://gfycat.com/piercinghospitabledwarfrabbit
"We're going to rewrite that anyway!" media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR
Roadmap ✔ Hello World! ✔ Where we started " First
steps # When to test? $ How to test? % The 3 most important learnings & Summary twitter: @mirjam_diala | github/gitlab: @programmiri
First steps twitter: @mirjam_diala | github/gitlab: @programmiri
You have to sell this twitter: @mirjam_diala | github/gitlab: @programmiri
How to tell my... » !"#$% » &'() » *+,⏰
twitter: @mirjam_diala | github/gitlab: @programmiri
Useful tools media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2
Useful tools Will support you before the first test -
pinky promise » Code formatter and linting » Component library » Faster UI tests » Error tracking twitter: @mirjam_diala | github/gitlab: @programmiri
Workflow rules media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW
Workflow rules » Tests before commit » Tests before build
» Tests are part of code review » Improvement tickets for refactorings twitter: @mirjam_diala | github/gitlab: @programmiri
Roadmap ✔ Hello World! ✔ Where we started ✔ First
steps " When to test? # How to test? $ The 3 most important learnings % Summary twitter: @mirjam_diala | github/gitlab: @programmiri
When to test? twitter: @mirjam_diala | github/gitlab: @programmiri
‼ New functionality only with tests twitter: @mirjam_diala | github/gitlab:
@programmiri
! If Bug then test twitter: @mirjam_diala | github/gitlab: @programmiri
! Test before changes twitter: @mirjam_diala | github/gitlab: @programmiri
! Use idle times twitter: @mirjam_diala | github/gitlab: @programmiri
Roadmap ✔ Hello World! ✔ Where we started ✔ First
steps ✔ When to test? " How to test? # The 3 most important learnings $ Summary twitter: @mirjam_diala | github/gitlab: @programmiri
How to test? twitter: @mirjam_diala | github/gitlab: @programmiri
Order ! ⭕ Tests twitter: @mirjam_diala | github/gitlab: @programmiri
Order ! ⭕ Tests media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
Order ! ⭕ Tests "Characterisation" || "Pinning" media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
Order ! ✅ Tests # ⭕ Refactor -> rinse and
repeat! twitter: @mirjam_diala | github/gitlab: @programmiri
Order ! ✅ Tests # ✅ Refactor ! ⭕ Tests
# ⭕ Code $ ⭕ Refactor media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
Roadmap ✔ Hello World! ✔ Where we started ✔ First
steps ✔ When to test? ✔ How to test? " The 3 most important learnings # Summary twitter: @mirjam_diala | github/gitlab: @programmiri
With this 3 tips you can't do ANYTHING wrong again
probably twitter: @mirjam_diala | github/gitlab: @programmiri
Tip # 1: Keep 'em separated media source: https://www.youtube.com/watch?v=1jOk8dk-qaU
Tip for separating: . . VanillaJS is love, VanillaJS is
life! Yeah, ok, you can also use Typescript
Tip for separating: . . Dumb is the new sexy!1
1 Only with code components. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
Tip #2: media source: http://t.co/ca31My7
Tip #3: Perfection is not an excuse “Imperfect action is
better than perfect inaction.” – Harry Truman media source: https://giphy.com/gifs/hoppip-art-film-bOflabuL47FKg
Roadmap ✔ Hello World! ✔ Where we started ✔ First
steps ✔ When to test? ✔ How to test? ✔ The 3 most important learnings " Summary twitter: @mirjam_diala | github/gitlab: @programmiri
So... did it work? twitter: @mirjam_diala | github/gitlab: @programmiri
First test media source: https://www.youtube.com/watch?v=EH3X4469Aag
media source: https://www.youtube.com/watch?v=EH3X4469Aag
Actual footage of me testing code media source: https://www.youtube.com/watch?v=EH3X4469Aag
! 10/10 would write tests again. twitter: @mirjam_diala | github/gitlab:
@programmiri
And that's it! Thanks ! » twitter: @mirjam_diala » github/gitlab:
programmiri » web: programmiri.rocks media source: https://www.youtube.com/watch?v=EH3X4469Aag