Home
The Spec
The Language
The Practice
The Books
Links

Setting Up Your Environment

It is possible to do Test-Driven Development in JavaScript (JScript) as an ASP .NET developer. This article describes a way to set up your Windows ASP .NET environment in order to do Test-Driven JavaScript programming for both the client side and the server side. If you want to try JSNUnit online right now, you can use the Test-Driven JavaScript Writer. Follow these instructions to install JSNUnit in an ASP .NET environment.

First, you need to navigate to Microsoft's ASP.NET Downloads area:

Official Microsoft ASP .NET Downloads

Then, you should download and install the Microsoft .NET Framework 2.0:

Microsoft .NET Framework Version 2.0 Download Site

Then, download and install the Visual Web Developer:

Visual Web Developer 2005 Download Site

Finally, download JSNUnit and choose to save the file on your desktop.

JSNUnit JavaScript Testing Framework Download

Now you should have the new JSNUnit Compressed Folder on your desktop:

Desktop Picture of Zipped JSNUnit Package

By right-clicking on this file and choosing to "Extract All..." you should see the first screen of the "Extraction Wizard"

First pane of the Windows Extraction Wizard

Click "Next",

Second pane of Windows Extraction Wizard

Click "Next" again to extract the files to the same location as your downloaded file,

Extracting process of Windows Extraction Wizard

Finally, you should see this:

Extraction Complete Windows Extraction Wizard Pane

When you close the wizard, you should have an uncompressed version of the folder on your desktop ready for use:

Desktop after extracting the JSNUnit folder

Now, we need to create a new web site in Visual Web Developer Express. Start Visual Web Developer and on the left side of the Start Page you should see this:

Visual Web Developer Project Choice Options

Click on the "Web Site..." link next to the word "Create:". Another screen should open up that allows you to set initial settings for your new web site. Then make sure that you select the "Empty Web Site" template:

Empty Web Site Selection

Then, set the web site location to "File System", the name to "Calculator" and the language to "C#" as shown below. We won't be programming in C#, but this is all we can do since JScript isn't an option at the time of this writing.

Web Site Settings in VWD

Hit the "Open" button. On the right side, the "Solution Explorer" should look something like this:

Empty Calculator Web Project

Now we need to set up our new web site for TDD by bringing in the JSNUnit files. We do this by right-clicking on the "C:\WebSites\Calculator" text in the Solution Explorer and choosing "Add an Existing Item..." from the menu. This brings up the "Add Existing Item dialog box. You need to navigate to the Desktop where the JSNUnit files are and select them for adding into your web site:

Windows Explorer with JSNUnit Files Selected

Now your Solution Explorer should show all of the files in your web site:

Calculator Web Project With JSNUnit Loaded

You are now ready to start doing Test-Driven JavaScript. JSNUnit comes with some failing tests that you can use to practice with. Right click on the file in Solution Explorer called "AllTestRunner27.htm". It will start up an in-memory web server on your computer and pop up the test-runner web page. The top part of the page shows the server-side tests and the bottom part shows the client-side:

Default Failing Tests in JSNUnit AllTestRunner

Let's fix these broken tests. JSNUnit 2.7 comes with four different test runners. They all run inside your browser. The test runners are:

  • AllTestRunner27.htm - For showing results of both client-side and server-side tests at once.
  • TestRunner27.aspx - For showing the results of just the server-side tests.
  • TestRunner27.htm - For showing the results of just the client-side tests.
  • TestRunnerXml27.aspx - For showing the results of the server-side tests in XML format.
Let's start by fixing the tests on the server-side.

 

By default, JSNUnit 2.7 stores the server-side test code in the "ServerTests.js" file. When you double-click and open that file from Solution Explorer, you will see the following code:

 

function registerAllTests() {

  // A Sample Test.
  newTest("SampleTest").Execute = function() {
    this.Assert(1==2, "One equals two?");
  }

  // Another Sample Test.
  newTest("AnotherSampleTest").Execute = function() {
    this.AreEqual("", "", "They should be consistent");
    this.Assert(2==2, "Two equals two");
  }
}

// This line executes the function:
var allTests = registerAllTests();

 

