JSpec 1.1.4 - JavaScript BDD Testing Framework

What Is JSpec?

Well it is a JavaScript Testing Framework taking the form of BDD (Behavior Driven Development). BDD is simply a development technique in which you write tests (specifications), documenting how the implementation of a routine should function.

For example lets say we wish to write the method isEmpty() which should check if an array has any values. The first step would to write its specification BEFORE we write the implementation. The spec may look something like this:

Installation

JSpec is distributed as a Ruby gem, however if you wish to include it directly within your source tree, you may simply visit http://visionmedia.github.com/jspec and download the zip or tarball.

To install as a gem simply execute the following command:

Getting Started

To create a new project template simply execute the following command:

We will now have a template initialized within the ./myProject directory matching the structure below (alter as you like).

Automated Testing

JSpec is packaged with auto-testing functionality, which will run your spec suites whenever they, or your library code is altered. At the root of your project directory execute the following command to being auto-testing:

You should see a message similar to "Binding to lib/yourlib.core.js, spec/spec.core.js, watching change every 1 second(s).", indicating we have begun auto-testing these files.

To run auto-test using several browsers execute the following:

Now open up either spec/spec.core.js or lib/yourlib.core.js in the text editor of your choice, and save the document. JSpec will now run the suites within the browser(s) specifed, using the DOM formatter by default which produces the following output:

Writing Your First Specification

Lets go ahead and write our Array#isEmpty() method, but first we need to copy the spec we wrote at the beginning of this tutorial, and paste it into spec/spec.core.js. Once saved you will see that our new code simply fails due to the isEmpty() method not existing, so lets open up lib/yourlib.core.js and write the implementation below:

Once saved the suites will run again, producing the output below indicating that both of our specifications have passed.

Refactoring Your Code

Here is where behavior driven development really shines; refactoring. Refactoring is simply the act of re-writing internal code, without altering external APIs. This is done for several reasons, for example to increase performance of internal code, improve readability, or for security reasons. Specifications help reassure that your code is functioning as you originally intended.

When a specification fails JSpec will certainly let you know about it, displaying a assertion failure message like below:

Matchers

Matchers are used to make an assertion on how a routine should function. JSpec has more core matchers than most JavaScript testing frameworks, ranging from jQuery DOM related matchers, composite object matchers for arrays and objects, or scalar matchers for ints, strings, floats, etc.

Below are a few matcher examples, to create custom matchers for your library, or to read more about the core JSpec matchers available consult "Additional Information" at the end of this tutorial.

Features As Of JSpec 1.1.4

Below is a list of major features currently supported:

• Highly readable syntax
• Framework / DOM independent
• Nested describes
• Does not pollute core object prototypes
• Async support
• Extremely simple and intuitive matcher declaration
• Over 45 core matchers
• Allows parens to be optional when using matchers to increase readability
• Several helpful formatters (dom, console, terminal, ...)
• Assertion graphs displaying how many, and which assertions pass or failed
• Default / customizable evaluation contexts
• DOM sandbox support
• Optionally display failures only, speeding up development
• Great looking default DOM theme
• Profiling
• Tiny (15 kb compressed, 1000-ish LOC)

Additional Information

For more information on matchers, the JSpec syntax, TextMate bundles and more visit http://visionmedia.github.com/jspec/