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 Slide

  2. 2 000 000 000 writes/day!

    View Slide

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

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. Automated
    CSS Testing
    Not Just a Myth

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. Declarative programming

    View Slide

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

    View Slide

  16. Do not try it @127.0.0.1

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. Mixins
    Variables
    Reuse
    Nesting
    etc.
    Operations

    View Slide

  21. View Slide

  22. Write
    Read

    View Slide

  23. View Slide

  24. View Slide

  25. New styles are added instead of reuse

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. 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 Slide

  30. 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 Slide

  31. Code quality

    View Slide

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

    View Slide

  33. Structural quality
    Reliability Maintainability
    Size Efficiency Security

    View Slide

  34. HOW?

    View Slide

  35. By writing automated
    TESTS!

    View Slide

  36. View Slide

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

    View Slide

  38. Testing CSS

    View Slide

  39. Code
    ???
    Profit
    Declarative
    Dilemma

    View Slide

  40. Let’s try!

    View Slide

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

    View Slide

  42. 1

    View Slide

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

    View Slide

  44. 2

    View Slide

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

    View Slide

  46. View Slide

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

    View Slide

  48. 3

    View Slide

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

    View Slide

  50. View Slide

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

    View Slide

  52. 4

    View Slide

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

    View Slide

  54. View Slide

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

    View Slide

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

    View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. WHAT
    is the
    MISSING PIECE?

    View Slide

  61. Design first

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  68. View Slide

  69. Click

    View Slide

  70. View Slide

  71. Examples

    View Slide

  72. 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 Slide

  73. 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 Slide



  74. <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 Slide

  75. Now what?

    View Slide

  76. View Slide

  77. Join in!

    View Slide

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

    View Slide

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

    View Slide