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

Automated Testing & CSS

Automated Testing & CSS

Test-Driven Development has grown in popularity among the community in the past few years, but we're still lacking the proper tools to provide automation behind our CSS. How do you know a change you made to one small section on a page doesn't break a large section on another page of your site, especially when you support hundreds of devices? These slides look at three options available and show where they succeed and fail.

Kevin Lamping

October 21, 2013
Tweet

More Decks by Kevin Lamping

Other Decks in Technology

Transcript

  1. Automated Testing
    & CSS
    Kevin Lamping, Rackspace
    Front-end Engineer
    @klamping

    View Slide

  2. When I change the CSS

    View Slide

  3. “Insanity: doing the same
    thing over and over
    again and expecting
    different results.”

    View Slide

  4. “Insanity: doing the same
    thing over and over
    again and enjoying it.”

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. “Despite CSS being so
    hard to maintain, it's often
    the part of the FE stack
    people are least interested
    in protecting from tech
    debt.” @necolas

    View Slide

  12. The Tools
    Wraith, Hardy, StyleDocco

    View Slide

  13. Wraith

    View Slide

  14. View Slide

  15. +

    View Slide

  16. View Slide

  17. View Slide

  18. Installation
    $ curl -fsSL https://raw.github.com/bbc-news/wraith/
    go/install | bash
    $ cd wraith
    $ bundle install

    View Slide

  19. Demo

    View Slide

  20. Wraith - Recap
    •Easy, simple set up
    •Nice site to view diffs
    •Entire screen comparison is bad
    for dynamic sites
    •No IE Testing
    •Need two sites with same content

    View Slide

  21. View Slide

  22. View Slide

  23. Installation
    $ npm install -g hardy

    View Slide

  24. Demo

    View Slide

  25. Selector Maps
    selectors.js
    module.exports = {
    "standard paragraph": "section > p"
    };
    test.feature
    Then "standard paragraph" should have
    "color" of "rgb(68, 68, 68)"

    View Slide

  26. selectors.js
    module.exports = {
    "standard paragraph": "section > p"
    };
    test.feature
    Then "standard paragraph" should have
    "color" of "rgb(68, 68, 68)"
    Selector Maps

    View Slide

  27. CSS Testing Steps
    Then "section > p" should have "color" of
    "rgb(68, 68, 68)"

    View Slide

  28. CSS Testing Steps
    Then should have
    of

    View Slide

  29. CSS Testing Steps
    Then should have
    of than

    View Slide

  30. CSS Testing Steps
    Then should have offset
    of

    View Slide

  31. CSS Testing Steps
    Then should look the same
    as before

    View Slide

  32. Demo

    View Slide

  33. Basic Steps
    Given I visit "http://csste.st/"

    View Slide

  34. Basic Steps
    Given the window size is by

    View Slide

  35. Basic Steps
    Then I enter into

    View Slide

  36. Basic Steps
    Then I submit the form

    View Slide

  37. Demo

    View Slide

  38. Custom Steps

    View Slide

  39. Hardy - Recap
    •Cross-browser coverage
    •Computed styles & specific shots
    •Site scripting built-in
    •No nice diff page
    •More work to set up
    •Have to repeat CSS
    •Pay attention to ' and "

    View Slide

  40. StyleDocco

    View Slide

  41. /*
    # Buttons
    Provides extra visual weight and
    identifies the primary action in a set of
    buttons.
    ```
    Primary
    button>
    Primary
    ```
    */

    View Slide

  42. Demo

    View Slide

  43. StyleDocco - Recap
    •No login/scripting needed
    •Allows for pseudo-class testing
    •Content is (mostly) static
    •Not the actual site

    View Slide

  44. Get Involved!
    http://csste.st
    Thanks!

    View Slide