Best practices for js testing

Best practices for JavaScript Testing

Karl Mendes

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!

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

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

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);
});
});


IE9, FF, Chrome

IE8

Enforce red, green, refactor!

RED

GREEN
REFACTOR

@karlmendes
http://karlmendes.com

Best practices for js testing

More Related Content

What's hot

Similar to Best practices for js testing

Recently uploaded

Best practices for js testing

Editor's Notes