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

Take a snapshot - ngvikings

Bo Vandersteene
May 28, 2019
Programming
0
86

Take a snapshot - ngvikings

Bo Vandersteene

May 28, 2019
Tweet

More Decks by Bo Vandersteene

See All by Bo Vandersteene
Nest the backend for your Angular Application #ijs2019
bovandersteene
0
90
AgentConf - Where is my error gone?
bovandersteene
0
190
Nest the backend for your Angular Application @AngularConnect
bovandersteene
2
820

Other Decks in Programming

See All in Programming
組織と技術の両輪で開発を加速させるkintoneチームの取り組み / JJUG CCC 2022 Fall Cybozu kintone
itchyny
0
480
최신 Flutter Desktop 톺아보기 - DevFest 2022 Songdo
itsmedreamwalker
0
190
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
140
Django REST Framework はじめの一歩 〜 押さえておきたい３つのポイント 〜 / First step of Django REST Framework (stapy#87 2022)
akiyoko
0
760
よくあるケースから学ぶ！AWS で想定外のコスト増につながるような実装や設計
track3jyo
PRO
9
650
RailsGirlsGatheringJapan2022
maimux2x
0
110
排他制御のためだけに渋々 Redis 使ってませんか？
mpyw
7
760
클라우드 시대에 맞는 사이트 신뢰성 엔지니어
outsider
0
630
Yet Another KMP*
ilkeraslan
0
110
Being On Call Does Not Have to Suck.
charity
0
570
NAVER Map in Jetpack Compose
fornewid
1
360
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
150

Featured

See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
65
7.5k
Three Pipe Problems
jasonvnalue
89
8.8k
Done Done
chrislema
176
14k
Visualization
eitanlees
126
12k
No one is an island. Learnings from fostering a developers community.
thoeni
11
1.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
Thoughts on Productivity
jonyablonski
48
2.6k
The Cult of Friendly URLs
andyhume
68
5k
Typedesign – Prime Four
hannesfritz
34
1.5k

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