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 R...
Search
Mirjam Aulbach
July 25, 2019
Programming
0
300
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
95
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
74
Treat yourself - A tale about dogtraining and test driven development
programmiri
1
530
Treat yourself - a tale about dog training and test-driven develompent
programmiri
0
62
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
91
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Devoxx BE - Local Development in the AI Era
kdubois
0
140
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
One Enishi After Another
snoozer05
PRO
0
160
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
260
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
720
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
Ktorで簡単AIアプリケーション
tsukakei
0
110
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Cult of Friendly URLs
andyhume
79
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Mobile First: as difficult as doing things right
swwweet
225
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Visualization
eitanlees
149
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Into the Great Unknown - MozCon
thekraken
40
2.1k
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