Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automated CSS Testing: Not just a myth

Jakob Mattsson
September 10, 2013

Automated CSS Testing: Not just a myth

Presented at MMWCON 2013, UCLA, Los Angeles

Jakob Mattsson

September 10, 2013
Tweet

More Decks by Jakob Mattsson

Other Decks in Programming

Transcript

  1. Jakob Mattsson
    @jakobmattsson
    Developer • Entrepreneur • Crazy person

    View full-size slide

  2. 2 000 000 000 writes/day!

    View full-size slide

  3. Quick and easy
    customer feedback.
    touch-and-tell.se

    View full-size slide

  4. Automated
    CSS Testing
    Not Just a Myth

    View full-size slide

  5. The purpose of this presentation:
    Raise awareness
    of existing tools
    Inspire a new
    workflow
    Get your help

    View full-size slide

  6. The purpose of this presentation:
    Raise awareness
    of existing tools
    Inspire a new
    workflow
    Get your help

    View full-size slide

  7. The purpose of this presentation:
    Raise awareness
    of existing tools
    Inspire a new
    workflow
    Get your help

    View full-size slide

  8. The purpose of this presentation:
    Raise awareness
    of existing tools
    Inspire a new
    workflow
    Get your help

    View full-size slide

  9. Declarative programming

    View full-size slide

  10. Declarative programming is a programming
    paradigm that expresses the logic of a computation
    without describing its control flow.”

    View full-size slide

  11. Do not try it @127.0.0.1

    View full-size slide

  12. Mixins
    Variables
    Reuse
    Nesting
    etc.
    Operations

    View full-size slide

  13. New styles are added instead of reuse

    View full-size slide

  14. New styles are added instead of reuse
    Unused styles are not removed

    View full-size slide

  15. New styles are added instead of reuse
    Unused styles are not removed
    No overview of how different styles interact

    View full-size slide

  16. New styles are added instead of reuse
    Unused styles are not removed
    No overview of how different styles interact
    Form factors, adaptiveness, responsiveness

    View full-size slide

  17. New styles are added instead of reuse
    Unused styles are not removed
    No overview of how different styles interact
    Form factors, adaptiveness, responsiveness
    The true ”write-only” language

    View full-size slide

  18. In computer humor, a write-only language is a
    programming language with syntax (or semantics)
    sufficiently dense and bizarre that any routine of
    significant size is too difficult to understand by
    other programmers and cannot be safely edited.”

    View full-size slide

  19. Code quality

    View full-size slide

  20. Functional quality—fitness for purpose
    Structural quality—the degree to which the so!ware
    was produced correctly

    View full-size slide

  21. Structural quality
    Reliability Maintainability
    Size Efficiency Security

    View full-size slide

  22. By writing automated
    TESTS!

    View full-size slide

  23. Refactor
    Red
    Green
    1.Write a test
    that fails
    2.Make the
    code work
    3.Eliminate
    redundancy

    View full-size slide

  24. Code
    ???
    Profit
    Declarative
    Dilemma

    View full-size slide

  25. Let’s try!

    View full-size slide

  26. 1 2 3 4
    Two for code Two for result
    {
    {
    Four approaches

    View full-size slide

  27. Syntax Checks
    Checking that the code is actually valid CSS
    Typically performed by an editor, IDE or plugin

    View full-size slide

  28. Styleguides & linting
    Forces best-practices to be followed
    Syntactically (where to put braces)
    Semantically (catching common mistakes)

    View full-size slide

  29. Useless without good rules
    +
    -
    Prevents anti-patterns
    Easy to apply
    Doesn’t test the end result
    -
    -
    +

    View full-size slide

  30. Screenshots
    Compare visuals before and a"er change
    Detects impact of change

    View full-size slide

  31. Lots of false positives
    +
    -
    No change can sneak by
    Implementation agnostic
    Breaks on content changes
    -
    -
    +

    View full-size slide

  32. Comparing styles in the DOM
    Sniff the DOM for all relevant styles
    Compare them to some expectation

    View full-size slide

  33. Scenario: Standard paragraph color
    Given I visit "http://localhost:3000"
    Then "section > p" should have
    "color" of "rgb(68, 68, 68)"

    View full-size slide

  34. Style rules != looks
    +
    -
    Resilient to changes
    Tests live on
    Writing expectations in code
    -
    -
    +

    View full-size slide

  35. WHAT
    is the
    MISSING PIECE?

    View full-size slide

  36. Design first

    View full-size slide

  37. Refactor
    Red
    Green
    1.Write a test
    that fails
    2.Make the
    code work
    3.Eliminate
    redundancy

    View full-size slide

  38. My suggestion:
    1. Create the
    design you want
    2. Ensure
    consistency and
    compatibility
    3. Eliminate
    redundancy

    View full-size slide

  39. My suggestion:
    1. Create the
    design you want
    2. Ensure
    consistency and
    compatibility
    3. Eliminate
    redundancy

    View full-size slide

  40. My suggestion:
    1. Create the
    design you want
    2. Ensure
    consistency and
    compatibility
    3. Eliminate
    redundancy

    View full-size slide

  41. My suggestion:
    1. Create the
    design you want
    2. Ensure
    consistency and
    compatibility
    3. Eliminate
    redundancy

    View full-size slide

  42. Refactor
    Red
    Green
    1.Create the
    design you want
    2.Ensure
    consistency and
    compatibility
    3.Eliminate
    redundancy

    View full-size slide

  43. ul:last-child {
    color: red;
    }
    Won’t work in IE8. Will be caught
    when test runs there.
    #footer {
    width: calc(100% - 3em);
    }
    Won’t work on Android
    or Safari < 6
    Unsupported CSS-style used

    View full-size slide

  44. CSS-inconsistency across browsers


    <br/>h1, h2, h3, h4, h5, h6, a {<br/>display: block;<br/>}<br/>ul {<br/>list-style-position: inside;<br/>}<br/>




    Foobar




    Chrome
    Firefox

    View full-size slide



  45. <br/>body { margin:0; padding:0; }<br/>div { margin:0; padding:10; }<br/>


    Foobar




    <br/>body { margin:10; padding:0; }<br/>div { margin:0; padding:0; }<br/>


    Foobar


    Detecting equivalent styles
    This change does not trigger an error; the rendered
    result is the same, even though styles differ.

    View full-size slide

  46. Automated
    CSS Testing
    Not Just a Myth
    @jakobmattsson • [email protected]
    github.com/leanmachine/testbit

    View full-size slide

  47. Automated
    CSS Testing
    Not Just a Myth
    @jakobmattsson • [email protected]
    github.com/leanmachine/testbit
    bit.ly/jakob-mmwcon
    +
    -

    View full-size slide