$30 off During Our Annual Pro Sale. View Details »

Take a snapshot - ngvikings

Avatar for Bo Vandersteene Bo Vandersteene
May 28, 2019
Programming
0
190

Take a snapshot - ngvikings

Avatar for Bo Vandersteene

Bo Vandersteene

May 28, 2019
Tweet

More Decks by Bo Vandersteene

See All by Bo Vandersteene
Nest the backend for your Angular Application #ijs2019
Avatar for Bo Vandersteene bovandersteene
0
110
AgentConf - Where is my error gone?
Avatar for Bo Vandersteene bovandersteene
0
370
Nest the backend for your Angular Application @AngularConnect
Avatar for Bo Vandersteene bovandersteene
2
1.2k

Other Decks in Programming

See All in Programming
AIコーディングエージェント（Manus）
Avatar for kondai kondai24
0
130
WebRTC と Rust と 8K 60fps
Avatar for tnoho tnoho
2
1.9k
『実践MLOps』から学ぶ DevOps for ML
Avatar for Satsuki Nagae nsakki55
2
550
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
Avatar for ZOZO Developers zozotech
PRO
8
4.1k
GeistFabrik and AI-augmented software development
Avatar for Ade Oshineye adewale
PRO
0
250
CSC305 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
Avatar for ternbusty ternbusty
7
1.9k
ローターアクトEクラブ アメリカンナイト：川端 柚菜 氏（Japan O.K. ローターアクトEクラブ 会長）:2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
490
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
Avatar for matsu_chara matsu_chara
1
210
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
210
ViewファーストなRailsアプリ開発のたのしさ
Avatar for sugiwe sugiwe
0
400
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
1
140

Featured

See All Featured
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
470
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
700
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
960

Transcript

  1. Take a snapshot Bo Vandersteene @reibo_bo

  2. @reibo_bo @reibo_bo @bo.vandersteene Software Engineer & Coach

  3. Snapshot

  4. None

  5. Snapshot a component

  6. None
  7. None
  8. None

  9. Snapshot a block of code

  10. None
  11. None

  12. Test case Render UI component Test against snapshot

  13. How we do it with Jasmine

  14. None

  15. • A lot of lines • Forget code to test

    • Hard to define all cases • Nice feedback • ...

  16. Should we skip

  17. E2E <> Unit

  18. Unit test - Small easily - Function - Class -

    Complex algorithm

  19. E2E test - Take screenshots - Entire application - Flows

    - Cypress, protractor, ...

  20. Unit tests !

  21. Testing is HARD

  22. None

  23. Why Jest Fast Sandboxed Zero Config Snapshots Error reporting

  24. Zero config

  25. http://bit.ly/2M28O9W

  26. http://bit.ly/2M28O9W

  27. http://bit.ly/2M28O9W

  28. http://bit.ly/2M28O9W Each app/lib tsconfig.spec.json

  29. http://bit.ly/2M28O9W

  30. http://bit.ly/2M28O9W Each app/lib angular.json

  31. http://bit.ly/2M28O9W

  32. http://bit.ly/2M28O9W

  33. http://bit.ly/2M28O9W

  34. Snapshot testing

  35. None
  36. None
  37. None
  38. None

  39. • Creates the snapshot if it doesn’t exist

  40. • Creates the snapshot if it doesn’t exist

  41. • Creates the snapshot if it doesn’t exist

  42. None
  43. None

  44. • Creates the snapshot if it doesn’t exist • Compares

    expectation to stored snapshot • Performs a diff

  45. • Creates the snapshot if it doesn’t exist • Compares

    expected to stored snapshot • Performs a diff • Easily update snapshot on refactor

  46. • Creates the snapshot if it doesn’t exist • Compares

    expected to stored snapshot • Performs a diff • Easily update snapshot on refactor

  47. Commit snapshot

  48. Not only components!

  49. None
  50. None
  51. None

  52. RxJs

  53. None
  54. None
  55. None
  56. None

  57. Globals

  58. 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
  59. None
  60. None
  61. None
  62. None

  63. Mock

  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None

  73. Tips & Tricks

  74. Make your tests your documentation

  75. Test logic

  76. Use beforEach Use afterEach

  77. Treat snapshots as code

  78. Tests should be deterministic

  79. Units NOT methods

  80. ng test -u

  81. Commit snapshots

  82. ci-tools ng test

  83. Love testing

  84. Thank You @reibo_bo @bo.vandersteene https://github.com/reibo/jest-example