Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rapid Testing, Rapid Development

4,223 views

Published on

My presentation at the jQuery Boston conference on October 16th 2010

Published in: Technology, Design
  • Be the first to comment

Rapid Testing, Rapid Development

  1. 1. RAPID TESTING RAPID DEVELOPMENT Menno van Slooten 1
  2. 2. I AVOID WORK (and so should you) 2
  3. 3. Edit Refresh Verify THE FEEDBACK LOOP 3
  4. 4. Edit Refresh Verify THE FEEDBACK LOOP 4
  5. 5. DEMO eBuddy Web Messenger 5
  6. 6. PROBLEMS • Long user interaction • External dependencies 6
  7. 7. SOLUTIONS • USER INTERACTION • Static HTML • Automate interaction 7
  8. 8. SOLUTIONS • USER INTERACTION • DEPENDENCIES • Static HTML • Mock external requests • Automate interaction 8
  9. 9. STATIC HTML generated source > save > reload 9
  10. 10. AUTOMATING INTERACTION $.autorun.type('#username', 'myname') .type('#password', 'mypass') .submit('#container-login form') .dblclick('.contact:contains("somerandomcontact")) .click('.invite'); 10
  11. 11. PRETTY NEAT TRICK //* I am not commented out //*/ /* I am commented out //*/ 11
  12. 12. MOCKING REQUESTS • appendTo’s Mockjax • my MockJSON 12
  13. 13. MOCKJAX $.mockjax({ url: '/restful/api', responseText: 'A text response from the server' }); http://enterprisejquery.com/2010/07/mock-your-ajax-requests-with-mockjax-for-rapid-development/ 13
  14. 14. MOCKJAX • content-type • response time • HTTP status • response headers • simulate timeouts 14
  15. 15. DEMO MockJSON 15
  16. 16. MOCKJSON • Generate random JSON responses from templates • @KEYWORD replacement in strings • Generate random dates, numbers, strings, arrays 16
  17. 17. Edit Refresh Verify THE FEEDBACK LOOP 17
  18. 18. VERIFICATION • Check if it works as intended • Check if it looks as intended 18
  19. 19. VERIFICATION • Check if it works as intended > AUTOMATED UI TESTING 19
  20. 20. AUTOMATED UI TESTING • CHECK IF IT WORKS AS INTENDED • Simulate user interaction • Check properties of the UI (DOM/CSS) 20
  21. 21. UITEST GOALS • Zero install, minimal setup • Write tests in JavaScript • Completely run in browser 21
  22. 22. DEMO Automated UI testing with UITest 22
  23. 23. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertIsHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertIsVisible('#result'); 23
  24. 24. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertIsHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertIsVisible('#result'); 24
  25. 25. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertIsHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertIsVisible('#result'); 25
  26. 26. UITest.addTestScript({ name : 'Demo Test', url : 'demo/demo.html', test : function() { UITest.log('Hide result'); $('#button-hide').click(); UITest.assertIsHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertIsVisible('#result'); } }); 26
  27. 27. VERIFICATION • Check if it works as intended > AUTOMATED UI TESTING • Check if it looks as intended 27
  28. 28. VERIFICATION • Check if it works as intended > AUTOMATED UI TESTING • Check if it looks as intended > TOUGH LUCK 28
  29. 29. Edit Refresh Verify THE FEEDBACK LOOP 29
  30. 30. YOUR EDITOR ...it doesn’t matter as much as you think 30
  31. 31. YOUR EDITOR ...it doesn’t matter as much as you think because you’re not using it as well as you could 31
  32. 32. YOUR EDITOR ...it doesn’t matter as much as you think ‘cause you’re not using it as well as you could should 32
  33. 33. WANNA BE A ROCK STAR DEVELOPER? Master your instrument! 33
  34. 34. Edit Refresh Verify SUMMARIZING Minimize your feedback loop for optimal productivity and fun 34
  35. 35. THANK YOU FOR LISTENING • My GitHub (UITest, MockJSON, autorun) http://github.com/mennovanslooten • Chris Pederick’s Web Developer Plugin (Generated Source) http://chrispederick.com/work/web-developer/ • appendTo’s Mockjax http://github.com/appendto/jquery-mockjax 35

×