Mark Michaelis walks you through the Visual Studio tooling and project setup you’ll need to get the most out of your JavaScript unit testing.

• **By **Mark Michaelis12/19/2013

As I detailed in my recent article “A TypeScript Primer,” I, like many developers, have a love/hate relationship with JavaScript. I love JavaScript because of its ubiquity; from iPhone to Android to Windows Phone, JavaScript just works. From iOS to UNIX to Windows, JavaScript continues to just work. (Admittedly, there are some idiosyncrasies, but for the most part – at least from a language perspective – it just works.)

Unfortunately, JavaScript is lacking in its ability to verify intent. It does what you tell it to do – not necessarily what you want it to do. (If you figure out the secret for getting a computer to consistently do what you want rather than what you tell it, please let me know! I would like to partner with you on a business idea or two.) Table 1has a summary of JavaScript’s good and bad:

Table 1. JavaScript, the Good and the Bad

Of all these characteristics, it’s JavaScript’s lack of type safety coupled with not having a compiler fail in the capacity to verify intent. That is, of course, if you don’t have unit tests. Unit tests can compensate for the lack of type safety. And unlike with .NET, where unit tests focus mainly on functional verification (since the compiler eliminated the majority of typos), unit tests in JavaScript do both. In summary, JavaScript unit testing is all the more critical because it’s responsible to not only verify functionality, but also to verify syntax and language semantics.

In this article, I’m going to focus on the Visual Studio tooling and project setup requirements needed to get the most out of your JavaScript unit testing.

Tooling

The two most popular Visual Studio integrated tools for JavaScript unit testing are ReSharper and Chutzpah (a Yiddish word about having the audacity to say things as they are – good or bad). Chutzpah is an open source Visual Studio extension and JavaScript test runner written by Matthew Manela. ReSharper is the well-known JetBrains tool, famous for its C## and JavaScript refactoring capabilities.

Both tools are Visual Studio extensions, so installing either into Visual Studio is nothing more than clicking the Tools->Extensions and Updates… menu and searching for “JavaScript Unit Testing” or simply “Chutzpah” or “ReSharper.”

At the core of most JavaScript unit testing lies a headless browser, PHATOMJS.EXE. When this browser launches, it hosts HTML that in turn references your JavaScript files. In addition to the JavaScript files that you supply from your Web project (and the frameworks like JQuery that you reference as part of your production code), JavaScript unit testing generally relies on a unit testing framework. The two primary unit testing frameworks, both of which are open source, are QUnit and Jasmine. Both are well suited for the task of unit testing but each brings a slightly different style to the unit test. QUnit follows the traditional unit-testing style test format, while Jasmine is a behavioral-driven design (BDD) testing framework.

QUnit

As stated on the QUnit Web site, “QUnit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!” Code Listing 1provides a sample QUnit test file.

Code Listing 1: A Sample QUnit Series of Tests

/// <reference path="QUnit.js" />
/// <reference path="../../intellitect.sharepoint.web/scripts/SampleRestService.js" />

var restService = null;
module("SampleRestService.getToken()", {
  setup: function () {
    restService = new SampleRestService("http://IntelliTect.com/Blog");
  },
  teardown: function () {
    restService = null;
  }
});
  test("Provide valid credentials", function () {
    var token = restService.getToken("Inigo.Montoya", "Ykmfptd!");
    equal(token, "ecy8b081wh6owf8o", 
	"The token value returned was not as expected.");
  });
  test("Prevent empty string for the name", function () {
    raises(function() {
      var token = restService.getToken("", "Ykmfptd!");
    }, "Unexpectedly, no error was raised given a blank name.");
  });
  test("Prevent empty null for the password", function () {
    raises(function () {
      var token = restService.getToken("Inigo.Montoya", null);
    }, "Unexpectedly, no error was raised given a null password.");
  });

module("SampleRestService.downloadFile()")
  test("Throw an exception if file does not exist.", function () {
    raises(function () {
      var restService =
        new SampleRestService("http://IntelliTect.com/Blog", 
		"Inigo.Montoya", null);
      var file = restService.downloadFile("Bog.us");
    }, "Unexpectedly, no error was raised given an invalid file.");
  });

As one would expect, QUnit supports the standard unit testing constructs, including grouping tests into constructs (using module), pre- and post-test execution steps (setup/teardown members), and a variety of assertions: ok, equal, notEqual, strictEqual, notStrictEqual, deepEqual, notDeepEqual, raises. Essentially, the structure mimics that of a developer unit-testing library.

Jasmine

Although very similar, Jasmine’s BDD-based API involves defining a Spec – a grouping of tests or conditions to verify. The spec places each test into a context or scenario and comprises a suit of tests (see Code Listing 2).

#visual studio code #visual studio #code #java #javascript