Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Take a snapshot - ngvikings

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Bo Vandersteene Bo Vandersteene
May 28, 2019
Programming
200
0

Take a snapshot - ngvikings

Avatar for Bo Vandersteene

Bo Vandersteene

May 28, 2019

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
SlackアプリとLambdaの 連携を構築した話
Avatar for pawn pawn_4_s
1
110
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
500
メールのエイリアス機能を履き違えない
Avatar for 船長（せんちょう） isshinfunada
0
230
Cloudflare is Agents
Avatar for chimame chimame
0
160
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
200
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
470
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
680
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
140
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
540
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
Avatar for nori se4weed
1
360
ITヒヤリハットを整理してみた ～ライフサイクルと原因から考える再発防止策～
Avatar for kouki.miura koukimiura
1
140
自動化したのに回らない テスト運用の壁 ―AI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
140

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
520
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
930
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
470
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.7k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k

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