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
180
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
110
AgentConf - Where is my error gone?
bovandersteene
0
370
Nest the backend for your Angular Application @AngularConnect
bovandersteene
2
1.2k
Other Decks in Programming
See All in Programming
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
970
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
150
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
740
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
620
階層化自動テストで開発に機動力を
ickx
1
420
Hack Claude Code with Claude Code
choplin
8
2.8k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
iOS開発スターターキットの作り方
akidon0000
0
180
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.2k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Gamification - CAS2011
davidbonilla
81
5.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Statistics for Hackers
jakevdp
799
220k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
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