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
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
Laravel Boost 超入門
fire_arlo
2
190
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
20
4.8k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
240
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
670
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.2k
testingを眺める
matumoto
1
130
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
190
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
TDD 実践ミニトーク
contour_gara
1
280
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Building Applications with DynamoDB
mza
96
6.6k
For a Future-Friendly Web
brad_frost
180
9.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Rails Girls Zürich Keynote
gr2m
95
14k
Bash Introduction
62gerente
615
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Optimizing for Happiness
mojombo
379
70k
Building Adaptive Systems
keathley
43
2.7k
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