Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automated CSS Testing - jsday Verona

Automated CSS Testing - jsday Verona

Jakob Mattsson

May 15, 2014
Tweet

More Decks by Jakob Mattsson

Other Decks in Programming

Transcript

  1. 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.
  2. 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.
  3. 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.
  4. Declarative programming is a programming paradigm that expresses the logic

    of a computation without describing its control flow.” “
  5. 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
  6. 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.” “
  7. 1

  8. Syntax Checks Checking that the code is actually valid CSS

    Typically performed by an editor, IDE or plugin
  9. 2

  10. Styleguides & linting Forces best-practices to be followed Syntactically (where

    to put braces) Semantically (catching common mistakes)
  11. Useless without good rules + - Prevents anti-patterns Easy to

    apply Doesn’t test the end result - - +
  12. 3

  13. Lots of false positives + - No change can sneak

    by Implementation agnostic Breaks on content changes - - +
  14. 4

  15. Comparing styles in the DOM Sniff the DOM for all

    relevant styles Compare them to some expectation
  16. 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
  17. Style rules != looks + - Resilient to changes Tests

    live on Writing expectations in code - - +
  18. My suggestion: 1. Create the design you want 2. Ensure

    consistency and compatibility 3. Eliminate redundancy
  19. 5

  20. 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
  21. Red Green 1.Create the design you want 2.Ensure consistency and

    compatibility 3.Eliminate redundancy Refactor
  22. No record step + No convoluted ”design spec” + This

    is make-believe - + Jacking into acceptance tests