Take a snapshot - ngvikings

Transcript

1. Take a snapshot Bo Vandersteene @reibo_bo
2. @reibo_bo @reibo_bo @bo.vandersteene Software Engineer & Coach
3. Snapshot
5. Snapshot a component
9. Snapshot a block of code
12. Test case Render UI component Test against snapshot
13. How we do it with Jasmine
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
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
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
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!
52. RxJs
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
63. Mock
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