1. HTML5 Developer Conf. 2012

2. Best practices for JavaScript Testing
Karl Mendes

3. Best practices for a JS test workflow
1. Create testable code
2. Find a good testing framework
3. Test against real HTML
4. Test against 'real' data
5. Use continuous integration
6. Enable in-browser debugging
7. Enable automated cross-browser testing
8. Enforce red, green, refactor!

4. Best practices for a JS test workflow
1. Create testable code
2. Find a good testing framework
3. Test against real HTML
4. Test against 'real' data
5. Use continuous integration
6. Enable in-browser debugging
7. Enable automated cross-browser testing
8. Enforce red, green, refactor!

5. Test against real HTML

6. Test against real HTML
$(function() {
$('#hide-action').on('click', function(e) {
JavaScript e.preventDefault();
$('#my-image').hide();
});
});
HTML <a id="hide-action" href="#hide”>Hide image</a>
<img id="my-image" src="img.png"/>
it('should hide the image when click on button', function() {
var image = $('#my-image');
Test expect(image).toBeVisible();
$('#hide-action').trigger('click');
expect(image).not.toBeVisible();
});
Test result: Success

7. Test against real HTML
$(function() {
$('#hide-action').on('click', function(e) {
JavaScript e.preventDefault();
$('#my-image').hide();
});
});
HTML <a id="hide-action" href="#hide”>Hide image</a>
<img id=”main-image" src="img.png"/>
it('should hide the image when click on button', function() {
var image = $('#my-image');
Test expect(image).toBeVisible();
$('#hide-action').trigger('click');
expect(image).not.toBeVisible();
});
Test result: Failed

8. Enable automated cross-browser testing

9. Enable automated cross-browser testing
var myArray = [1,2,3,];
IE8 IE9 FF Chrome
myArray.length 4 3 3 3
var myArray = [1,2,3,];
describe('array test', function() {
it('should return the right length', function() {
expect(myArray.length).toBe(3);
});
});

10. Enable automated cross-browser testing
IE9, FF, Chrome
IE8

11. Enforce red, green, refactor!

12. Enforce red, green, refactor!
RED
GREEN
REFACTOR

13. @karlmendes
http://karlmendes.com