Automated CSS Testing - jsday Verona

Transcript

1. Automated CSS Testing Not Just a Myth @jakobmattsson www.jakobm.com
4. Wikipedia on ”Melodic death metal” ! Melodic death metal is an extreme subgenre of heavy metal music. 
 The Swedish death metal scene did much to popularize the style, which soon centered in the "Gothenburg metal" scene in Gothenburg, Sweden.
5. Wikipedia on ”Melodic death metal” ! Melodic death metal is an extreme subgenre of heavy metal music. 
 The Swedish death metal scene did much to popularize the style, which soon centered in the "Gothenburg metal" scene in Gothenburg, Sweden.
6. Wikipedia on ”Melodic death metal” ! Melodic death metal is an extreme subgenre of heavy metal music. 
 The Swedish death metal scene did much to popularize the style, which soon centered in the "Gothenburg metal" scene in Gothenburg, Sweden.
7. Automated CSS Testing Not Just a Myth
8. The purpose of this presentation: Raise awareness of existing tools Inspire a new workflow
9. Declarative programming
10. Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow.” “
14. Mixins Variables Reuse Nesting etc. Operations
15. Write Read
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
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.” “
19. Code quality
20. Functional quality—fitness for purpose ! Structural quality—the degree to which the software was produced correctly
21. Structural quality Reliability Maintainability Size Efficiency Security
22. HOW?
23. By writing automated TESTS!
25. Refactor Red Green 1.Write a test that fails 2.Make the code work 3.Eliminate redundancy
26. Testing CSS
27. Code ??? Visual Declarative Dilemma
28. Let’s try!
29. 1 2 3 4 Two for code Two for visuals { { Four approaches
31. Syntax Checks Checking that the code is actually valid CSS Typically performed by an editor, IDE or plugin
34. Styleguides & linting Forces best-practices to be followed Syntactically (where to put braces) Semantically (catching common mistakes)
36. Useless without good rules + - Prevents anti-patterns Easy to apply Doesn’t test the end result - - +
38. Screenshots Compare visuals before and after change Detects impact of change
40. Lots of false positives + - No change can sneak by Implementation agnostic Breaks on content changes - - +
42. Comparing styles in the DOM Sniff the DOM for all relevant styles Compare them to some expectation
44. Scenario: Standard paragraph color Given I visit "http://localhost:3000" Then "section > p" should have "color" of "rgb(68, 68, 68)"
45. Scenario: Filter the list of audio books Given some audiobooks in the collection When I visit the list of audiobooks And I search for "cor" Then I only see matching titles When I remove the filter Then I see all audiobooks again
46. Style rules != looks + - Resilient to changes Tests live on Writing expectations in code - - +
47. 1 2 3 4 Two for code Two for visuals { { Four approaches
51. WHAT is the MISSING PIECE?
52. Design first
53. Refactor Red Green 1.Write a test that fails 2.Make the code work 3.Eliminate redundancy
54. My suggestion: 1. Create the design you want 2. Ensure consistency and compatibility 3. Eliminate redundancy
55. Refactor Red Green 1.Create the design you want 2.Ensure consistency and compatibility 3.Eliminate redundancy
57. Scenario: Filter the list of audio books Given some audiobooks in the collection When I visit the list of audiobooks And I search for "cor" Then I only see matching titles When I remove the filter Then I see all audiobooks again
58. We are already running user stories No need for manual recording
59. WHAT is the CORRECT LOOK?
60. Red 1.Create the design you want
62. Click
63. Red Green 1.Create the design you want 2.Ensure consistency and compatibility
65. MARK DIFFS as intended or not intended - THE SYSTEM REMEMBERS
66. Red Green 1.Create the design you want 2.Ensure consistency and compatibility 3.Eliminate redundancy Refactor
67. Design is manual Definition of ”correct” is manual Testing of changes is automatic!
68. Design first
69. No record step + No convoluted ”design spec” + This is make-believe - + Jacking into acceptance tests
71. The purpose of this presentation: Raise awareness of existing tools Inspire a new workflow
72. Join in!
73. Automated CSS Testing Not Just a Myth @jakobmattsson www.jakobm.com