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
140
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
84
Better late than never - Retrofit test suite in existing React apps
programmiri
0
110
Treat yourself - EnterJS 2020
programmiri
0
61
Treat yourself - A tale about dogtraining and test driven development
programmiri
1
510
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
51
Full Skill Developer
programmiri
3
530
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
400
My approach to a component-based CSS
programmiri
0
78
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
programmiri
0
290
Other Decks in Programming
See All in Programming
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
450
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
880
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
620
エンジニア未経験が最短で戦力になるためのTips
gokana
0
260
Develop Faster With FrankenPHP
dunglas
2
3.2k
AI Agents with JavaScript
slobodan
0
210
リストビュー画面UX改善の振り返り
splcywolf
0
120
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
160
List とは何か? / PHPerKaigi 2025
meihei3
0
620
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
1
430
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
180
Vibe Codingをせずに Clineを使っている
watany
17
5.9k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rails Girls Zürich Keynote
gr2m
94
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Become a Pro
speakerdeck
PRO
27
5.3k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Site-Speed That Sticks
csswizardry
5
470
GraphQLとの向き合い方2022年版
quramy
46
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
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