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
91
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
520
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
85
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
programmiri
0
300
Other Decks in Programming
See All in Programming
リッチエディターを安全に開発・運用するために
unachang113
1
240
Porting a visionOS App to Android XR
akkeylab
0
910
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
140
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
2
520
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
690
20250708_JAWS_opscdk
takuyay0ne
2
150
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
740
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
テスト駆動Kaggle
isax1015
1
880
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Embracing the Ebb and Flow
colly
86
4.8k
Automating Front-end Workflow
addyosmani
1370
200k
Side Projects
sachag
455
43k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Raft: Consensus for Rubyists
vanstee
140
7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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