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
120
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
98
AgentConf - Where is my error gone?
bovandersteene
0
280
Nest the backend for your Angular Application @AngularConnect
bovandersteene
2
990
Other Decks in Programming
See All in Programming
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
300
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
元気予報
suu_mire0726
0
860
OpenTelemetry のサービスという概念について
azukiazusa1
2
1.1k
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
Java 22 Overview
kishida
1
170
Featured
See All Featured
Producing Creativity
orderedlist
PRO
336
39k
For a Future-Friendly Web
brad_frost
171
8.9k
Embracing the Ebb and Flow
colly
79
4.1k
Adopting Sorbet at Scale
ufuk
67
8.6k
Building an army of robots
kneath
300
41k
Designing for Performance
lara
601
67k
Bash Introduction
62gerente
604
210k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
What's in a price? How to price your products and services
michaelherold
237
11k
Git: the NoSQL Database
bkeepers
PRO
422
63k
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