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
93
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
73
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
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
87
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
programmiri
0
300
Other Decks in Programming
See All in Programming
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
AIコーディングAgentとの向き合い方
eycjur
0
230
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
890
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
180
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
Namespace and Its Future
tagomoris
5
370
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
コーディングエージェント時代のNeovim
key60228
1
100
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
310
State of CSS 2025
benjaminkott
1
120
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Side Projects
sachag
455
43k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Cult of Friendly URLs
andyhume
79
6.5k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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