Unit Testing in JavaScript: JSSpec

If you are not familiar with definition of Unit Testing or you are wondering about solutions in JavaScript go to one of my previous articles.

If you want to see real example of Unit Testing or Test Driven Development, go to article Unit Testing in JavaScript: QUnit.

Today’s Unit Testing Framework is JSSpec. It is used by MooTools, TiddlyWiki and others. Because it is purely JavaScript (Browser-side) tool like QUnit, which have been already described I’m going to point out only important things, without going into details.

JSSpec is called Behavior Driven Development framework (BDD) and is based on popular RSpec ruby framework. It “provides a Domain Specific Language with which you can express executable examples of the expected behaviour of your code”. In other words we are able to read our Unit Tests like documentation (or specification which client gave us). JSSpec has little less features than QUnit, but it is simultaneously more readable (in my opinion).

Framework

There’s no need to download anything. You create new html document and paste following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>JSSpec test framework</title>
<link rel="stylesheet" type="text/css" href="http://github.com/osteele/jsspec/raw/master/JSSpec.css" />
<script type="text/javascript" src="http://github.com/osteele/jsspec/raw/master/diff_match_patch.js"></script>
<script type="text/javascript" src="http://github.com/osteele/jsspec/raw/master/JSSpec.js"></script>
<script type="text/javascript">// <![CDATA[
  /* Your tests go here */
// ]]></script>
</head>
<body>
</body>
</html>

For live test purposes you may use this link.

Sample code

Explanation

As seen above, tests are nested in describe function which act like module function from QUnit. There are several comparing methods. We may use them after value_of(foo) where foo is tested object.

value_of(foo).should_be(bar) – OK if foo = bar
value_of(foo).should_not_be(bar) – OK if foo != bar
value_of(foo).should_be_empty() – OK if foo = “”
value_of(foo).should_be_true() – OK if foo = true
value_of(foo).should_be_false() – OK if foo = false
value_of(string).should_have(n, “characters”) – OK if string has n characters (string)
value_of(object).should_have(n, “items”) – OK if object has n items (array)
value_of(object).should_have(n, “sth”) – OK if object has key sth with value that length is n
value_of(object).should_have_at_least(n, “sth”)
value_of(object).should_have_at_most(n, “sth”)
value_of(array).should_include(key) – OK if array has specific key
value_of(array).should_not_include(key) – OK if array has not specific key
value_of(string).should_match(regexp) – OK if string matches specific regexp
value_of(string).should_not_match(regexp)
value_of(foo).should_be_null()
value_of(foo).should_not_be_null()

We have to remember about passing our object to value_of function. We cannot write e.g. foo.should_be(bar). If you wonder why, read FAQ.

Particularly, should_be is equivalent to equal from QUnit, and should_be_true act similar to ok. Most common function is should_be and it can replace any other mentioned.

If we want to separate tests into different files, simply do it and include them in header.

Let’s take live example, from MooTools set of test. We’re checking array class: