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
94
Better late than never - Retrofit test suite in existing React apps
programmiri
0
120
Treat yourself - EnterJS 2020
programmiri
0
74
Treat yourself - A tale about dogtraining and test driven development
programmiri
1
530
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
62
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
90
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
programmiri
0
300
Other Decks in Programming
See All in Programming
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
620
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
止められない医療アプリ、そっと Swift 6 へ
medley
1
160
明日から始めるリファクタリング
ryounasso
0
130
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
430
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.1k
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
Devoxx BE - Local Development in the AI Era
kdubois
0
120
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
110
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
How to Think Like a Performance Engineer
csswizardry
27
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Done Done
chrislema
185
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Documentation Writing (for coders)
carmenintech
75
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