Automated CSS Testing: Not just a myth

Presented at MMWCON 2013, UCLA, Los Angeles

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

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

    View Slide

44. 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. 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. 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 • jakob@leanmachine.se
    github.com/leanmachine/testbit
    

    View Slide

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

    View Slide