My slides from JavaZone 2010. Watch video:

1. Test-Driven JavaScript Eliminating fear and chance from front-end web development

2. Christian Johansen http://cjohansen.no/ http://github.com/cjohansen http://gitorious.org/~cjohansen http://twitter.com/cjno

3. My book http://tddjs.com/

5. JavaScript testing challenges

7. In-browser test frameworks

9. Can test any code, regardless of framework

10. In-browser runner

11. Built-in mocks

12. Can ship results over the internet

13. Supports many output formats (JUnit XML, TAP, JSON ++)http://developer.yahoo.com/yui/3/test/

14. YUI Test case anatomy

16. YUI Test scaffolding

17. YUI Test run

19. Run in any browser

20. Built-in mocks

23. Headless runners

25. Runs in browser, Rhino and Node.js

26. Emulate DOM with env.js

28. JSpec Rhino scaffolding

29. JSpec Rhino run

32. Rhino Just another runtime Not like any browsers actually in use

33. env.js Just another DOM implementation Not like any DOM implementation in actual use

43. I hear these are popular

44. ...and these

45. Manual testing is time consuming

46. The best from both worlds

47. JsTestDriver

48. JsTestDriver.conf

50. Start JsTestDriver Server java -jar JsTestDriver-1.2.2.jar --port 4224

51. Capture Target Browsers

57. JsTestDriver Run

59. Supports QUnit, YUI, Jasmine

60. JUnit XML Output

62. Pretty colors

63. With errors

64. Also... $ jsautotest Runs affected tests on each save

65. Eclipse

66. Eclipse

67. Eclipse run

68. IntelliJ IDEA plugin also available

69. Just released

70. JavaScript testing challenges

72. Makes tests run slow(er)

74. Looser coupling

76. Anatomy

77. onSubmit messageFormController this.view (form) this.model (cometClient) messageListController this.view (dl) this.model (cometClient) cometClient

79. observable supports same API as cometClient

82. Cross-browser issues

84. Submitting message

86. Testable

89. Verify that the handler is postMessage, bound to the controller

91. Disclaimer: I wrote that http://cjohansen.no/sinon/

93. Does not interrupt normal execution

96. Automatically restores all fakes

98. Testing the handler

101. Verify that the handler is postMessage, bound to the controller

103. Use an ad hoc stub

104. Integration: Simulate

105. Testing actual network access Using Sinon.JS

106. Configure a fake server

107. Fake JSON response { "message": [{ "id": 1, "user": "Johansen", "message": "oh hai" }], "token": "1" } The cometClient format, an array of one new message

108. Force fake server to respond

110. Fake server recognizes /chat+/

111. this.server.respond(); fakes a response

113. Causes slow(er) tests

115. Toolchain

117. JsTestDriver and Maven http://code.google.com/p/jsd-maven/

118. XML Pushups

120. Can you take one more?

122. Continuous Integration

126. java -jar test/JsTestDriver-1.2.2.jar br /> --config jsTestDriver.conf br /> --reset br /> --server http://localhost:4223 br /> --tests all br /> --testOutput .

127. Project overview

128. Test case

129. Failed test (IE6)

131. Autotest

132. Test with Maven

133. CI with Hudson

135. onSubmit messageFormController this.view (form) this.model (cometClient) messageListController this.view (dl) this.model (cometClient) cometClient

136. Questions?

137. My book http://tddjs.com/

139. http://github.com/cjohansen/

140. http://gitorious.org/~cjohansen/

141. http://twitter.com/cjno/

142. christian@cjohansen.no