My presentation from the 2010 jQuery Bay Area conference about automated UI testing of jQuery projects.

1. Automated UI Testing
with jQuery
Menno van Slooten
Bay Area jQuery Conference 2010

2. Overview
Intro
Automated Testing
Case study: eBuddy Web Messenger
UI Test Automation patterns & Beyond
What’s next?
Questions

3. Automated Testing
Unit Testing
UI Testing

4. function add(a, b) {
return a + b;
}
function testAdd() {
assertEquals( 1, add( 1, 0));
assertEquals( 2, add( 1, 1));
assertEquals(20, add(10, 10));
}

5. function add(a, b) {
a = parseInt(a, 10);
b = parseInt(b, 10);
if (isNaN(a)) a = 0;
if (isNaN(b)) b = 0;
return a + b;
}
function testAdd() {
assertEquals(20, add( 10, 10));
assertEquals( 0, add("a", []));
assertEquals( 3, add( 3, new Date));
}

6. Automated UI Testing
Demo: eBuddy Web Messenger

7. Actions & Tests
Click Visibility
Enter text Checked/unchecked
Text content
Number of elements

8. Automated UI Testing
Test Automation Patterns

9. Test Automation Pattern 1
Action, Assert, Repeat

10. UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');
UITest.log('Show result');
$('#button-show').click();
UITest.assertVisible('#result');

11. UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');
UITest.log('Show result');
$('#button-show').click();
UITest.assertVisible('#result');

12. UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');
UITest.log('Show result');
$('#button-show').click();
UITest.assertVisible('#result');

13. UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');
UITest.log('Show result');
$('#button-show').click();
UITest.assertVisible('#result');

14. Test Automation Pattern 1
Adding Boilerplate Code

15. UITest.addTestScript({
name : 'Demo Test',
url : 'demo/demo.html'
});

16. UITest.addTestScript({
name : 'Demo Test',
url : 'demo/demo.html',
test : function() {
UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');
UITest.log('Show result');
$('#button-show').click();
UITest.assertVisible('#result');
}
});

17. UITest.addTestScript({
name : 'Demo Test',
url : 'demo/demo.html',
waitFor : 'pageToLoad',
thenRun : function() {
UITest.log('Hide result');
$('#button-hide').click();
UITest.assertHidden('#result');
UITest.log('Show result');
$('#button-show').click();
UITest.assertVisible('#result');
}
});

18. Other UITest asserts
assertIsElement()
assertContainsText()
assertIsChecked()
assertHasValue()
...etc

19. Test Automation Pattern 1
Cannot deal with asynchronous actions

20. $('#button-load-ajax').click();
UITest.assertVisible('#result p');

22. Test Automation Pattern 2
Action, WaitFor, Repeat

23. UITest.addTestScript({
name : 'Demo Test',
url : 'demo/demo.html',
tests : [
{
waitFor: 'pageToLoad',
thenRun: function() {
UITest.log('Load async ajax');
$('#button-load-ajax').click();
}
},
{
waitFor: '#result p',
thenRun: function() {
UITest.log('Ajax load done');
}
}
]
});

24. Test Automation Pattern 2
Demo 2: Animation

25. UITest.addTestScript({
name : 'Demo Test',
url : 'demo/demo.html',
tests : [
{
waitFor: 'pageToLoad',
thenRun: function() {
UITest.log('FadeOut result');
$('#button-fadeout').click();
}
},
{
waitFor: '!#result',
thenRun: function() {
UITest.log('Result hidden');
}
}
]
});

26. Going beyond
Removing dependencies with a mock backend

27. Friend User

28. Friend eBuddy User
Client

29. Friend eBuddy eBuddy User
Server Client

30. Friend IM eBuddy eBuddy User
Server Server Client

31. Friend IM eBuddy eBuddy User
Server Server Client

32. Friend IM eBuddy eBuddy User
Server Server Client

33. Friend IM eBuddy eBuddy Test
Server Server Client Driver
UI Test Framework

34. $()
Friend IM eBuddy eBuddy Test
Server Server Client Driver
UI Test Framework

35. $.ajax()
Friend IM eBuddy eBuddy Test
Server Server Client Driver
UI Test Framework

36. $.ajax()
Mock eBuddy Test
Backend Client Driver
UI Test Framework

37. $.ajax()
Mock eBuddy Test
Backend Client Driver
UI Test Framework

38. Mock Backend Use Case
Connection Handling

39. function generateDisconnect() {
var response = {
status : 0,
getResponseHeader :
function(name) {
return '';
},
getAllResponseHeaders :
function() {
return '';
},
responseText : ''
};
return response;
}

40. Going beyond
Reading the JavaScript memory

41. memory
Mock eBuddy Test
Backend Client Driver
UI Test Framework

42. Memory Reading Use Case
Emoticon Parsing

43. Bonus
Basic jQuery UI Tests

44. Further uses
Monitoring
Performance measurements
...?

45. So now what?
Open Source for Make Benefit Glorious
Community of jQuery

46. Thank you for your time
Questions?