$30 off During Our Annual Pro Sale. View Details »

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.

Alexander Beletsky

June 22, 2018
Tweet

More Decks by Alexander Beletsky

Other Decks in Programming

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