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
Implementing a test suite in an existing Front...
Search
Mirjam Aulbach
February 23, 2021
Programming
0
150
Implementing a test suite in an existing Frontend application
Slides to my talk at JS World Conference 2021.
Mirjam Aulbach
February 23, 2021
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
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
Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen
programmiri
0
300
Other Decks in Programming
See All in Programming
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
AI Ramen Fight
yusukebe
0
120
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
560
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
36
11k
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
370
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
TypeScriptでDXを上げろ! Hono編
yusukebe
4
930
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
430
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
510
decksh - a little language for decks
ajstarks
4
21k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Embracing the Ebb and Flow
colly
86
4.8k
Building an army of robots
kneath
306
45k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Optimizing for Happiness
mojombo
379
70k
Practical Orchestrator
shlominoach
190
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
Better late than never
Mirjam ! Software Engineer twitter: @mirjam_diala | github/gitlab: @programmiri
I ! Testing twitter: @mirjam_diala | github/gitlab: @programmiri
Me when someone says they don't like testing twitter: @mirjam_diala
| github/gitlab: @programmiri
Roadmap ✔ Hello World! " Where we started # First
steps $ When to test? % How to test? & The 3 most important learnings ' Summary twitter: @mirjam_diala | github/gitlab: @programmiri
Where we started twitter: @mirjam_diala | github/gitlab: @programmiri
twitter: @mirjam_diala | github/gitlab: @programmiri
23.03.2018 » 38.181 lines of code » 291 JS files
» 238 React components twitter: @mirjam_diala | github/gitlab: @programmiri
UI Tests: 877 twitter: @mirjam_diala | github/gitlab: @programmiri
Integration and Unit Tests: 0 twitter: @mirjam_diala | github/gitlab: @programmiri
actual footage of me seeing this numbers media source: https://giphy.com/gifs/queen-recap-geek-V9SviiJPLyFQ4/
Legacy Code? twitter: @mirjam_diala | github/gitlab: @programmiri
"Nobody touch nothing" Alien, 1986 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
Solution? twitter: @mirjam_diala | github/gitlab: @programmiri
twitter: @mirjam_diala | github/gitlab: @programmiri
Why retrofit a test suite? (for real) twitter: @mirjam_diala |
github/gitlab: @programmiri
Why retrofit a test suite » become futureproof » keep
the Extensibility » Refactoring easier » reduce bugs long-term » find bugs before my user does media source: https://gfycat.com/piercinghospitabledwarfrabbit
"We're going to rewrite that anyway!" media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR
Roadmap ✔ Hello World! ✔ Where we started " First
steps # When to test? $ How to test? % The 3 most important learnings & Summary twitter: @mirjam_diala | github/gitlab: @programmiri
First steps twitter: @mirjam_diala | github/gitlab: @programmiri
You have to sell this twitter: @mirjam_diala | github/gitlab: @programmiri
How to tell my... » !"#$% » &'() » *+,⏰
twitter: @mirjam_diala | github/gitlab: @programmiri
Useful tools media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2
Useful tools Will support you before the first test -
pinky promise » Code formatter and linting » Component library » Faster UI tests » Error tracking twitter: @mirjam_diala | github/gitlab: @programmiri
Workflow rules media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW
Workflow rules » Tests before commit » Tests before build
» Tests are part of code review » Improvement tickets for refactorings twitter: @mirjam_diala | github/gitlab: @programmiri
Roadmap ✔ Hello World! ✔ Where we started ✔ First
steps " When to test? # How to test? $ The 3 most important learnings % Summary twitter: @mirjam_diala | github/gitlab: @programmiri
When to test? twitter: @mirjam_diala | github/gitlab: @programmiri
‼ New functionality only with tests twitter: @mirjam_diala | github/gitlab:
@programmiri
! If Bug then test twitter: @mirjam_diala | github/gitlab: @programmiri
! Test before changes twitter: @mirjam_diala | github/gitlab: @programmiri
! Use idle times twitter: @mirjam_diala | github/gitlab: @programmiri
Roadmap ✔ Hello World! ✔ Where we started ✔ First
steps ✔ When to test? " How to test? # The 3 most important learnings $ Summary twitter: @mirjam_diala | github/gitlab: @programmiri
How to test? twitter: @mirjam_diala | github/gitlab: @programmiri
Order ! ⭕ Tests twitter: @mirjam_diala | github/gitlab: @programmiri
Order ! ⭕ Tests media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
Order ! ⭕ Tests "Characterisation" || "Pinning" media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
Order ! ✅ Tests # ⭕ Refactor -> rinse and
repeat! twitter: @mirjam_diala | github/gitlab: @programmiri
Order ! ✅ Tests # ✅ Refactor ! ⭕ Tests
# ⭕ Code $ ⭕ Refactor media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
Roadmap ✔ Hello World! ✔ Where we started ✔ First
steps ✔ When to test? ✔ How to test? " The 3 most important learnings # Summary twitter: @mirjam_diala | github/gitlab: @programmiri
With this 3 tips you can't do ANYTHING wrong again
probably twitter: @mirjam_diala | github/gitlab: @programmiri
Tip # 1: Keep 'em separated media source: https://www.youtube.com/watch?v=1jOk8dk-qaU
Tip for separating: . . VanillaJS is love, VanillaJS is
life! Yeah, ok, you can also use Typescript
Tip for separating: . . Dumb is the new sexy!1
1 Only with code components. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
Tip #2: media source: http://t.co/ca31My7
Tip #3: Perfection is not an excuse “Imperfect action is
better than perfect inaction.” – Harry Truman media source: https://giphy.com/gifs/hoppip-art-film-bOflabuL47FKg
Roadmap ✔ Hello World! ✔ Where we started ✔ First
steps ✔ When to test? ✔ How to test? ✔ The 3 most important learnings " Summary twitter: @mirjam_diala | github/gitlab: @programmiri
So... did it work? twitter: @mirjam_diala | github/gitlab: @programmiri
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. twitter: @mirjam_diala | github/gitlab:
@programmiri
And that's it! Thanks ! » twitter: @mirjam_diala » github/gitlab:
programmiri » web: programmiri.rocks media source: https://www.youtube.com/watch?v=EH3X4469Aag