Best practices for js testing
Download as PPTX, PDF1 like2,553 views
The document discusses best practices for JavaScript testing. It lists 8 best practices: 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. It then provides examples of testing code against real HTML and data as well as testing across browsers to catch differences in behavior.
![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);
});
});](https://image.slidesharecdn.com/bestpracticesforjstesting2-121018013832-phpapp01/85/Best-practices-for-js-testing-9-320.jpg)
Best practices for js testing
- 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
Editor's Notes
- #14: If you’re interested on an extended exploration of all of those requirements you can read my blog post about it.