Your SlideShare is downloading. ×

Rapid Testing, Rapid Development

2,519

Published on

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

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

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,519
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Hello
    from amsterdam Honored and excited
    flown all the way to tell about how I avoid work
  • Unlike Wally, I don’t avoid all work, just the work that makes me less productive
    when I started hooked by productivity, easy to create something from nothing
    The work I avoid I avoid to stay fast
    Not telling how to be lazy. Telling about feedback loop.
  • Productivity result of short feedback loop
    Initially short, get momentum going, get rhythm, get in the zone
    As project grows the loop grows, Dependencies, interaction
    Not once but every time, for every browser
    forget what your latest change was
    really here to make you aware of the loop and the things we can do to keep it small
    start with the refresh phase
  • refresh phase is everything between pressing save and looking at your change on screen
    a little demo to illustrate
  • I work at ebuddy on a web-based IM client
    typical feature: group chat or conferencing
    after a change I’d have to go through these steps to be able to verify
  • boring repetitive steps
    backend may be broken, AIM may slow, blocked accounts
    what can we do?
  • for interaction obvious solution is static html
    otherwise we can try to automate the interaction
    what about dependencies?
  • these days dependencies can often be mocked by hijacking ajax and json requests
    go through these solutions one by one
    start with static html
    problem is that DOM and CSS modified by JS
    we want the page in the state we see it
  • chris pederick’s web developer plugin - view generated source
    the other option was automated interaction
    been a good boy or girl? trigger jQuery event handlers like a user
    created a little plugin autorun let’s check out code

  • pretty straightforward
    very useful and savesme a lot of time
    by the way did you notice this little trick?
  • very handy to switch back and forth between block comments
    now we’ve got 2 options to deal with long interactions
    what about the dependencies? I said something about mocking them
  • for jquery users, there’s 2 major options that I know
    mockjax mocks all types of ajax, including json with a great level of configuration
    mockjson is specialized for json and can do random template-based responses
    let’s look at a little mockjax example
  • I use something PHP based in ebuddy
    plan to move to mockjax soon
    super configurable
  • configure all these aspects of your ajax calls
    great for when backend isn’t ready yet
    great for testing error handling like timeouts and 404’s
    for myself (again) I built something specialized for json requests


  • great for testing JSON based UI with random data
    that concludes my suggestions for the “refresh” phase
    let’s move to “verify” phase
  • the verification phase is where you check if the edits you made delivered the desired results
    if not, what failed
    if so, what to do next
    consists of 2 aspects:

  • if these are the two tasks at hand, what can we do to speed them up?
  • to test the functioning, we can use automated UI testing
    there are many frameworks but it all boils down to this:
  • got a little frustrated with the tool we were using
    figured that jquery makes both things very easy
    set out to build a framework for our new webclient
  • for me to use something like this it has to be super convenient
    super easy to write, debug, run tests
    no config, no install
  • anyone seen my presentation in mountain view this year?
    small demo to refresh your memory
  • Basic code for tests
    again 2 things: first simulating interaction
  • just triggering event handlers
    then testing UI properties
  • writing asserts is very easy btw
    then wrap inside a testcase
  • of course most tests will be a little longer
    that’s UITest you can use any framework you want of course
    now that we’ve automated this part of the verification phase, what about the other?


  • what can we do to speed up checking if it looks as intended?
  • unfortunately, other than visibility it’s not very practical to automate
    so we’ve optimized our verification phase
    what about the edit phase?
  • no surprise that the edit phase is all about writing code
    you are here means you are trying to become better programmers
    what about editors?
  • there’s a lot of debate about editor choice
    some take it really far and personally. in my opinion it really doesn’t matter much
    because
  • you’re not getting the most out of your editor anyway
    there’s tons of features you’re not using when you could
    scratch that
  • when you should
    I find it amazing to see people wanting to be rockstar developers
    but don’t invest any time in learning their instrument
  • any vim users here? you rock! just kidding, you’re all cool
    your editor is the most important tool in your arsenal
    it is such a shame that some devs don’t go beyond the basics
    it is a huge part of your productivity
  • besides all the plugins and the tech that I’ve shown
    the most important message I want to get across is the awareness of feedback loop
    be aware of the time you’re wasting
    be aware of the unnecessary taks you are accumulating
    thank you

  • Transcript

    • 1. RAPID TESTING RAPID DEVELOPMENT Menno van Slooten 1
    • 2. I AVOID WORK (and so should you) 2
    • 3. Edit Refresh Verify THE FEEDBACK LOOP 3
    • 4. Edit Refresh Verify THE FEEDBACK LOOP 4
    • 5. DEMO eBuddy Web Messenger 5
    • 6. PROBLEMS • Long user interaction • External dependencies 6
    • 7. SOLUTIONS • USER INTERACTION • Static HTML • Automate interaction 7
    • 8. SOLUTIONS • USER INTERACTION • DEPENDENCIES • Static HTML • Mock external requests • Automate interaction 8
    • 9. STATIC HTML generated source > save > reload 9
    • 10. AUTOMATING INTERACTION $.autorun.type('#username', 'myname') .type('#password', 'mypass') .submit('#container-login form') .dblclick('.contact:contains("somerandomcontact")) .click('.invite'); 10
    • 11. PRETTY NEAT TRICK //* I am not commented out //*/ /* I am commented out //*/ 11
    • 12. MOCKING REQUESTS • appendTo’s Mockjax • my MockJSON 12
    • 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. MOCKJAX • content-type • response time • HTTP status • response headers • simulate timeouts 14
    • 15. DEMO MockJSON 15
    • 16. MOCKJSON • Generate random JSON responses from templates • @KEYWORD replacement in strings • Generate random dates, numbers, strings, arrays 16
    • 17. Edit Refresh Verify THE FEEDBACK LOOP 17
    • 18. VERIFICATION • Check if it works as intended • Check if it looks as intended 18
    • 19. VERIFICATION • Check if it works as intended > AUTOMATED UI TESTING 19
    • 20. AUTOMATED UI TESTING • CHECK IF IT WORKS AS INTENDED • Simulate user interaction • Check properties of the UI (DOM/CSS) 20
    • 21. UITEST GOALS • Zero install, minimal setup • Write tests in JavaScript • Completely run in browser 21
    • 22. DEMO Automated UI testing with UITest 22
    • 23. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertIsHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertIsVisible('#result'); 23
    • 24. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertIsHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertIsVisible('#result'); 24
    • 25. UITest.log('Hide result'); $('#button-hide').click(); UITest.assertIsHidden('#result'); UITest.log('Show result'); $('#button-show').click(); UITest.assertIsVisible('#result'); 25
    • 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. VERIFICATION • Check if it works as intended > AUTOMATED UI TESTING • Check if it looks as intended 27
    • 28. VERIFICATION • Check if it works as intended > AUTOMATED UI TESTING • Check if it looks as intended > TOUGH LUCK 28
    • 29. Edit Refresh Verify THE FEEDBACK LOOP 29
    • 30. YOUR EDITOR ...it doesn’t matter as much as you think 30
    • 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. 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. WANNA BE A ROCK STAR DEVELOPER? Master your instrument! 33
    • 34. Edit Refresh Verify SUMMARIZING Minimize your feedback loop for optimal productivity and fun 34
    • 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

    ×