Test-Driven JavaScript Development (JavaZone 2010)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Test-Driven JavaScript Development (JavaZone 2010)

  • 6,312 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
6,312
On Slideshare
5,033
From Embeds
1,279
Number of Embeds
1

Actions

Shares
Downloads
67
Comments
0
Likes
3

Embeds 1,279

http://mobicon.tistory.com 1,279

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