1. Thomas Fuchs
Adventures in
JavaScript testing

2. Thomas Fuchs
wollzelle
script.aculo.us
mir.aculo.us

3. traditional
javascript „testing“

5. http://www.flickr.com/photos/stephendann/80555607/

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

7. why?

8. quot;JavaScript is
this thing for
funny mouse
trails, right?quot;

9. quot;BUT You
CAN't DEBUG
JavaScript!quot;

10. quot;WE DON'T NEED
NO STINKIN' TESTS
FOR TEN LINES
OF CODE!quot;

11. quot;ANYWAY, THERE
IS NO WAY TO
AUTOMATICALLY
TEST JAVASCRIPT!quot;

12. all of this is
pure FUD

13. unit testing javascript

15. s from
orrow nit
B
est::U
T

16. include unittest.js
(requires Prototype)

17. a DIV is required for
containing the test results
(defaults to quot;testlogquot;)

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

19. …this will excute all
methods starting with
quot;testquot;

20. assert away!

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

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

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

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

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

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

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

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

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

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

31. assertRespondsTo(method, obj)

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

33. info(message)
Displays arbitrary
messages in the quot;Messagequot;
column of the test result

34. assertXYZ(params, message)

35. quot;WELL, WHAT ABOUT
FUNCTIONS THAT
RUN ASYNCHRONOUSLY?quot;

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

37. Benchmarking

38. quot;WELL, NICE. BUT IT'S
TEDIOUS TO RUN ALL THOSE
TESTS MANUALLY!quot;

39. rake to the rescue

40. rake test:javascripts

43. javascript_test plugin

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

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

46. just
add your
tests

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

48. Browser definitions
(add more!)

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

50. …and what about BDD?

51. http://www.flickr.com/photos/sfllaw/4281980/

52. s from
orrow c
B
RSpe

53. specifications

54. add BDD methods
to any object

55. for isSomething()
methods, that
return a boolean

56. should* assertations,
directly on objects

57. (quot;withquot; ugliness no longer
required)

59. Mapping

60. Mixed environment
can also use
quot;normalquot; assertations

61. …and if something
breaks?

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

63. Firebug
Debugger

64. Firebug
know
your
Ajax

65. Venkman JavaScript
Debugger
with
omes !
C
filing
Pro

66. Safari Web Inspector

67. Safari Debugging
with Drosera

68. +
http://webkit.org/

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

70. Test with all
browsers
you want to
support

72. get a setup that
doesn‘t suck

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

74. + +
(+ )

75. one machine to rule them all

76. help and ideas welcome
#prototype (freenode)
and
Rails Spinoffs Google Group