Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
Mirjam Aulbach
July 25, 2019
Programming
0
150
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
23
Implementing a test suite in an existing Frontend application
programmiri
0
110
Better late than never - Retrofit test suite in existing React apps
programmiri
0
44
Treat yourself - EnterJS 2020
programmiri
0
47
Treat yourself - A tale about dogtraining and test driven development
programmiri
1
280
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
34
Full Skill Developer
programmiri
3
370
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
260
My approach to a component-based CSS
programmiri
0
63
Other Decks in Programming
See All in Programming
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
microcms
0
470
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
1
290
Reinventing the wheel ... as a service
mariofusco
3
260
脱オブジェクト指向講座(5分LT資料)
kishida
8
11k
roadmap to rust 2024
matsu7874
1
830
Swift Concurrencyによる安全で快適な非同期処理
tattn
2
320
2022 FrontEnd Training
mixi_engineers
1
280
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
3
1.8k
Licences open source : entre guerre de clochers et radicalité
pylapp
1
270
The future of trust stores in Python
sethmlarson
0
180
GraphQL+KMM開発でわかったこと / What we learned from GraphQL+KMM development
kubode
0
130
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-systems
grapecity_dev
0
130
Featured
See All Featured
Teambox: Starting and Learning
jrom
121
7.6k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Web Components: a chance to create the future
zenorocha
303
40k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
Building Applications with DynamoDB
mza
83
4.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
Rails Girls Zürich Keynote
gr2m
86
12k
Six Lessons from altMBA
skipperchong
14
1.3k
How GitHub (no longer) Works
holman
296
140k
Designing the Hi-DPI Web
ddemaree
272
32k
Facilitating Awesome Meetings
lara
29
3.9k
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:
mirjam.baeuerlein@cosee.biz media source: https://www.youtube.com/watch?v=EH3X4469Aag