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

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