Thomas Fuchs discusses the importance of testing JavaScript code and provides examples of how to do unit testing of JavaScript with tools like Firebug, Test::Unit, and Rake. He addresses common objections to testing JavaScript and provides tips for debugging JavaScript across different browsers.

1. Thomas Fuchs
Adventures in
JavaScript Testing

2. http://script.aculo.us/thomas

3. traditional
javascript „testing“

5. alert(“please use me only
where appropriate!”);

6. why?

7. "JavaScript is
this thing for
funny mouse
trails, right?"

8. "BUT You
CAN't DEBUG
JavaScript!"

9. "WE DON'T NEED
NO STINKIN' TESTS
FOR TEN LINES
OF CODE!"

10. "ANYWAY, THERE
IS NO WAY TO
AUTOMATICALLY
TEST JAVASCRIPT!"

11. all of this is
pure FUD

12. unit testing javascript

14. s from
B orrow nit
Test::U

15. include unittest.js
(requires Prototype)

16. a DIV is required for
containing the test results
(defaults to "testlog")

17. create a new instance of
Test.Unit.Runner…

18. …this will excute all
methods starting with
"test"

19. assert away!

20. (syntax strangeness
for more convenience
when calling assertions)

21. assert(expression)
assert(true) => PASS
assert(false) => FAIL
assert(2*2==4) => PASS

22. assertEqual(expected, actual)
assertEqual(‘a’,’a’) => PASS
assertEqual(‘a’,’b’) => FAIL
assertEqual(1,1) => PASS
assertEqual(1,’1’) => PASS
does not compare type

23. assertEnumEqual(expected, actual)
assertEnumEqual([1,2],[1,2]) => PASS
assertEqual([1,2],[1,2]) => FAIL
assertEqual does not
compare enum contents

24. assertNotEqual(expected, actual)
assertNotEqual(‘a’,’a’) => FAIL
assertNotEqual(‘a’,’b’) => PASS
assertNotEqual(1,1) => FAIL
assertNotEqual(1,’1’) => FAIL
does not compare type

25. assertMatch(expected, actual)
assertMatch(/a/,’a’) => PASS
assertMatch(/a/,’bab’) => PASS
assertMatch(/a/,’b’) => FAIL
assertMatch(/^moo$/,’moo’) => PASS

26. assertIdentical(expected, actual)
assertIdentical(‘a’,’a’) => PASS
assertIdentical(1,’1’) => FAIL
compares type

27. assertNotIdentical(expected, actual)
assertNotIdentical(‘a’,’a’) => FAIL
assertNotIdentical(1,’1’) => PASS
compares type

28. assertType(expected, actual)
assertType(String,’a’) => PASS
assertType(Number,1) => PASS
assertType(Array,[1,2]) => PASS
checks for a specific
constructor

29. assertRaise(exceptionName, method)
assertRaise(‘ElementDoesNotExistError’,
function(){
new Effect.Opacity(‘invalid-element’)
}
);
related effects.js code

30. assertRespondsTo(method, obj)

31. assertVisible(element)
assertNotVisible(element)
also checks if any parent
elements are hidden and
fails/passes on that

32. info(message)
Displays arbitrary
messages in the "Message"
column of the test result

33. assertXYZ(params, message)

34. "WELL, WHAT ABOUT
FUNCTIONS THAT
RUN ASYNCHRONOUSLY?"

35. wait(milliseconds, method)
should be last statement in the
test (but can be nested)

36. Benchmarking

37. "WELL, NICE. BUT IT'S
TEDIOUS TO RUN ALL THOSE
TESTS MANUALLY!"

38. rake to the rescue

39. rake test:javascripts

42. javascript_test plugin

43. rake test:javascripts
1. launches
web server
2. controls
browsers WEBrick
lists results
SUCCESS
FAILURE
ERROR
3. run tests

44. $ script/generate javascript_test muhaha
exists test/javascript
create test/javascript/muhaha_test.html

45. just
add your
tests

46. (symlink required:
app/test/javascript/assets to
app/vendor/plugins/javascript_test/assets)

47. Browser definitions
(add more!)

48. $ script/plugin install http://dev.rubyonrails.org/svn/rails/plugins/javascript_test

49. …and if something
breaks?

50. ≈
Firebug sliced bread
http://www.flickr.com/photos/teagrrl/78941282/

51. Firebug
Debugger

52. Firebug
know
your
Ajax

53. Safari Web Inspector

54. Safari Debugging

55. Microsoft Script
Debugger for IE
http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx

56. Test with all
browsers
you want to
support

58. get a setup that
doesn‘t suck

59. Source: http://www.flickr.com/photos/icathing/26603225/

60. + +
2 VMs:
IE 6
IE 7

61. + +
one machine to rule them all

62. #prototype (freenode)
and
Rails Spinoffs Google Group