Automated CSS Testing - jsday Verona

Automated CSS Testing - jsday Verona

7dd731d0c97e334d726f740a710904a9?s=128

Jakob Mattsson

May 15, 2014
Tweet

Transcript

  1. Automated CSS Testing Not Just a Myth @jakobmattsson www.jakobm.com

  2. None
  3. None
  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.” “
  11. None
  12. None
  13. None
  14. Mixins Variables Reuse Nesting etc. Operations

  15. Write Read

  16. None
  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!

  24. None
  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
  30. 1

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

    Typically performed by an editor, IDE or plugin
  32. None
  33. 2

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

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

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

  38. Screenshots Compare visuals before and after change Detects impact of

    change
  39. None
  40. Lots of false positives + - No change can sneak

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

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

    relevant styles Compare them to some expectation
  43. None
  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
  48. None
  49. None
  50. None
  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
  56. 5

  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

  61. None
  62. Click

  63. Red Green 1.Create the design you want 2.Ensure consistency and

    compatibility
  64. None
  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
  70. None
  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