Unit testing JavaScript used to be painfully tedious. It required that you, the developer, set up HTML scaffolding to hold the code to be tested and the unit test framework. Once the test page was loaded, your life was a long series of F5 presses, as you modified code and press F5 to re-execute the test. Blah. JsTestDriver is a JavaScript unit testing tool from Google. The project’s stated goal: to make JavaScript unit test development as seamless as and easy as Java unit tests. Test driven development in JavaScript can be tricky to setup in Visual Studio, I will show you how to do it. Plus, I will show how to do it using JetBrains’ WebStorm 4.0, without removing the project from VS 2010.

1. JavaScript Test Driven
Development using JsTestDriver,
VS 2010, and WebStorm 4.0
SpeakerRate - http://spkr8.com/t/11601

2. Who am I?
I am a Microsoft Certified Solution Developer and I’ve
been developing software since 1979. Since 2009, I have
been focused on developing mobile applications, for
iPhone, Android, the mobile web, and Windows Phone 7.

3. What is JsTestDriver?
JsTestDriver aims to help javascript
developers use good TDD practices
and aims to make writing unit tests as
easy as what already exists today for
java with JUnit.

4. Why JsTestDriver?
• It is fast.
• It runs in the browser.

5. What is Test Driven
Development?
• Write a test
• Run tests; watch new test fail
• Make the test pass
• Refactor to remove duplication

6. The Benefits of TDD
• Regression Testing
• Refactoring
• Cross-Browser Testing
• Serves as Code Documentation
• Helps Create Cleaner Code

7. Installation
• Need Java, JRE only.
http://www.java.com
• Make sure your path points to the java.exe file
• Get the latest version of JsTestDriver. http://code.google.com/p/js-test-driver/downloads/list
• I normally will rename it from JsTestDriver-x.x.x.x.jar to simply JsTestDriver.jar
• Create your tests and your classes to be tested
• Create your configuration file in the project root
• Be sure to save the configuration file as an ASCII file!
File -> Advanced Save Options -> Encodings -> US-ASCII

8. Automating the
JsTestDriver Server
• Tools -> External Tools
• Choose Add and for Title box enter: JsTestDriver Server Run
• Command box enter: java.exe
• Arguments box enter: -jar c:binJsTestDriver.jar --port 9876
• Initial directory enter: $(SolutionDir)
• Check Use Output window then click OK

9. Automating the
JsTestDriver Runner
• Tools -> External Tools
• Choose Add and for Title box enter: JsTestDriver Run
• Command box enter: java.exe
• Arguments box enter: -jar c:binJsTestDriver.jar --tests all
• Initial directory enter: $(ProjectDir)
• Check Use Output window then click OK

10. Create a Test Project

11. With WebStorm and
Visual Studio
• From WebStorm Quick Start, choose Open Directory
• Navigate to the your Visual Studio project
• You may need to associate the jstestdriver.conf with a
configuration file
• Start the JsTestDriver Server (lower panel on screen)
• Capture one or more browsers
• Execute the tests

12. Summary
JsTestDriver makes it easier to
do Test Driven Development in
JavaScript.

13. References
• http://code.google.com/p/js-test-driver/
• http://blog.jetbrains.com/webide/2011/10/javascript-
unit-testing-support/
• http://slmoloch.blogspot.com/2009/08/how-to-run-
jstestdriver-with-visual_02.html

14. Please Rate My Talk:
SpeakerRate - http://spkr8.com/t/11601
The Source Code is on GitHub at:
https://github.com/Rockncoder/JQMContacts