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
86
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
72
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
56
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
83
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
programmiri
0
300
Other Decks in Programming
See All in Programming
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
130
単体テストの始め方/作り方
toms74209200
0
510
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
320
WindowInsetsだってテストしたい
ryunen344
1
190
ReadMoreTextView
fornewid
1
450
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
290
Datadog RUM 本番導入までの道
shinter61
1
310
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
580
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
GoのGenericsによるslice操作との付き合い方
syumai
2
670
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A better future with KSS
kneath
239
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Pragmatic Product Professional
lauravandoore
35
6.7k
How to Ace a Technical Interview
jacobian
277
23k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A designer walks into a library…
pauljervisheath
206
24k
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