I
!
Testing
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 4
Slide 4 text
Me when someone says they don't like testing
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Where we started
twitter: @mirjam_diala | github/gitlab: @programmiri
"Nobody touch nothing"
Alien, 1986
media source: https://getyarn.io/yarn-clip/7555a768-216e-40a0-9f9d-bb417a138186
Slide 14
Slide 14 text
"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
Why retrofit a test suite?
(for real)
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
"We're going to rewrite that
anyway!"
media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
First steps
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 23
Slide 23 text
You have to sell this
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 24
Slide 24 text
How to tell my...
»
!"#$%
»
&'()
»
*+,⏰
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 25
Slide 25 text
Useful tools
media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
Workflow rules
media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW
Slide 28
Slide 28 text
Workflow rules
» Tests before commit
» Tests before build
» Tests are part of code review
» Improvement tickets for refactorings
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
When to test?
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 31
Slide 31 text
‼
New functionality only with tests
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 32
Slide 32 text
!
If Bug then test
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 33
Slide 33 text
!
Test before changes
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 34
Slide 34 text
!
Use idle times
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
How to test?
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 37
Slide 37 text
Order
! ⭕
Tests
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 38
Slide 38 text
Order
! ⭕
Tests
media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
Slide 39
Slide 39 text
Order
! ⭕
Tests
"Characterisation" || "Pinning"
media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
Slide 40
Slide 40 text
Order
! ✅
Tests
# ⭕
Refactor
-> rinse and repeat!
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 41
Slide 41 text
Order
! ✅
Tests
# ✅
Refactor
! ⭕
Tests
# ⭕
Code
$ ⭕
Refactor
media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
With this 3 tips
you can't do ANYTHING wrong again
probably
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 44
Slide 44 text
Tip # 1:
Keep 'em separated
media source: https://www.youtube.com/watch?v=1jOk8dk-qaU
Slide 45
Slide 45 text
Tip for separating:
.
.
VanillaJS is love, VanillaJS is life!
Yeah, ok, you can also use Typescript
Slide 46
Slide 46 text
Tip for separating:
.
.
Dumb is the new sexy!1
1 Only with code components.
media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
Slide 47
Slide 47 text
Tip #2:
media source: http://t.co/ca31My7
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
So... did it work?
twitter: @mirjam_diala | github/gitlab: @programmiri
Slide 51
Slide 51 text
First test
media source: https://www.youtube.com/watch?v=EH3X4469Aag
Slide 52
Slide 52 text
media source: https://www.youtube.com/watch?v=EH3X4469Aag
Slide 53
Slide 53 text
Actual footage of me testing code
media source: https://www.youtube.com/watch?v=EH3X4469Aag