Thomas Fuchs



  Adventures in
JavaScript Testing
http://script.aculo.us/thomas
traditional
javascript „testing“
alert(“please use me only
  where appropriate!”);
why?
"JavaScript is
this thing for
 funny mouse
trails, right?"
"BUT You
CAN't DEBUG
JavaScript!"
"WE DON'T NEED
NO STINKIN' TESTS
  FOR TEN LINES
    OF CODE!"
"ANYWAY, THERE
  IS NO WAY TO
 AUTOMATICALLY
TEST JAVASCRIPT!"
all of this is
 pure FUD
unit testing javascript
s from
B orrow nit
   Test::U
include unittest.js
(requires Prototype)
a DIV is required for
containing the test results
  (defaults to "testlog")
create a new instance of
  Test.Unit.Runner…
…this will excute all
methods starting with
      "test"
assert away!
(syntax strangeness
for more convenience
when calling assertions)
assert(expression)




 assert(true) => PASS
assert(false) => FAIL
assert(2*2==4) => PASS
assertEqual(expected, actual)




assertEqual(‘a’,’a’) => PASS
assertEqual(‘a’,’b’) => FAIL
  assertEqual(1,1) => PASS
 as...
assertEnumEqual(expected, actual)




assertEnumEqual([1,2],[1,2]) => PASS


      assertEqual([1,2],[1,2]) => FAIL



   ...
assertNotEqual(expected, actual)




assertNotEqual(‘a’,’a’) => FAIL
assertNotEqual(‘a’,’b’) => PASS
  assertNotEqual(1,1)...
assertMatch(expected, actual)




   assertMatch(/a/,’a’) => PASS
  assertMatch(/a/,’bab’) => PASS
   assertMatch(/a/,’b’)...
assertIdentical(expected, actual)




assertIdentical(‘a’,’a’) => PASS
 assertIdentical(1,’1’) => FAIL




               ...
assertNotIdentical(expected, actual)




assertNotIdentical(‘a’,’a’) => FAIL
 assertNotIdentical(1,’1’) => PASS




      ...
assertType(expected, actual)




assertType(String,’a’) => PASS
 assertType(Number,1) => PASS
assertType(Array,[1,2]) => P...
assertRaise(exceptionName, method)