This code shows two tests. One is called "SampleTest" and the other is called "AnotherSampleTest". These names correspond to the names showing in the all test runner above. Looking at these tests, you will see that the first one (SampleTest) has a line "this.Assert(1==2, "One equals two?");". This line is attempting to "Assert" that 1 is equal to 2. We know that this isn't true. Usually tests would assert something against code that you are going to write, but in this case, the assertion is against a simple math function in JavaScript. All you need to do to make this work is to change the "==" to a "!=". Let's try that and then right-click on the server-side runner called: "TestRunner27.aspx" to bring it up in your browser. (You may need to "refresh" your browser once to make sure it isn't taking the test results from the browser cache) It should look like this now:

Failing Server-Side Runner

Notice, now, that the "One equals two?" test is no longer in the test results. When something doesn't appear in the test results, that means it is passing. We now have only one more test to fix on the server side to get the whole server side to pass. The second test above, has another line that looks like this:

 

    this.AreEqual("", "", "They should be consistent");

 

This is a different kind of "Assert" that JSNUnit provides. "this.AreEqual()" takes three arguments. The first is the expected value. The second is the actual value, and the third is the description of the assert. As you can see, the assertion shows "Hello" and "World" in different orders. The JSNUnit 2.7 automatically encodes strings so that you can compare them in the browser. That is why you see the "%3C" and "%3E". These are the codes for the angle brackets in the HTML tags. Spaces are shown as "%20". This is a good way to see if you accidently added too many spaces in the string. Let's change the word order of the actual part of the test from "World, Hello" to "Hello World" and then refresh the server-side runner:

Passing Server-Side Runner

The server-side tests are now passing 100%. The display turn's green and display's "Pass". Now let's work on the client-side tests. The client-side tests are located in the file called "ClientTests.js". When you open this file you see:

newTest("FirstTest").Execute = function() {
  this.Assert(true, "A Passing Test");
}

newTest("SecondTest").Execute = function() {
  this.Assert(false, "A Failing Test");
}

newTest("thirdTest").Execute = function () {
  this.AreEqual("Expected Text", "Actual Text", "Another Failing Test");
}

newTest("fourthTest").Execute = function () {
  this.Fail("Fourth Failing Test");
}

newTest("fifthTest").Execute = function () {
  this.AreNotEqual(1, 2, "Fifth Test");
}

 

One of the benefits of JSNUnit is that the same basic structure can be used to test the client-side and the server-side even though the client-side runs in the browser, and the server-side runs in ASP .NET. In fact, the exact same JSNUnit code is used in both places. The "FirstTest" in this group of tests is already passing and doesn't show up in our list of failing tests above. "Second Test" is the first one that fails and it does show up. As you can see, this test is probably the easiest possible failing test to make. It is just asserting that "false" is "true" which is, of coarse, rediculous. Let's change the "false" to a "true". Then run the client-side runner called "TestRunner27.htm" and you should see this (remember you may have to hit "refresh" before the browser displays correctly):

Failing Client-Side Runner

There are two more failing tests in these test results. The next tries to say the text "Expected Text" is equal to "Actual Text". Let's change them both to "Expected Text". The next test uses a new assert called this.Fail(). This assert is used when you want to force a failure. This can be helpful when you are debugging or when you are writing a complicated test of your own that must fail if a specific path through the logic is taken. In order to make these tests pass, we must comment out this line by putting a "//" in front of it. Do that and then refresh the test runner. It should pass like this:

Passing Client-Side Runner

We have just fixed all of the tests. We can prove this now by running the "AllTestRunner27.htm" again. This is what it should look like now:

All Tests Passing in Runner

Now you know how to download and set up your own Test-Driven Development environment in ASP .NET using JSNUnit 2.7. Here is an example of how to use JSNUnit to do Test-Driven Development. If you've never tried Test-Driven Development I highly suggest you try it soon. You may, like me, find that it makes developers lives more enjoyable. You may also be wondering why anyone would attempt to use JavaScript for this and not something like C#? The main reason is that because of C#'s static foundation, it may make you go slower than you need to when you are practicing Test-Driven Development. If you want to try Test-Driven development with JavaScript right now you can do so in your browser using the Test-Driven JavaScript Writer.


Troy Taft is the Principal Consultant and founder of Troy Taft Consulting, a firm specializing in high value software development. He also authors a free monthly newsletter called Software Matters.

Copyright 2007 Troy Taft All rights reserved, you may print this article for your personal use.