Snapshot Testing: Going beyond UI

Snapshot-based testing re-gained its popularity in front-end development with Enzyme and Jest projects. It became a handy way of testing complex UI components representation.

In this talk, I want to show a little bit of history and philosophy behind snapshot based testing. Its usage does not only apply to UI components but also HTTP API's and legacy systems.

Transcript

1. SNAPSHOT TESTING .. going beyond UI June 2018 @berlinjs
2. WHAT IS THE ONE THING THAT INFLUENCED MY PROFESSIONAL CARRIER?
3. TEST DRIVEN DEVELOPMENT the only way to fix your fuckups before anybody else sees it.
4. Alexander Beletsky Ph.D, Software Engineer, Lead Architect at blogfoster GmbH http://beletsky.net https://github.com/alexbeletsky @alexbeletsky
5. YOU HEARD ABOUT JEST, RIGHT?
7. LONG, LONG TIME AGO…
8. APPROVAL TESTING one of the first implementations snapshot testing with nicer UX. by Llewellyn Falco
9. COMPUTERS are great with COMPUTATION
10. HUMANS are great with RECOGNITION
11. Let the machine perform the computation, but leave a human to make a decision if this computation is right.
12. THE CONCEPT
13. It all comes to understanding the state of the system and the representation of this state (output of system).
14. STATE REPRESENTATION front-end people In case of Redux-based applications, the state is actual Redux state. For else, it’s typically set of models. The UI rendered by Browser (HTML / CSS / JS)
15. STATE REPRESENTATION back-end people Any kind of database and server business logic that process the data JSON / HTML / XML (or any other) Server response
16. STATE REPRESENTATION mobile people The model or set of models, initialized from server or local storages The UI rendered by mobile platform (iOS, Android)
17. The most important to make the concept work, is being able to “freeze” the state and get the as full as representation of the system as possible.
18. const R = f (State); expect(R.serialize()).toMatchSnapshot(); * the only 2 lines of code in this presentation ** and yes, I’m using semicolons in JS
19. The representation of the system’s state should be serialized into some appropriate format, could be anything that satisfies couple of properties..
20. It should be, Diffable for machines so if there is change between two different snapshots, the machine able to detect difference.
21. It should be, Readable for humans so if there is change occurred, human is able to understand it and say if it’s right or not
22. THE PRACTICE
23. Once upon a time, at work..
24. COMBINATORIAL COMPLEXITY of testing too many parameters, too many combinations of tests to cover a case.
25. … With HTML and many combinations, asserts didn’t work
26. STATE REPRESENTATION MongoDB with `.invoices` collection to store invoices documents + incoming query parameters HTML/PDF of the invoice, served by /v1/invoices/{id}.html endpoint /v1/invoices/447.html?lang=de +
27. transform all possible combinations and validate them “manually”.
28. }
29. https://medium.com/blogfoster-engineering/how-to-use-the-power-of-jests-snapshot-testing-without-using-jest-eff3239154e5
30. THE BENEFITS
31. 1. TESTING OF COMPLEX REPRESENTATIONS HTML/XML/CSS and more complex formats as images
32. 2. FOCUS ON BEHAVIOR OF THE SYSTEM With snapshot you have to run full integration test, many parts of the system involved.
33. 3. SNAPSHOTS AS PART OF PULL REQUEST Seeing a change to snapshot during review of code changes is a great benefit.
34. THANKS, http://beletsky.net http://engineering.blogfoster.com/ @alexbeletsky