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
Take a snapshot - ngvikings
Search
Bo Vandersteene
May 28, 2019
Programming
0
140
Take a snapshot - ngvikings
Bo Vandersteene
May 28, 2019
Tweet
Share
More Decks by Bo Vandersteene
See All by Bo Vandersteene
Nest the backend for your Angular Application #ijs2019
bovandersteene
0
100
AgentConf - Where is my error gone?
bovandersteene
0
310
Nest the backend for your Angular Application @AngularConnect
bovandersteene
2
1.1k
Other Decks in Programming
See All in Programming
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
日付と正規化
megmogmog1965
0
140
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Activities at Cairo Library
cairolibrary720
0
1.2k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
CSC307 Lecture 05
javiergs
PRO
0
210
小さな開発会社を作った理由
polidog
0
1.9k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Terraformテスト入門
msato
0
530
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
How to use Macrobenchmark
veronikapj
0
160
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
In The Pink: A Labor of Love
frogandcode
139
22k
What's in a price? How to price your products and services
michaelherold
239
11k
How to name files
jennybc
67
96k
The Cult of Friendly URLs
andyhume
75
5.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Documentation Writing (for coders)
carmenintech
63
4.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Fireside Chat
paigeccino
25
2.8k
Transcript
Take a snapshot Bo Vandersteene @reibo_bo
@reibo_bo @reibo_bo @bo.vandersteene Software Engineer & Coach
Snapshot
None
Snapshot a component
None
None
None
Snapshot a block of code
None
None
Test case Render UI component Test against snapshot
How we do it with Jasmine
None
• A lot of lines • Forget code to test
• Hard to define all cases • Nice feedback • ...
Should we skip
E2E <> Unit
Unit test - Small easily - Function - Class -
Complex algorithm
E2E test - Take screenshots - Entire application - Flows
- Cypress, protractor, ...
Unit tests !
Testing is HARD
None
Why Jest Fast Sandboxed Zero Config Snapshots Error reporting
Zero config
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W Each app/lib tsconfig.spec.json
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W Each app/lib angular.json
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W
Snapshot testing
None
None
None
None
• Creates the snapshot if it doesn’t exist
• Creates the snapshot if it doesn’t exist
• Creates the snapshot if it doesn’t exist
None
None
• Creates the snapshot if it doesn’t exist • Compares
expectation to stored snapshot • Performs a diff
• Creates the snapshot if it doesn’t exist • Compares
expected to stored snapshot • Performs a diff • Easily update snapshot on refactor
• Creates the snapshot if it doesn’t exist • Compares
expected to stored snapshot • Performs a diff • Easily update snapshot on refactor
Commit snapshot
Not only components!
None
None
None
RxJs
None
None
None
None
Globals
Globals afterAll afterEach beforeAll beforeEach describe.each describe.only describe.only.each describe.skip describe.skip.each
test.each test.only test.only.each test.skip test.skip.each test.todo describe test
None
None
None
None
Mock
None
None
None
None
None
None
None
None
None
Tips & Tricks
Make your tests your documentation
Test logic
Use beforEach Use afterEach
Treat snapshots as code
Tests should be deterministic
Units NOT methods
ng test -u
Commit snapshots
ci-tools ng test
Love testing
Thank You @reibo_bo @bo.vandersteene https://github.com/reibo/jest-example