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
92
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
86
Other Decks in Programming
See All in Programming
Flutterと Vibe Coding で個人開発!
hyshu
1
230
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
780
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
240
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
730
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
36
11k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
実践 Dev Containers × Claude Code
touyu
1
120
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
190
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
430
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Side Projects
sachag
455
43k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Writing Fast Ruby
sferik
628
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Bash Introduction
62gerente
614
210k
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