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
86
Better late than never - Retrofit test suite in existing React apps
programmiri
0
120
Treat yourself - EnterJS 2020
programmiri
0
72
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
56
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
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
310
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
XP, Testing and ninja testing
m_seki
3
180
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
100
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
310
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
370
Featured
See All Featured
KATA
mclloyd
29
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf 2023
tenderlove
30
1.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
For a Future-Friendly Web
brad_frost
179
9.8k
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