Snapshot Testing: Going beyond UI

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.

F32f547e66f3b6528376d67fdb67008f?s=128

Alexander Beletsky

June 22, 2018
Tweet

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?

  6. None
  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