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.

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