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
84
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
110
Treat yourself - EnterJS 2020
programmiri
0
65
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
55
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
81
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
programmiri
0
300
Other Decks in Programming
See All in Programming
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
130
Investigating Multithreaded PostgreSQL
macdice
0
150
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.6k
TypeScript LSP の今までとこれから
quramy
0
110
漸進。
ssssota
0
1.2k
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
630
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
570
External SecretsのさくらProvider初期実装を担当しています
logica0419
0
240
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
830
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A designer walks into a library…
pauljervisheath
205
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
Site-Speed That Sticks
csswizardry
7
590
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
GitHub's CSS Performance
jonrohan
1031
460k
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