• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rapid Testing, Rapid Development
 

Rapid Testing, Rapid Development

on

  • 2,587 views

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

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

Statistics

Views

Total Views
2,587
Views on SlideShare
2,532
Embed Views
55

Actions

Likes
4
Downloads
0
Comments
0

4 Embeds 55

http://alexisperrier.com 34
http://speakerrate.com 12
http://webcache.googleusercontent.com 8
http://204.232.206.121 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Hello <br /> from amsterdam Honored and excited <br /> flown all the way to tell about how I avoid work <br />
  • Unlike Wally, I don&#x2019;t avoid all work, just the work that makes me less productive <br /> when I started hooked by productivity, easy to create something from nothing <br /> The work I avoid I avoid to stay fast <br /> Not telling how to be lazy. Telling about feedback loop. <br />
  • Productivity result of short feedback loop <br /> Initially short, get momentum going, get rhythm, get in the zone <br /> As project grows the loop grows, Dependencies, interaction <br /> Not once but every time, for every browser <br /> forget what your latest change was <br /> really here to make you aware of the loop and the things we can do to keep it small <br /> start with the refresh phase <br />
  • refresh phase is everything between pressing save and looking at your change on screen <br /> a little demo to illustrate <br />
  • I work at ebuddy on a web-based IM client <br /> typical feature: group chat or conferencing <br /> after a change I&#x2019;d have to go through these steps to be able to verify <br />
  • boring repetitive steps <br /> backend may be broken, AIM may slow, blocked accounts <br /> what can we do? <br />
  • for interaction obvious solution is static html <br /> otherwise we can try to automate the interaction <br /> what about dependencies? <br />
  • these days dependencies can often be mocked by hijacking ajax and json requests <br /> go through these solutions one by one <br /> start with static html <br /> problem is that DOM and CSS modified by JS <br /> we want the page in the state we see it <br />
  • chris pederick&#x2019;s web developer plugin - view generated source <br /> the other option was automated interaction <br /> been a good boy or girl? trigger jQuery event handlers like a user <br /> created a little plugin autorun let&#x2019;s check out code <br /> <br />
  • pretty straightforward <br /> very useful and savesme a lot of time <br /> by the way did you notice this little trick? <br />
  • very handy to switch back and forth between block comments <br /> now we&#x2019;ve got 2 options to deal with long interactions <br /> what about the dependencies? I said something about mocking them <br />
  • for jquery users, there&#x2019;s 2 major options that I know <br /> mockjax mocks all types of ajax, including json with a great level of configuration <br /> mockjson is specialized for json and can do random template-based responses <br /> let&#x2019;s look at a little mockjax example <br />
  • I use something PHP based in ebuddy <br /> plan to move to mockjax soon <br /> super configurable <br />
  • configure all these aspects of your ajax calls <br /> great for when backend isn&#x2019;t ready yet <br /> great for testing error handling like timeouts and 404&#x2019;s <br /> for myself (again) I built something specialized for json requests <br /> <br />
  • <br />
  • great for testing JSON based UI with random data <br /> that concludes my suggestions for the &#x201C;refresh&#x201D; phase <br /> let&#x2019;s move to &#x201C;verify&#x201D; phase <br />
  • the verification phase is where you check if the edits you made delivered the desired results <br /> if not, what failed <br /> if so, what to do next <br /> consists of 2 aspects: <br /> <br />
  • if these are the two tasks at hand, what can we do to speed them up? <br />
  • to test the functioning, we can use automated UI testing <br /> there are many frameworks but it all boils down to this: <br />
  • got a little frustrated with the tool we were using <br /> figured that jquery makes both things very easy <br /> set out to build a framework for our new webclient <br />
  • for me to use something like this it has to be super convenient <br /> super easy to write, debug, run tests <br /> no config, no install <br />
  • anyone seen my presentation in mountain view this year? <br /> small demo to refresh your memory <br />
  • Basic code for tests <br /> again 2 things: first simulating interaction <br />
  • just triggering event handlers <br /> then testing UI properties <br />
  • writing asserts is very easy btw <br /> then wrap inside a testcase <br />
  • of course most tests will be a little longer <br /> that&#x2019;s UITest you can use any framework you want of course <br /> now that we&#x2019;ve automated this part of the verification phase, what about the other? <br /> <br /> <br />
  • what can we do to speed up checking if it looks as intended? <br />
  • unfortunately, other than visibility it&#x2019;s not very practical to automate <br /> so we&#x2019;ve optimized our verification phase <br /> what about the edit phase? <br />
  • no surprise that the edit phase is all about writing code <br /> you are here means you are trying to become better programmers <br /> what about editors? <br />
  • there&#x2019;s a lot of debate about editor choice <br /> some take it really far and personally. in my opinion it really doesn&#x2019;t matter much <br /> because <br />
  • you&#x2019;re not getting the most out of your editor anyway <br /> there&#x2019;s tons of features you&#x2019;re not using when you could <br /> scratch that <br />
  • when you should <br /> I find it amazing to see people wanting to be rockstar developers <br /> but don&#x2019;t invest any time in learning their instrument <br />
  • any vim users here? you rock! just kidding, you&#x2019;re all cool <br /> your editor is the most important tool in your arsenal <br /> it is such a shame that some devs don&#x2019;t go beyond the basics <br /> it is a huge part of your productivity <br />
  • besides all the plugins and the tech that I&#x2019;ve shown <br /> the most important message I want to get across is the awareness of feedback loop <br /> be aware of the time you&#x2019;re wasting <br /> be aware of the unnecessary taks you are accumulating <br /> thank you <br />
  • <br />

Rapid Testing, Rapid Development Rapid Testing, Rapid Development Presentation Transcript

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