Lessons Learnt with Visual Testing and Snapshots

Transcript

1. Lessons Learnt with Visua Tests 🤳 and Snapshots 📸 @sendi kumarn
2. I am Sendi tweets @sendi kumarn mai @ he o@sendi kumarn.com He o @sendi kumarn
3. https://sendi kumarn.com/wasm-book/ Packt @sendi kumarn
4. Deve opment is fun 🐱 💻 https://xkcd.com/1739/ @sendi kumarn
5. Testing is boring! @sendi kumarn
6. Testing requires a ot of time & effort @sendi kumarn
7. But... @sendi kumarn
8. Testing gives confidence to ship @sendi kumarn
9. Testing guarantees user experience @sendi kumarn
10. Testing enhances deve oper experience @sendi kumarn
11. Testing is essentia . How to do it ? @sendi kumarn
12. Frontend Testing Unit Testing Component Testing Visua Testing @sendi kumarn
13. Frontend Testing Unit Testing Component Testing Visua Testing # of tests High Medium Low @sendi kumarn
14. Frontend Testing Unit Testing Component Testing Visua Testing # of tests High Medium Low Time to write Low Medium High @sendi kumarn
15. Frontend Testing Unit Testing Component Testing Visua Testing # of tests High Medium Low Time to write Low Medium High Confidence to ship Low Medium High @sendi kumarn
16. Frontend Testing Unit Testing Component Testing Visua Testing # of tests High Medium Low Time to write Low Medium High Confidence to ship Low Medium High Time to execute Low Medium High @sendi kumarn
17. Unit Testing @sendi kumarn
18. Unit Testing Component Testing Uti Testing @sendi kumarn
19. Component Testing Test the functiona ity of the component @sendi kumarn
20. Component Testing Test the functiona ity of the component @sendi kumarn
21. Component Testing Test the functiona ity of the component Load the component @sendi kumarn
22. Component Testing Test the functiona ity of the component Manua y va idate the functiona ity @sendi kumarn
23. Component Testing Test the functiona ity of the component Changes!! @sendi kumarn
24. Snapshot Testing Test how the component renders. @sendi kumarn
25. Snapshot Testing Test how the component renders. Load the component @sendi kumarn
26. Snapshot Testing Test how the component renders. match it with the snapshot object @sendi kumarn
27. Snapshot Testing - How it works? > npm run test For the first time, it renders the component and automagica y creates a text b ob in a fi e ca ed .snap. > npm run test u Wi update the snapshot @sendi kumarn
28. Snapshot Testing • It is super easy to maintain testing code • It makes tests consistent (no browsers invo ved) • It is magica ✨ • It enormous y reduces time to write/update tests @sendi kumarn
29. Snapshot Testing @sendi kumarn
30. But... @sendi kumarn
31. B oats Code base Source Code Testing Code Snapshots Con guration 22 28 47 3 approximate on few open source projects Based on Lines of code @sendi kumarn
32. B oats Pu Requests more ines of code - ess effective the code review is @sendi kumarn
33. Easy to ose context • Test names shou d be exp icit • Stricter ru es when writing • Do not b ind y update snapshots @sendi kumarn
34. As with many other things, they are awesome too s when used correct y @sendi kumarn
35. Don't over do it Do not write snapshot testing everywhere, use it on y for presentationa components (without much ogic). @sendi kumarn
36. Use mount/sha ow correct y • sha ow • do not render chi d. • tests constructor / render • mount • renders chi d. • tests componentDidMount @sendi kumarn
37. Snapshot is code. When reviewing code make sure the snapshots are given equa importance and it is code (even though it is autogenerated). @sendi kumarn
38. Sing e Responsibi ity In genera your tests in snapshot shou d have a sing e responsibi ity. Do not over oad snapshot tests. @sendi kumarn
39. Periodica y revise Revise and update tests when you add more features into the component. @sendi kumarn
40. Unit Testing with snapshot • Faster and easier to write / maintain • Takes ess time to run • Can run oca y • Setup is fast and easy @sendi kumarn
41. Visua Testing He o Ha o Test Suites: 1 failed, 1 total Tests: 1 failed, 1 total Snapshots: 0 total Time: 1.782 s Ran all test suites. @sendi kumarn
42. Goto page @sendi kumarn
43. Puppeteer provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. Puppeteer @sendi kumarn
44. jest yarn add --dev jest-puppeteer { "preset": "jest-puppeteer"} @sendi kumarn
45. Load the browser (new tab) @sendi kumarn
46. Go to page @sendi kumarn
47. Take a screenshot @sendi kumarn
48. Take a screenshot @sendi kumarn
49. Save the image He o he o.png @sendi kumarn
50. Verify the image He o he o.png @sendi kumarn
51. Match it with snapshot@sendi kumarn
52. Pixe Match @sendi kumarn
53. Visua Testing • It provides visua confirmation • It increases confidence over what we ship • It is magica ✨ • It reduces time to write tests @sendi kumarn
54. Visua Testing @sendi kumarn
55. B oats Code base Source Code Testing Code Screenshots Other 13 28 56 3 approximate va ue based on few open source projects Based on Fi e size @sendi kumarn
56. Increases CI time ~23% increase in the CI time @sendi kumarn
57. Screenshot!!! 🤯 @sendi kumarn
58. Screenshot dependencies Rendering differs based on OS / Browser / aspect ratio @sendi kumarn
59. Screenshot dependencies Rendering differs based on OS / Browser / aspect ratio Fixes: - Docker Image - CI on different OS - Fixing image size @sendi kumarn
60. Page State Maintaining the state of page when taking screenshots @sendi kumarn
61. Page State Maintaining the state of page when taking screenshots Fixes: - Storybook - Components - Generates static page - Mock the response @sendi kumarn
62. UI Changes Updating the Screenshot is tedious and time consuming. @sendi kumarn
63. UI Changes Updating the Screenshot is tedious and time consuming. Fixes: - Introduce Screenshot testing on y for the re eased features @sendi kumarn
64. Others.. Keep the screenshot in the same repo if the repo is sma er. Move out when the source code grows. @sendi kumarn
65. Others.. hand e animations / b inking cursor / spinner / progress bar and other motion @sendi kumarn
66. So far... • Use it for components with ogics • Use proper name for the tests. Unit Testing • Use it for presentationa components. • Keep it simp e • Use proper name for the tests. • Treat snapshots as a code. Snapshot Testing • Use it for user facing UI. • Test them for various form-factor / devices / Operating Systems • Use a separate repo if needed. • Run / Test them as a part of dep oyment process. Visua Testing @sendi kumarn
67. Testing @sendi kumarn
68. Testing Use inters / types effective y. @sendi kumarn
69. A ways remember, tests shou d increase the confidence to re ease and ensure things are working. It shou d not be a burden. Testing @sendi kumarn
70. Do not over-engineer and over-use too s Use it wise y. Testing @sendi kumarn
71. @sendi kumarn