Test-Driven JavaScript Development (JavaZone 2010)

  • 5,886 views
Uploaded on

My slides from JavaZone 2010. Watch video:

My slides from JavaZone 2010. Watch video:

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,886
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
67
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/
  • 4. What we're doing today
    • How to unit test JavaScript?
    • 5. JavaScript testing challenges
    • 6. Tool chain integration
  • How to unit test JavaScript?
  • 7. In-browser test frameworks
  • 8. YUI Test
    • Part of the YUI framework
    • 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
  • 15.
  • 16. YUI Test scaffolding
  • 17. YUI Test run
  • 18. YUI Test: The Good
    • Easy to get started
    • 19. Run in any browser
    • 20. Built-in mocks
    • 21. Drop into app for integration testing
  • YUI Test: The bad
    • Boilerplate HTML fixture
    • 22. Manually test all browsers
  • Problem: Impractical workflow
  • 23. Headless runners
  • 24. JSpec
    • BDD framework
    • 25. Runs in browser, Rhino and Node.js
    • 26. Emulate DOM with env.js
    • 27. Browser-based: Similar to YUI Test
  • 28. JSpec Rhino scaffolding
  • 29. JSpec Rhino run
  • 30. JSpec + Rhino: The good
  • Problem: It's all fake
  • 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
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 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
  • 49.
  • 50. Start JsTestDriver Server
    java -jar JsTestDriver-1.2.2.jar --port 4224
  • 51. Capture Target Browsers
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57. JsTestDriver Run
  • 58. Bonus features
    • Alternative assertion frameworks
    • 59. Supports QUnit, YUI, Jasmine
    • 60. JUnit XML Output
    • 61. Coverage plugin
  • CLI Helper
    $ gem install jstdutil
    $ export JSTESTDRIVER_HOME=~/bin/jstestdriver
  • 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
  • 71. XMLHttpRequest
    • Needs a server responding
    • 72. Makes tests run slow(er)
    • 73. Unsuitable for unit tests
  • Solution: Encapsulate
    • Simple and elegant
    • 74. Looser coupling
    • 75. Easy to test
  • Example: Chat client
  • 76. Anatomy
  • 77. onSubmit
    messageFormController
    this.view (form)
    this.model (cometClient)
    messageListController
    this.view (dl)
    this.model (cometClient)
    cometClient
  • 78. What's the trick?
    • All network access goes through cometClient
    • 79. observable supports same API as cometClient
    • 80. Use observable in tests
  • What about cometClient?
    We'll get there
  • 81. Event Handlers
    • Touch, keyboard, mouse events
    • 82. Cross-browser issues
    • 83. Cumbersome to manually fire
  • onSubmit
    messageFormController
    this.view (form)
    this.model (cometClient)
    messageListController
    this.view (dl)
    this.model (cometClient)
    cometClient
  • 84. Submitting message
  • 85. Solution: Decouple code
    • Simple
    • 86. Testable
    • 87. Often makes sense API-wise
  • 88. Testing event handlers
    • Verify that setView adds event handler to form element for submit event
    • 89. Verify that the handler is postMessage, bound to the controller
    • 90. Test postMessage separately
  • Stubs and Mocks
  • 91. Disclaimer: I wrote that
    http://cjohansen.no/sinon/
  • 92. Sinon.JS Spies
    • Wraps functions
    • 93. Does not interrupt normal execution
    • 94. Logs all calls and related data
  • Using Sinon.JS spies
  • 95. sinon.testCase()
    • Automatically verifies mocks
    • 96. Automatically restores all fakes
    • 97. Provides useful utilities (more later)
  • Verify that an event handler was added
  • 98. Testing the handler
  • 99.
  • 100. Testing event handlers
    • Verify that setView adds event handler to form element for submit event
    • 101. Verify that the handler is postMessage, bound to the controller
    • 102. Test postMessage separately
  • 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
  • 109. What happened?
    • GET /chat?1283370174112
    • 110. Fake server recognizes //chat?d+/
    • 111. this.server.respond(); fakes a response
    • 112. cometClient dispatches canned data
  • Testing timers
    • setTimeout/setInterval
    • 113. Causes slow(er) tests
    • 114. Causes asynchronous tests
  • Solution: Fake it
  • 115. Toolchain
  • 116.
  • 117. JsTestDriver and Maven
    http://code.google.com/p/jsd-maven/
  • 118. XML Pushups
  • 119.
  • 120. Can you take one more?
  • 121.
  • 122. Continuous Integration
  • 123. Hudson setup
    • "Free-style software project"
    • 124. Hudson xUnit Plugin
  • 125.
  • 126. java -jar test/JsTestDriver-1.2.2.jar
    --config jsTestDriver.conf
    --reset
    --server http://localhost:4223
    --tests all
    --testOutput .
  • 127. Project overview
  • 128. Test case
  • 129. Failed test (IE6)
  • 130. Risky time: Live demo
  • Feature: @-messages
    Highlight messages directed at current user
  • 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/
  • 138. Thanks for your time!
    • http://cjohansen.no/
    • 139. http://github.com/cjohansen/
    • 140. http://gitorious.org/~cjohansen/
    • 141. http://twitter.com/cjno/
    • 142. christian@cjohansen.no