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
0
200

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主導でFastAPIのWebサービスを作るときに 人間が構造化すべき境界線
Avatar for Jun okazaki okajun35
0
640
AI時代でも変わらない技術コミュニティの力～10年続く“ゆるい”つながりが生み出す価値
Avatar for Takehata Naoto n_takehata
2
680
米国のサイバーセキュリティタイムラインと見る Goの暗号パッケージの進化
Avatar for tom twinkle tomtwinkle
2
530
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
Avatar for ya_ma23 ya_ma23
0
160
手戻りゼロ？ Spec Driven Developmentとは@KAG AI week
Avatar for Tomoki Hirai tmhirai
1
170
Vuetify 3 → 4 何が変わった？差分と移行ポイント10分まとめ
Avatar for kouki.miura koukimiura
0
100
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
170
Windows on Ryzen and I
Avatar for 瀬尾佳隆 seosoft
0
220
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
Avatar for atani atani14
0
360
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
Avatar for n4mlz n4mlz
0
110
AI時代のソフトウェア開発でも「人が仕様を書く」から始めよう-医療IT現場での実践とこれから
Avatar for kouki.miura koukimiura
0
140
DSPy入門 Pythonで実現する自動プロンプト最適化 〜人手によるプロンプト調整からの卒業〜
Avatar for sea-turt1e seaturt1e
1
620

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
150
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
220
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
150
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.4k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
47k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
140

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