assertRaise(‘ElementDoesNotExistError’,
   function(){
     new Effect.Opacity(‘inval...
assertRespondsTo(method, obj)
assertVisible(element)


assertNotVisible(element)




    also checks if any parent
    elements are hidden and
       fa...
info(message)




   Displays arbitrary
messages in the "Message"
column of the test result
assertXYZ(params, message)
"WELL, WHAT ABOUT
   FUNCTIONS THAT
RUN ASYNCHRONOUSLY?"
wait(milliseconds, method)




   should be last statement in the
      test (but can be nested)
Benchmarking
"WELL, NICE. BUT IT'S
TEDIOUS TO RUN ALL THOSE
    TESTS MANUALLY!"
rake to the rescue
rake test:javascripts
javascript_test plugin
rake test:javascripts

                         1. launches
                         web server
2. controls
browsers      ...
$ script/generate javascript_test muhaha
  exists test/javascript
  create test/javascript/muhaha_test.html
just
add your
  tests
(symlink required:
      app/test/javascript/assets to
app/vendor/plugins/javascript_test/assets)
Browser definitions
     (add more!)
$ script/plugin install http://dev.rubyonrails.org/svn/rails/plugins/javascript_test
…and if something
    breaks?
≈
Firebug       sliced bread

                    http://www.flickr.com/photos/teagrrl/78941282/
Firebug


Debugger
Firebug


know
your
Ajax
Safari Web Inspector
Safari Debugging
Microsoft Script
          Debugger for IE




http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx
Test with all
 browsers
you want to
  support
get a setup that
 doesn‘t suck
Source: http://www.flickr.com/photos/icathing/26603225/
+   +
        2 VMs:
         IE 6
         IE 7
+   +




one machine to rule them all
#prototype (freenode)
             and
Rails Spinoffs Google Group
Adventures In JavaScript Testing
Adventures In JavaScript Testing
Adventures In JavaScript Testing
Adventures In JavaScript Testing
Adventures In JavaScript Testing
Upcoming SlideShare
Loading in...5
×

Adventures In JavaScript Testing

2,661

Published on

Automatic JavaScript unit testing with Prototype's JavaScript testing facilities.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,661
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
53
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Adventures In JavaScript Testing

  1. 1. Thomas Fuchs Adventures in JavaScript Testing
  2. 2. http://script.aculo.us/thomas
  3. 3. traditional javascript „testing“
  4. 4. alert(“please use me only where appropriate!”);
  5. 5. why?
  6. 6. "JavaScript is this thing for funny mouse trails, right?"
  7. 7. "BUT You CAN't DEBUG JavaScript!"
  8. 8. "WE DON'T NEED NO STINKIN' TESTS FOR TEN LINES OF CODE!"
  9. 9. "ANYWAY, THERE IS NO WAY TO AUTOMATICALLY TEST JAVASCRIPT!"
  10. 10. all of this is pure FUD
  11. 11. unit testing javascript
  12. 12. s from B orrow nit Test::U
  13. 13. include unittest.js (requires Prototype)
  14. 14. a DIV is required for containing the test results (defaults to "testlog")
  15. 15. create a new instance of Test.Unit.Runner…
  16. 16. …this will excute all methods starting with "test"
  17. 17. assert away!
  18. 18. (syntax strangeness for more convenience when calling assertions)
  19. 19. assert(expression) assert(true) => PASS assert(false) => FAIL assert(2*2==4) => PASS
  20. 20. assertEqual(expected, actual) assertEqual(‘a’,’a’) => PASS assertEqual(‘a’,’b’) => FAIL assertEqual(1,1) => PASS assertEqual(1,’1’) => PASS does not compare type
  21. 21. assertEnumEqual(expected, actual) assertEnumEqual([1,2],[1,2]) => PASS assertEqual([1,2],[1,2]) => FAIL assertEqual does not compare enum contents
  22. 22. assertNotEqual(expected, actual) assertNotEqual(‘a’,’a’) => FAIL assertNotEqual(‘a’,’b’) => PASS assertNotEqual(1,1) => FAIL assertNotEqual(1,’1’) => FAIL does not compare type
  23. 23. assertMatch(expected, actual) assertMatch(/a/,’a’) => PASS assertMatch(/a/,’bab’) => PASS assertMatch(/a/,’b’) => FAIL assertMatch(/^moo$/,’moo’) => PASS
  24. 24. assertIdentical(expected, actual) assertIdentical(‘a’,’a’) => PASS assertIdentical(1,’1’) => FAIL compares type
  25. 25. assertNotIdentical(expected, actual) assertNotIdentical(‘a’,’a’) => FAIL assertNotIdentical(1,’1’) => PASS compares type
  26. 26. assertType(expected, actual) assertType(String,’a’) => PASS assertType(Number,1) => PASS assertType(Array,[1,2]) => PASS checks for a specific constructor
  27. 27. assertRaise(exceptionName, method) assertRaise(‘ElementDoesNotExistError’, function(){ new Effect.Opacity(‘invalid-element’) } ); related effects.js code
  28. 28. assertRespondsTo(method, obj)
  29. 29. assertVisible(element) assertNotVisible(element) also checks if any parent elements are hidden and fails/passes on that
  30. 30. info(message) Displays arbitrary messages in the "Message" column of the test result
  31. 31. assertXYZ(params, message)
  32. 32. "WELL, WHAT ABOUT FUNCTIONS THAT RUN ASYNCHRONOUSLY?"
  33. 33. wait(milliseconds, method) should be last statement in the test (but can be nested)
  34. 34. Benchmarking
  35. 35. "WELL, NICE. BUT IT'S TEDIOUS TO RUN ALL THOSE TESTS MANUALLY!"
  36. 36. rake to the rescue
  37. 37. rake test:javascripts
  38. 38. javascript_test plugin
  39. 39. rake test:javascripts 1. launches web server 2. controls browsers WEBrick lists results SUCCESS FAILURE ERROR 3. run tests
  40. 40. $ script/generate javascript_test muhaha exists test/javascript create test/javascript/muhaha_test.html
  41. 41. just add your tests
  42. 42. (symlink required: app/test/javascript/assets to app/vendor/plugins/javascript_test/assets)
  43. 43. Browser definitions (add more!)
  44. 44. $ script/plugin install http://dev.rubyonrails.org/svn/rails/plugins/javascript_test
  45. 45. …and if something breaks?
  46. 46. ≈ Firebug sliced bread http://www.flickr.com/photos/teagrrl/78941282/
  47. 47. Firebug Debugger
  48. 48. Firebug know your Ajax
  49. 49. Safari Web Inspector
  50. 50. Safari Debugging
  51. 51. Microsoft Script Debugger for IE http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx
  52. 52. Test with all browsers you want to support
  53. 53. get a setup that doesn‘t suck
  54. 54. Source: http://www.flickr.com/photos/icathing/26603225/
  55. 55. + + 2 VMs: IE 6 IE 7
  56. 56. + + one machine to rule them all
  57. 57. #prototype (freenode) and Rails Spinoffs Google Group
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×