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
91
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
85
Other Decks in Programming
See All in Programming
構文解析器入門
ydah
7
1.8k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
150
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
190
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.2k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
440
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
階層化自動テストで開発に機動力を
ickx
1
410
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
110
MCPで実現できる、Webサービス利用体験について
syumai
6
1.8k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
26
8k
GPUを計算資源として使おう!
primenumber
1
290
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
14k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
It's Worth the Effort
3n
185
28k
The Invisible Side of Design
smashingmag
301
51k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Docker and Python
trallard
45
3.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
GraphQLとの向き合い方2022年版
quramy
49
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Scaling GitHub
holman
461
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