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
   

   View Slide

2. WHAT IS THE ONE THING
   THAT INFLUENCED MY PROFESSIONAL CARRIER?
   

   View Slide

3. TEST DRIVEN DEVELOPMENT
   the only way to fix your fuckups before anybody else sees it.
   

   View Slide

4. Alexander Beletsky
   Ph.D, Software Engineer, Lead Architect at blogfoster GmbH
   http://beletsky.net
   https://github.com/alexbeletsky
   @alexbeletsky
   

   View Slide

5. YOU HEARD
   ABOUT JEST, RIGHT?
   

   View Slide

6. View Slide

7. LONG, LONG
   TIME AGO…
   

   View Slide

8. APPROVAL
   TESTING
   one of the first implementations snapshot testing with nicer UX.
   by Llewellyn Falco
   

   View Slide

9. COMPUTERS
   are great with
   COMPUTATION
   

   View Slide

10. HUMANS
    are great with
    RECOGNITION
    

    View Slide

11. Let the machine perform the
    computation, but leave a human to
    make a decision if this computation
    is right.
    

    View Slide

12. THE
    CONCEPT
    

    View Slide

13. It all comes to understanding the
    state of the system and the
    representation of this state (output
    of system).
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

19. The representation of the system’s
    state should be serialized into some
    appropriate format, could be
    anything that satisfies couple of
    properties..
    

    View Slide

20. It should be,
    Diffable
    for machines
    so if there is change between two different snapshots, the machine able to detect difference.
    

    View Slide

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
    

    View Slide

22. THE
    PRACTICE
    

    View Slide

23. Once upon a time,
    
    at work..
    

    View Slide

24. COMBINATORIAL
    COMPLEXITY
    of testing
    too many parameters, too many combinations of tests to cover a case.
    

    View Slide

25. … With HTML and many combinations, asserts didn’t work
    

    View Slide

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
    +
    

    View Slide

27. transform all possible combinations and validate them “manually”.
    

    View Slide

28. }
    

    View Slide

29. https://medium.com/blogfoster-engineering/how-to-use-the-power-of-jests-snapshot-testing-without-using-jest-eff3239154e5
    

    View Slide

30. THE
    BENEFITS
    

    View Slide

31. 1. TESTING OF
    COMPLEX
    REPRESENTATIONS
    HTML/XML/CSS and more complex formats as images
    

    View Slide

32. 2. FOCUS ON
    BEHAVIOR OF THE
    SYSTEM
    With snapshot you have to run full integration test, many parts of the system involved.
    

    View Slide

33. 3. SNAPSHOTS AS
    PART OF PULL
    REQUEST
    Seeing a change to snapshot during review of code changes is a great benefit.
    

    View Slide

34. THANKS,
    http://beletsky.net
    http://engineering.blogfoster.com/
    @alexbeletsky
    

    View Slide