Rapid Testing, Rapid Development
•6 likes•2,418 views
Report
My presentation at the jQuery Boston conference on October 16th 2010
Recommended
More Related Content
What's hot
What's hot(20)
Similar to Rapid Testing, Rapid Development
Similar to Rapid Testing, Rapid Development(20)
Recently uploaded
Recently uploaded(20)
Rapid Testing, Rapid Development
- 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
- 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
- 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
Editor's Notes
- 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