Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 Developer Conf. 2012
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.   ...
Best practices for a JS test workflow       1.   Create testable code       2.   Find a good testing framework       3.   ...
Test against real HTML
Test against real HTML                $(function() {                    $(#hide-action).on(click, function(e) { JavaScript...
Test against real HTML                $(function() {                    $(#hide-action).on(click, function(e) { JavaScript...
Enable automated cross-browser testing
Enable automated cross-browser testing                                 var myArray = [1,2,3,];                           I...
Enable automated cross-browser testing  IE9, FF, Chrome  IE8
Enforce red, green, refactor!
Enforce red, green, refactor!                                RED                                      GREEN              R...
@karlmendeshttp://karlmendes.com
Upcoming SlideShare
Loading in …5
×

Best practices for js testing

3,409 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Best practices for js testing

  1. 1. HTML5 Developer Conf. 2012
  2. 2. Best practices for JavaScript Testing Karl Mendes
  3. 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. 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. 5. Test against real HTML
  6. 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. 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. 8. Enable automated cross-browser testing
  9. 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. 10. Enable automated cross-browser testing IE9, FF, Chrome IE8
  11. 11. Enforce red, green, refactor!
  12. 12. Enforce red, green, refactor! RED GREEN REFACTOR
  13. 13. @karlmendeshttp://karlmendes.com

×