Downloaded 77 times
![Fake JSON response{ "message": [{ "id": 1, "user": "Johansen", "message": "oh hai" }], "token": "1"}The cometClient format, an array of one new message](https://image.slidesharecdn.com/jz2010nodemo-101015171557-phpapp01/85/Test-Driven-JavaScript-Development-JavaZone-2010-107-320.jpg)
![Fake JSON response{ "message": [{ "id": 1, "user": "Johansen", "message": "oh hai" }], "token": "1"}The cometClient format, an array of one new message](https://image.slidesharecdn.com/jz2010nodemo-101015171557-phpapp01/75/Test-Driven-JavaScript-Development-JavaZone-2010-107-2048.jpg)
More Related Content
![[C5]deview 2012 nodejs](https://cdn.slidesharecdn.com/ss_thumbnails/c5deview2012nodejs-120920013859-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Test-Driven JavaScript Development (JavaZone 2010)
![Writing testable js [by Ted Piotrowski]](https://cdn.slidesharecdn.com/ss_thumbnails/writingtestablejs-140722232350-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Test-Driven JavaScript Development (JavaZone 2010)
- 1. Test-Driven JavaScriptEliminating fearand chance from front-end web development
- 2.
- 3.
- 4. What we're doingtodayHow to unit test JavaScript?
- 5.
- 6. Tool chain integrationHowto unit test JavaScript?
- 7.
- 8. YUI TestPart ofthe YUI framework
- 9. Can test anycode, regardless of framework
- 10.
- 11.
- 12. Can ship resultsover the internet
- 13. Supports many outputformats (JUnit XML, TAP, JSON ++)http://developer.yahoo.com/yui/3/test/
- 14. YUI Test caseanatomy
- 16.
- 17.
- 18. YUI Test: TheGoodEasy to get started
- 19. Run in anybrowser
- 20.
- 21. Drop into appfor integration testingYUI Test: The badBoilerplate HTML fixture
- 22. Manually test allbrowsersProblem: Impractical workflow
- 23.
- 24.
- 25. Runs in browser,Rhino and Node.js
- 26. Emulate DOM withenv.js
- 27. Browser-based: Similar toYUI Test
- 28.
- 29.
- 30. JSpec + Rhino:The goodNo browsers
- 31.
- 32. RhinoJust another runtimeNotlike any browsers actually in use
- 33. env.jsJust another DOMimplementationNot like any DOM implementation in actual use
- 43. I hear theseare popular
- 44.
- 45. Manual testing istime consuming
- 46. The best fromboth worlds
- 47.
- 48.
- 50. Start JsTestDriver Serverjava-jar JsTestDriver-1.2.2.jar --port 4224
- 51.
- 57.
- 58. Bonus featuresAlternative assertionframeworks
- 59. Supports QUnit, YUI,Jasmine
- 60.
- 61. Coverage pluginCLI Helper$gem install jstdutil$ export JSTESTDRIVER_HOME=~/bin/jstestdriver
- 62.
- 63.
- 64. Also...$ jsautotestRuns affected testson each save
- 65.
- 66.
- 67.
- 68. IntelliJ IDEA pluginalso available
- 69.
- 70.
- 71. XMLHttpRequestNeeds a serverresponding
- 72. Makes tests runslow(er)
- 73. Unsuitable for unittestsSolution: EncapsulateSimple and elegant
- 74.
- 75. Easy to testExample:Chat client
- 76.
- 77. onSubmitmessageFormControllerthis.view (form)this.model (cometClient)messageListControllerthis.view(dl)this.model (cometClient)cometClient
- 78. What's the trick?Allnetwork access goes through cometClient
- 79. observable supports sameAPI as cometClient
- 80. Use observable intestsWhat about cometClient?We'll get there
- 81. Event HandlersTouch, keyboard,mouse events
- 82.
- 83. Cumbersome to manuallyfireonSubmitmessageFormControllerthis.view (form)this.model (cometClient)messageListControllerthis.view (dl)this.model (cometClient)cometClient
- 84.
- 85.
- 86.
- 87. Often makes senseAPI-wise
- 88. Testing event handlersVerifythat setView adds event handler to form element for submit event
- 89. Verify that thehandler is postMessage, bound to the controller
- 90. Test postMessage separatelyStubsand Mocks
- 91. Disclaimer: I wrotethathttp://cjohansen.no/sinon/
- 92.
- 93. Does not interruptnormal execution
- 94. Logs all callsand related dataUsing Sinon.JS spies
- 95.
- 96.
- 97. Provides useful utilities(more later)Verify that an event handler was added
- 98.
- 100. Testing event handlersVerifythat setView adds event handler to form element for submit event
- 101. Verify that thehandler is postMessage, bound to the controller
- 102.
- 103. Use an adhoc stub
- 104.
- 105. Testing actual networkaccessUsing Sinon.JS
- 106. Configure a fakeserver
- 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 serverto respond
- 109.
- 110. Fake server recognizes/\/chat\?\d+/
- 111. this.server.respond(); fakes aresponse
- 112. cometClient dispatches canneddataTesting timerssetTimeout/setInterval
- 113.
- 114.
- 115.
- 117.
- 118.
- 120. Can you takeone more?
- 122.
- 123. Hudson setup"Free-style softwareproject"
- 124.
- 126. java -jar test/JsTestDriver-1.2.2.jar\ --config jsTestDriver.conf \ --reset \ --server http://localhost:4223 \ --tests all \ --testOutput .
- 127.
- 128.
- 129.
- 130. Risky time: LivedemoAdd a feature - test first
- 131.
- 132.
- 133.
- 134. Test in multiplebrowsersFeature: @-messagesHighlight messages directed at current user
- 135. onSubmitmessageFormControllerthis.view (form)this.model (cometClient)messageListControllerthis.view(dl)this.model (cometClient)cometClient
- 136.
- 137.
- 138. Thanks for yourtime!http://cjohansen.no/
- 139.
- 140.
- 141.
- 142.