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 bestehenden React-Apps nachziehen
Search
Mirjam Aulbach
July 25, 2019
Programming
0
260
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
Slides to my talk at the coseeTechTalks Meetup in July 2019.
Mirjam Aulbach
July 25, 2019
Tweet
Share
More Decks by Mirjam Aulbach
See All by Mirjam Aulbach
Besser spät als nie - Testsuite in bestehende React Application nachziehen
programmiri
0
81
Implementing a test suite in an existing Frontend application
programmiri
0
140
Better late than never - Retrofit test suite in existing React apps
programmiri
0
93
Treat yourself - EnterJS 2020
programmiri
0
56
Treat yourself - A tale about dogtraining and test driven development
programmiri
1
450
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
44
Full Skill Developer
programmiri
3
490
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
360
My approach to a component-based CSS
programmiri
0
69
Other Decks in Programming
See All in Programming
Introduction to GitOps
hwchiu
0
110
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
CSC307 Lecture 08
javiergs
PRO
0
330
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
CSC307 Lecture 10
javiergs
PRO
0
310
リハビリmruby
kishima
1
160
Featured
See All Featured
Being A Developer After 40
akosma
72
580k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Atom: Resistance is Futile
akmur
261
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
How GitHub (no longer) Works
holman
305
140k
Transcript
Besser spät als nie! Testsuite in bestehende React Application nachziehen
#CoseeTechTalks
! Mirjam Bäuerlein Frontend Engineer @mirjam_diala • @programmiri • programmiri.de
I ! Testing media source: http://www.latlmes.com/arts/return-of-the-golden-age-of-comics-1
Fahrplan ✔ Hello World! " Ausgangslage # Erste Schritte $
Wann testen? % Wie testen? & Die 3 wichtigsten Learnings ' Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
Ausgangslage @mirjam_diala • @programmiri • programmiri.de
None
Stand 23.03.2018 ̣ 38.181 Zeilen Code ̣ 291 JS Dateien
̣ 238 React Komponenten @mirjam_diala • @programmiri • programmiri.de
UI Tests: 877 @mirjam_diala • @programmiri • programmiri.de
Integration and Unit Tests: 0 @mirjam_diala • @programmiri • programmiri.de
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.de
@mirjam_diala • @programmiri • programmiri.de
Warum Testsuite nachziehen? (ernstha! jetzt mal) @mirjam_diala • @programmiri •
programmiri.de
Warum Testsuite nachziehen? ̣Zukun!ssicher 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!" 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.de
. . Erste Schritte @mirjam_diala • @programmiri • programmiri.de
Verkauf das erst mal @mirjam_diala • @programmiri • programmiri.de
! " @mirjam_diala • @programmiri • programmiri.de
Wie sag ich's... ̣ !"#$% ̣ &'() ̣ *+,⏰ @mirjam_diala
• @programmiri • programmiri.de
Hilfreiche Werkzeuge media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2
Hilfreiche Werkzeuge Helfen vor dem ersten Test, versprochen. ̣ Code
Formatter und Linting ̣ Komponenten Bibliothek ̣ Schnellere UI Tests ̣ Error Tracking @mirjam_diala • @programmiri • programmiri.de
Workflow Regeln media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW
Workflow Regeln ̣ Tests vor Commit ̣ Tests vor Build
̣ Tests in Code Review ̣ Improvement Tickets für Refactorings @mirjam_diala • @programmiri • programmiri.de
Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte "
Wann testen? # Wie testen? $ Die 3 wichtigsten Learnings % Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
Wann testen wir? @mirjam_diala • @programmiri • programmiri.de
‼ Neue Funktionalität nur mit Tests @mirjam_diala • @programmiri •
programmiri.de
! Wenn Bug dann Test @mirjam_diala • @programmiri • programmiri.de
! Test before Changes @mirjam_diala • @programmiri • programmiri.de
! Idle Time nutzen @mirjam_diala • @programmiri • programmiri.de
Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte ✔
Wann testen? " Wie testen? # Die 3 wichtigsten Learnings $ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
Wie testen wir? @mirjam_diala • @programmiri • programmiri.de
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.de
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.de
Mit diesen 3 Tipps kannst du nix mehr falsch machen
beinahe @mirjam_diala • @programmiri • programmiri.de
Tipp # 1: Keep 'em separated media source: https://www.youtube.com/watch?v=1jOk8dk-qaU
Tipp zum Separieren: . . VanillaJS is love, VanillaJS is
life! media source: https://giphy.com/gifs/ice-oddlysatisfying-cone-uflBFkDR2T9m
Tipp zum Separieren: . . Dumb is the new sexy!1
1 Nur bei Code Komponenten. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
2. media source: http://t.co/ca31My7
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.de
Hat es was gebracht? @mirjam_diala • @programmiri • programmiri.de
First test media source: https://www.youtube.com/watch?v=EH3X4469Aag
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.de
And that's it! Danke ! ̣Twitter: @mirjam_diala ̣Github: programmiri ̣Mail:
[email protected]
media source: https://www.youtube.com/watch?v=EH3X4469Aag