TDD your jQuery plugins

3,269 views
3,152 views

Published on

Published in: Technology, Art & Photos
1 Comment
2 Likes
Statistics
Notes
  • Thats great. To speed up your tdd development process I have created a library to multi test ajax parameters and ajax callbacks. Ideal for integration testing. Works with qunit, sinon and jquery.
    see www.jqueryspy.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,269
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
41
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

  • lack of testing in general

  • lots of good ones
    pick one that works for you
  • certifying a contract with your consumer (another system, developer, or end user)
    for a plugin, it is an API and behavior
    finding and preventing bugs is a side effect
  • test driven development
    never add new code without a failing test
    put an end to traditional BDD (Browser Driven Development)
    especially awesome with dynamic languages (no compilation failures)

  • used by jQuery itself
    actively developed
    simple
  • how will your users interact?
    internal functions are inaccessible







  • Test driving everything, right?
    Include the plugin file
  • add dependency on the plugin file
  • first thing it needs to do?
    be chainable!
  • spec for chainability
    add input to index page
    verify error - failing for the wrong reason
    add default_value function
    verify error - failing for right reason
    simplest thing to make it pass
  • the smaller the better
    discrete testable units
    don’t get carried away with everything that could be
  • set the default on page load
    remember, the simplest thing that works
  • don’t set it on fields with a value
    fields with no value
    refactor tests as more information becomes available



  • you’ll see them in your tests
    you can mirror them in your code
  • clear value on focus
  • do not clear the value if it is not the default
  • red green, red green, red green, etc...

  • now that we implemented these features, you can refactor with confidence
    this is a case where you don’t need a failure as you aren’t adding new features
    do not refactor without a passing suite!




  • TDD your jQuery plugins

    1. 1. HASHROCKET EXPERTLY CRAFTED WEB TDD YOUR JQUERY PLUGINS PRESENTED BY PAUL ELLIOTT @p_elliott Monday, October 18, 2010
    2. 2. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT test all the time Monday, October 18, 2010
    3. 3. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT testing frameworks Monday, October 18, 2010
    4. 4. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT it’s not about bugs Monday, October 18, 2010
    5. 5. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT what is TDD? Monday, October 18, 2010
    6. 6. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT QUnit Monday, October 18, 2010
    7. 7. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT outside in Monday, October 18, 2010
    8. 8. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT let’s build a plugin! Monday, October 18, 2010
    9. 9. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT “default value” for form fields Monday, October 18, 2010
    10. 10. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT only for text inputs Monday, October 18, 2010
    11. 11. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT sets default if no value present initially and on blur Monday, October 18, 2010
    12. 12. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT clears default on focus and form submission Monday, October 18, 2010
    13. 13. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT step 1: set up your test suite Monday, October 18, 2010
    14. 14. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    15. 15. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    16. 16. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT step 2: make your first failure Monday, October 18, 2010
    17. 17. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT integration Monday, October 18, 2010
    18. 18. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT integration Monday, October 18, 2010
    19. 19. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT step 3: write your first test Monday, October 18, 2010
    20. 20. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    21. 21. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    22. 22. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT one feature at a time Monday, October 18, 2010
    23. 23. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT integration Monday, October 18, 2010
    24. 24. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT integration Monday, October 18, 2010
    25. 25. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT integration Monday, October 18, 2010
    26. 26. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT integration Monday, October 18, 2010
    27. 27. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT pay attention to patterns Monday, October 18, 2010
    28. 28. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    29. 29. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    30. 30. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    31. 31. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    32. 32. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT keep on alternating Monday, October 18, 2010
    33. 33. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    34. 34. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    35. 35. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT you are now free to refactor Monday, October 18, 2010
    36. 36. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    37. 37. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Monday, October 18, 2010
    38. 38. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT github.com/paulelliott/ jquery-tdd-example Monday, October 18, 2010
    39. 39. TDD YOUR JQUERY PLUGINS PAUL ELLIOTT Got Questions? I want to hear from you! Monday, October 18, 2010
    40. 40. HASHROCKET EXPERTLY CRAFTED WEB Thank you Paul Elliott paul@hashrocket.com @p_elliott http://docs.jquery.com/Qunit http://github.com/paulelliott/jquery-tdd-example Monday, October 18, 2010

    ×