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
Besser spät als nie - Testsuite in bestehende R...
Search
Mirjam Aulbach
December 07, 2021
Programming
0
94
Besser spät als nie - Testsuite in bestehende React Application nachziehen
Slides to my talk at ct'webdev 2021.
Mirjam Aulbach
December 07, 2021
Tweet
Share
More Decks by Mirjam Aulbach
See All by Mirjam Aulbach
Implementing a test suite in an existing Frontend application
programmiri
0
150
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
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
140
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
CSC305 Lecture 01
javiergs
PRO
1
390
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
470
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1k
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
660
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
CSC305 Lecture 03
javiergs
PRO
0
230
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
140
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
170
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Site-Speed That Sticks
csswizardry
11
880
YesSQL, Process and Tooling at Scale
rocio
173
14k
Typedesign – Prime Four
hannesfritz
42
2.8k
Practical Orchestrator
shlominoach
190
11k
Speed Design
sergeychernyshev
32
1.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
KATA
mclloyd
32
15k
Transcript
Besser spät als nie! Testsuite in bestehende React Application nachziehen
@mirjam_diala • | @programmiri • programmiri.rocks
! Mirjam Aulbach @mirjam_diala • | @programmiri • programmiri.rocks
I ! Testing @mirjam_diala • | @programmiri • programmiri.rocks
Me when someone says they don't like testing media source:
https://giphy.com/gifs/reaction-dogs-texting-RGK9jWz0t89Hy
Fahrplan ✔ Hello World! " Ausgangslage # Erste Schritte $
Wann testen? % Wie testen? & Die 3 wichtigsten Learnings ' Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
Ausgangslage @mirjam_diala • | @programmiri • programmiri.rocks
None
Stand 23.03.2018 → 38.181 Zeilen Code → 291 JS Dateien
→ 238 React Komponenten @mirjam_diala • | @programmiri • programmiri.rocks
UI Tests: 877 @mirjam_diala • | @programmiri • programmiri.rocks
Integration and Unit Tests: 0 @mirjam_diala • | @programmiri •
programmiri.rocks
actual footage of me seeing this numbers media source: https://giphy.com/gifs/queen-recap-geek-V9SviiJPLyFQ4/
Legacy Code? 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
Lösung? @mirjam_diala • | @programmiri • programmiri.rocks
@mirjam_diala • | @programmiri • programmiri.rocks
Warum Testsuite nachziehen? (ernsthaft jetzt mal) @mirjam_diala • | @programmiri
• programmiri.rocks
Warum Testsuite nachziehen? → Zukunftssicher sein → Erweiterbarkeit erhalten →
Refactoring vereinfachen → Bugs langfristig reduzieren → Bugs vor dem User finden media source: https://gfycat.com/piercinghospitabledwarfrabbit
"Irgendwann schreiben wir es einfach neu!" ! @mirjam_diala • "
| # @programmiri • programmiri.rocks
"Irgendwann schreiben wir es einfach neu!" media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR
Fahrplan ✔ Hello World! ✔ Ausgangslage " Erste Schritte #
Wann testen? $ Wie testen? % Die 3 wichtigsten Learnings & Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
. . Erste Schritte @mirjam_diala • | @programmiri • programmiri.rocks
Verkauf das erst mal @mirjam_diala • | @programmiri • programmiri.rocks
Wie sag ich's... → !"#$% → &'() → *+,⏰ @mirjam_diala
• | @programmiri • programmiri.rocks
Hilfreiche Werkzeuge Helfen vor dem ersten Test, versprochen. → Code
Formatter und Linting → Komponenten Bibliothek → Schnellere UI Tests → Error Tracking @mirjam_diala • | @programmiri • programmiri.rocks
Workflow Regeln → Tests vor Commit → Tests vor Build
→ Tests in Code Review → Improvement Tickets für Refactorings @mirjam_diala • | @programmiri • programmiri.rocks
Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte "
Wann testen? # Wie testen? $ Die 3 wichtigsten Learnings % Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
Wann testen wir? @mirjam_diala • | @programmiri • programmiri.rocks
‼ Neue Funktionalität nur mit Tests @mirjam_diala • | @programmiri
• programmiri.rocks
! Wenn Bug dann Test @mirjam_diala • | @programmiri •
programmiri.rocks
! Tests vor Änderungen @mirjam_diala • | @programmiri • programmiri.rocks
! Idle Time nutzen @mirjam_diala • | @programmiri • programmiri.rocks
Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte ✔
Wann testen? " Wie testen? # Die 3 wichtigsten Learnings $ Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
Wie testen wir? @mirjam_diala • | @programmiri • programmiri.rocks
Reihenfolge ! ⭕ Tests ! @mirjam_diala • " | #
@programmiri • $ programmiri.rocks
Reihenfolge ! ⭕ Tests media source: https://giphy.com/gifs/cartoonhangover-cute-sad- fR7StZn0GlJYdx9Pfs
Reihenfolge ! ⭕ Tests "Characterisation" || "Pinning" media source: https://giphy.com/gifs/cartoonhangover-cute-sad-
fR7StZn0GlJYdx9Pfs
Reihenfolge ! ✅ Tests media source: https://giphy.com/gifs/iiDWuyzFoUvpm
Reihenfolge ! ✅ Tests # ⭕ Refactor -> rinse and
repeat! ! @mirjam_diala • " | # @programmiri • $ programmiri.rocks
Reihenfolge ! ✅ Tests # ✅ Refactor ! ⭕ Tests
# ⭕ Code $ ⭕ Refactor media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte ✔
Wann testen? ✔ Wie testen? " Die 3 wichtigsten Learnings # Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
Mit diesen 3 Tipps kannst du nix mehr falsch machen
quasi @mirjam_diala • | @programmiri • programmiri.rocks
Learning #1 Keep 'em separated media source: https://www.youtube.com/watch?v=1jOk8dk-qaU
Tipp zum Separieren: . . VanillaJS is love, VanillaJS is
life!1 1 Ja ja, gilt auch für TypeScript! media source: https://giphy.com/gifs/ice-oddlysatisfying-cone- uflBFkDR2T9m
Tipp zum Separieren: . . Dumb is the new sexy!2
2 Nur bei Code Komponenten. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
Learning #2 media source: http://t.co/ca31My7
Learning #3 Perfektion ist keine Ausrede “Imperfect action is better
than perfect inaction.” – Harry Truman media source: https://giphy.com/gifs/hoppip-art-film-bOflabuL47FKg
Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte ~~
✔ ~~Wann testen? ✔ Wie testen? ✔ Die 3 wichtigsten Learnings " Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
Hat es was gebracht? @mirjam_diala • | @programmiri • programmiri.rocks
First test 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. @mirjam_diala • | @programmiri
• programmiri.rocks
And that's it! Danke ! → Twitter: @mirjam_diala → Twitter:
@Conf_Buddy → Github/Gitlab: programmiri → Web: programmiri.rocks media source: https://www.youtube.com/watch?v=EH3X4469Aag