<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog &#187; jspec</title>
	<atom:link href="http://monket.net/blog/tag/jspec/feed/" rel="self" type="application/rss+xml" />
	<link>http://monket.net/blog</link>
	<description></description>
	<lastBuildDate>Mon, 12 Apr 2010 13:11:21 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Loris: Autotest for Javascript</title>
		<link>http://monket.net/blog/2009/11/loris-autotest-for-javascript/</link>
		<comments>http://monket.net/blog/2009/11/loris-autotest-for-javascript/#comments</comments>
		<pubDate>Fri, 06 Nov 2009 14:26:54 +0000</pubDate>
		<dc:creator>Karl O&#39;Keeffe</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[autotest]]></category>
		<category><![CDATA[growl]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[javascript lint]]></category>
		<category><![CDATA[js test driver]]></category>
		<category><![CDATA[jspec]]></category>
		<category><![CDATA[loris]]></category>
		<category><![CDATA[ruby]]></category>

		<guid isPermaLink="false">http://monket.net/blog/?p=261</guid>
		<description><![CDATA[I&#8217;ve previously written a number of posts on javascript and autotest. Explaining how to integrate javascript lint, unit tests, and growl with the ruby Autotest project. While this all worked, it felt a little clunky as Autotest doesn&#8217;t natively support the idea of running multiple tasks one after the other. Rather than hack at the [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve <a href="http://monket.net/blog/tag/autotest/">previously written a number of posts on javascript and autotest</a>. Explaining how to integrate javascript lint, unit tests, and growl with the ruby <a href="http://ph7spot.com/articles/getting_started_with_autotest">Autotest</a> project.</p>

<p>While this all worked, it felt a little clunky as Autotest doesn&#8217;t natively support the idea of running multiple tasks one after the other. Rather than hack at the Autotest codebase, I thought I&#8217;d get some ruby experience by rolling my own autotest-style framework. Not great for reuse of code, but a great way for me to learn :)</p>

<h2>Loris</h2>

<p>Loris will monitor your project and run <a href="http://www.javascriptlint.com/">Javascript Lint</a> and <a href="http://code.google.com/p/js-test-driver/">JS Test Driver</a> whenever a file changes, it will report the results to the command line and using <a href="http://growl.info/">Growl</a>. If required, Loris will automatically start the JS Test Driver server and register your default browser with it.</p>

<h3>Installing</h3>

<p>Loris is hosted on <a href="http://gemcutter.org/">Gemcutter</a>, so you need to install their gem if you haven&#8217;t already.</p>


<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> gem update <span style="color: #660033;">--system</span>
<span style="color: #c20cb9; font-weight: bold;">sudo</span> gem <span style="color: #c20cb9; font-weight: bold;">install</span> gemcutter
gem tumble</pre></div></div>


<p>Then to install Loris, just run the following:</p>


<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> gem <span style="color: #c20cb9; font-weight: bold;">install</span> loris</pre></div></div>


<p>Loris has no command line options, and no configuration file (at the moment). It looks for configurations files to decide which tasks to run.</p>

<h3>Configuring Javascript Lint</h3>

<p>To enable Javascript Lint, create a <code>jsl.conf</code> file in the folder where you run Loris. This should be a standard Javascript Lint config file. If you need here is an <a href="http://mike.kruckenberg.com/archives/2009/03/configuration-options-for-javascript-lint.html">example Javascript Lint config file</a></p>

<p>You just need to specify which files Javascipt Lint should process. For example:</p>


<div class="wp_syntax"><div class="code"><pre class="conf" style="font-family:monospace;">### Files
# Specify which files to lint
# Use &quot;+recurse&quot; to enable recursion (disabled by default).
# To add a set of files, use &quot;+process FileName&quot;, &quot;+process Folder\Path\*.js&quot;,
# or &quot;+process Folder\Path\*.htm&quot;.
#
+process src/js/*.js
+process tests/js/*.js</pre></div></div>


<p>If no <code>jsl.conf</code> file is found, the Javascript Lint task is silently skipped.</p>

<h3>Configuring JS Test Driver</h3>

<p>To enable JS Test Driver, create a <code>jsTestDriver.conf</code> file in the folder where you run Loris. This should be a standard <a href="http://code.google.com/p/js-test-driver/wiki/ConfigurationFile">JS Test Driver config file</a>.</p>

<p>This should specify which files JS Test Driver should process, and how it connects to the JS Test Driver server. For example:</p>


<div class="wp_syntax"><div class="code"><pre class="yaml" style="font-family:monospace;">server: http://localhost:9876
&nbsp;
load:
  - tests/qunit/equiv.js
  - tests/qunit/QUnitAdapter.js
&nbsp;
  - src/js/*.js
  - tests/js/*.js</pre></div></div>


<p>If no <code>jsTestDriver.conf</code> file is found, the JS Test Driver task is silently skipped.</p>

<p>To make it really simple to run JS Test Driver tests, if the server is set to run on <code>localhost</code>, and Loris doesn&#8217;t detect one running, it will automatically start one, and register your default browser with it.</p>

<p>This makes it a one step process to get automated tests up and running.</p>

<h3>Running</h3>

<p>To run, open a command line window, navigate to the root folder of your project, and run:</p>


<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">loris</pre></div></div>


<p>Loris will run Javascript Lint, and JS Test Driver tasks (if it finds their configuration files), and will output the results on the command line.</p>

<h4>Example output</h4>


<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">Javascript Lint
success
All files are clean
&nbsp;
0 error(s), 0 warning(s)
JS Test Driver
success
All tests pass
[PASSED] GreeterTest.testGreet
  [LOG] JsTestDriver Hello World!
[PASSED] GreeterTest.testGoodbye
[PASSED] GreeterTest.testSetName
[PASSED] GreeterTest.testSetNameAndNameParamter
[PASSED] Asserts.test OK true succeeds
[PASSED] Asserts.test Equals succeeds
  [LOG] about to call assertEquals
[PASSED] Asserts.test Same assert succeeds
[PASSED] Lifecycle.test Setup and Teardown are run, and can contain assertions
Total 8 tests (Passed: 8; Fails: 0; Errors: 0) (3.00 ms)
  Firefox 1.9.1.4 MacIntel: Run 8 tests (Passed: 8; Fails: 0; Errors 0) (3.00 ms)</pre></div></div>


<p>Every time you make a change to a Javascript file, or a configuration file, Loris will automatically re-run Javascript Lint and JS Test Driver. So you can instant feedback on your changes.</p>

<p>Loris will clear the command line when re-running tasks. So the latest run is always at the top of you command line.</p>

<p>Loris will also report a summary of each task using <a href="http://growl.info/">Growl</a> (if it is installed). This allows you to get quick feedback without needing to refer back to the command line on every change.</p>

<h3>Requirements</h3>

<p>JS Test Driver is written in Java, so you will need to have Java installed to run it.</p>

<p>To get Growl notifications, you will need to install either <a href="http://growl.info/">Growl for OSX</a> or <a href="http://www.growlforwindows.com/">Growl for Windows</a>. Growl for Windows requires the <a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=0856EACB-4362-4B0D-8EDD-AAB15C5E04F5&amp;displaylang=en">.NET Framework 2.0+</a>.</p>

<h3>Caveat</h3>

<p>Loris is pretty limited at the moment, I just wired up the basics to get it running for a work project.</p>

<p>It doesn&#8217;t have any configuration options at the moment, so you have to follow it&#8217;s assumptions for now. I&#8217;m happy to add configuration options for any element as required.</p>

<p>Loris only comes with a few tasks (Javascript Lint, JS Test Driver, JSpec, and RSpec), but I hope to allow it have new tasks added via new gems (kind of similar to Autotest).</p>

<p>It comes packaged with a version of Javascript Lint, and JS Test Driver, and will use it&#8217;s own versions. It only includes the OSX and Windows versions of Javascript Lint.</p>

<p>If you want to modify the code, just fork the <a href="http://github.com/karl/loris">Loris github project</a></p>
]]></content:encoded>
			<wfw:commentRss>http://monket.net/blog/2009/11/loris-autotest-for-javascript/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>QUnit to JSpec Adapter</title>
		<link>http://monket.net/blog/2009/09/qunit-to-jspec-adapter/</link>
		<comments>http://monket.net/blog/2009/09/qunit-to-jspec-adapter/#comments</comments>
		<pubDate>Thu, 03 Sep 2009 08:07:16 +0000</pubDate>
		<dc:creator>Karl O&#39;Keeffe</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jspec]]></category>
		<category><![CDATA[qunit]]></category>

		<guid isPermaLink="false">http://monket.net/blog/?p=207</guid>
		<description><![CDATA[JSpec is a Javascript BDD framework with a lot of great things going for it: It can run without a browser (great for continuous integration servers), it has a Ruby style custom syntax which makes tests easier to write and read, and it uses a BDD style describe/should syntax. It’s a very tempting framework to [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://monket.net/blog/2009/06/new-qunit-to-js-test-driver-adapter/">JSpec</a> is a Javascript BDD framework with a lot of great things going for it: It can run without a browser (great for continuous integration servers), it 
has a Ruby style custom syntax which makes tests easier to write and read, and 
it uses a BDD style describe/should syntax.</p>

<p>It’s a very tempting framework to use, but I already have a large collection
of tests using qunit. I don’t want to use two frameworks for one project, and I 
don’t want to rewrite 300+ tests, so what to do?</p>

<p>How about a QUnit to JSpec Adapter, in the vein of my 
<a href="http://github.com/visionmedia/js-mock-timers/tree/master">QUnit to JS Test Driver Adapter</a>. Just load the adapter into JSpec as a
normal javascript file, and you can now<code>exec()</code> qunit test files in JSpec.</p>

<h2>Downloading the QUnit to JSpec Adapter</h2>

<p>First up <a href="http://monket.net/blog/wp-content/uploads/2009/09/QUnitToJSpecAdapter.js">download the QUnit to JSpec Adapter</a>, or copy the code below, and
save it somewhere in your project (e.g. a <code>lib</code> folder).</p>

<h4><a href="http://monket.net/blog/wp-content/uploads/2009/09/QUnitToJSpecAdapter.js">QUnitToJSpecAdapter.js</a></h4>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*
QUnitToJSpecAdapter
Version: 1.0.0
&nbsp;
Run qunit tests using JSspec
&nbsp;
This provides almost the same api as qunit.
&nbsp;
Tests must run sychronously, which means no use of stop and start methods.
You can use the JSpec mock timers to deal with timeouts, intervals, etc
&nbsp;
The qunit #main DOM element is not included. If you need to do any DOM manipulation
you need to set it up and tear it down in each test.
&nbsp;
*/</span>
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
    JSpec.<span style="color: #660066;">addMatchers</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        be_ok <span style="color: #339933;">:</span> <span style="color: #3366CC;">'!!actual'</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
    JSpec.<span style="color: #660066;">context</span> <span style="color: #339933;">=</span> JSpec.<span style="color: #660066;">defaultContext</span><span style="color: #339933;">;</span>
    JSpec.<span style="color: #660066;">context</span>.<span style="color: #660066;">QUnitAdapter</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
        modules<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
    module <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span> lifecycle<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
        JSpec.<span style="color: #660066;">context</span>.<span style="color: #660066;">QUnitAdapter</span>.<span style="color: #660066;">modules</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
            <span style="color: #000066;">name</span><span style="color: #339933;">:</span> <span style="color: #000066;">name</span><span style="color: #339933;">,</span>
            tests<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
            setup<span style="color: #339933;">:</span>    <span style="color: #009900;">&#40;</span>lifecycle <span style="color: #339933;">&amp;&amp;</span> lifecycle.<span style="color: #660066;">setup</span><span style="color: #009900;">&#41;</span>    <span style="color: #339933;">?</span> lifecycle.<span style="color: #660066;">setup</span>    <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> 
            teardown<span style="color: #339933;">:</span> <span style="color: #009900;">&#40;</span>lifecycle <span style="color: #339933;">&amp;&amp;</span> lifecycle.<span style="color: #660066;">teardown</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> lifecycle.<span style="color: #660066;">teardown</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        JSpec.<span style="color: #660066;">describe</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
            <span style="color: #003366; font-weight: bold;">var</span> length <span style="color: #339933;">=</span> QUnitAdapter.<span style="color: #660066;">modules</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tests</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> length<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                it<span style="color: #009900;">&#40;</span>QUnitAdapter.<span style="color: #660066;">modules</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tests</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #000066;">name</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #003366; font-weight: bold;">var</span> adapter <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
                        expectedAsserts<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
                        calledAsserts<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
&nbsp;
                        expect<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>count<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            adapter.<span style="color: #660066;">expectedAsserts</span> <span style="color: #339933;">=</span> count<span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
                        ok<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>actual<span style="color: #339933;">,</span> msg<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            adapter.<span style="color: #660066;">calledAsserts</span><span style="color: #339933;">++;</span>
                            JSpec.<span style="color: #660066;">expect</span><span style="color: #009900;">&#40;</span>actual<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">to</span><span style="color: #009900;">&#40;</span>JSpec.<span style="color: #660066;">matchers</span>.<span style="color: #660066;">be_ok</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
                        equals<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span> b<span style="color: #339933;">,</span> msg<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            adapter.<span style="color: #660066;">calledAsserts</span><span style="color: #339933;">++;</span>
                            JSpec.<span style="color: #660066;">expect</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">to</span><span style="color: #009900;">&#40;</span>JSpec.<span style="color: #660066;">matchers</span>.<span style="color: #660066;">be</span><span style="color: #339933;">,</span> b<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
                        start<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            <span style="color: #000066; font-weight: bold;">throw</span> <span style="color: #3366CC;">'start and stop methods are not available when using JSpec.<span style="color: #000099; font-weight: bold;">\n</span>'</span> <span style="color: #339933;">+</span>
                                <span style="color: #3366CC;">'Use the JSpec timer to deal with timeouts and intervals:<span style="color: #000099; font-weight: bold;">\n</span>'</span> <span style="color: #339933;">+</span> 
                                <span style="color: #3366CC;">'http://github.com/visionmedia/jspec/tree/master'</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
                        <span style="color: #000066;">stop</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            <span style="color: #000066; font-weight: bold;">throw</span> <span style="color: #3366CC;">'start and stop methods are not available when using JSpec.<span style="color: #000099; font-weight: bold;">\n</span>'</span> <span style="color: #339933;">+</span>
                                <span style="color: #3366CC;">'Use the JSpec timer to deal with timeouts and intervals:<span style="color: #000099; font-weight: bold;">\n</span>'</span> <span style="color: #339933;">+</span> 
                                <span style="color: #3366CC;">'http://github.com/visionmedia/jspec/tree/master'</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
                        same<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span> b<span style="color: #339933;">,</span> msg<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            adapter.<span style="color: #660066;">calledAsserts</span><span style="color: #339933;">++;</span>
                            JSpec.<span style="color: #660066;">expect</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">to</span><span style="color: #009900;">&#40;</span>JSpec.<span style="color: #660066;">matchers</span>.<span style="color: #660066;">eql</span><span style="color: #339933;">,</span> b<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
                        reset<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            <span style="color: #000066; font-weight: bold;">throw</span> <span style="color: #3366CC;">'reset method is not available when using JSpec'</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
                        isLocal<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span>
                    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
                    <span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'with(adapter) {'</span> <span style="color: #339933;">+</span>
                        JSpec.<span style="color: #660066;">contentsOf</span><span style="color: #009900;">&#40;</span>QUnitAdapter.<span style="color: #660066;">modules</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">setup</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span>
                        <span style="color: #3366CC;">'try {'</span> <span style="color: #339933;">+</span>
                        JSpec.<span style="color: #660066;">contentsOf</span><span style="color: #009900;">&#40;</span>QUnitAdapter.<span style="color: #660066;">modules</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tests</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">testCallback</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span>
                        <span style="color: #3366CC;">'} catch(ex) { throw(ex); } finally {'</span> <span style="color: #339933;">+</span>
                        JSpec.<span style="color: #660066;">contentsOf</span><span style="color: #009900;">&#40;</span>QUnitAdapter.<span style="color: #660066;">modules</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">teardown</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span>
                        <span style="color: #3366CC;">'} }'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>adapter.<span style="color: #660066;">expectedAsserts</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        JSpec.<span style="color: #660066;">expect</span><span style="color: #009900;">&#40;</span>adapter.<span style="color: #660066;">calledAsserts</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">to</span><span style="color: #009900;">&#40;</span>JSpec.<span style="color: #660066;">matchers</span>.<span style="color: #660066;">equal</span><span style="color: #339933;">,</span> adapter.<span style="color: #660066;">expectedAsserts</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
&nbsp;
            after_each<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                QUnitAdapter.<span style="color: #660066;">modules</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tests</span>.<span style="color: #660066;">shift</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            after<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                QUnitAdapter.<span style="color: #660066;">modules</span>.<span style="color: #660066;">shift</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
    test <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span> testCallback<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        JSpec.<span style="color: #660066;">context</span>.<span style="color: #660066;">QUnitAdapter</span>.<span style="color: #660066;">modules</span><span style="color: #009900;">&#91;</span>JSpec.<span style="color: #660066;">context</span>.<span style="color: #660066;">QUnitAdapter</span>.<span style="color: #660066;">modules</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">tests</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
            <span style="color: #000066;">name</span><span style="color: #339933;">:</span> <span style="color: #000066;">name</span><span style="color: #339933;">,</span>
            testCallback<span style="color: #339933;">:</span> testCallback
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<h2>Having some QUnit tests</h2>

<p>First up you need some qunit tests. Having the qunit test files in the <code>spec</code>
directory helps simplify loading them.</p>

<p>As an example you can use the following:</p>

<h4>qunit-tests.js</h4>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">module<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Examples'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
test<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'True is ok'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  expect<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  ok<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
module<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Examples with lifecycle'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
  setup<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    started <span style="color: #339933;">=</span> <span style="color: #3366CC;">'yes'</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  teardown<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    ok<span style="color: #009900;">&#40;</span>started<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    started <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
test<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Test has started'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  expect<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  equals<span style="color: #009900;">&#40;</span>started<span style="color: #339933;">,</span> <span style="color: #3366CC;">'yes'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<h2>Configuring QUnit Support</h2>

<p>Then to enable QUnit tests to be run in JSpec, you must have JSpec load the
adapater as a normal javascript file, and<code>exec()</code> the QUnit test file as you
would a JSpec spec file.</p>

<p>For JSpec rhino support your <code>spec.rhino.js</code> file would look like:</p>

<h4>spec.rhino.js</h4>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">load<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/Library/Ruby/Gems/1.8/gems/visionmedia-jspec-2.10.0/lib/jspec.js'</span><span style="color: #009900;">&#41;</span>
load<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'lib/QUnitAdapter.js'</span><span style="color: #009900;">&#41;</span>
&nbsp;
JSpec
.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'spec/qunit-tests.js'</span><span style="color: #009900;">&#41;</span>
.<span style="color: #660066;">run</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span> formatter <span style="color: #339933;">:</span> JSpec.<span style="color: #660066;">formatters</span>.<span style="color: #660066;">Terminal</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
.<span style="color: #660066;">report</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></pre></div></div>


<p>Notice how the QUnit test file is exec’d exactly as you would a normal spec
file. You can run specs and Qunit tests along side each other without any 
interference.</p>

<p>And for running the tests within a browser your <code>spec.dom.html</code> file would look
like:</p>

<h4>spec.dom.html</h4>


<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;html&gt;
    &lt;head&gt;
        &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;/Library/Ruby/Gems/1.8/gems/visionmedia-jspec-2.2.1/lib/jspec.css&quot; /&gt;
        &lt;script src=&quot;/Library/Ruby/Gems/1.8/gems/visionmedia-jspec-2.2.1/lib/jspec.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;../lib/QUnitAdapter.js&quot;&gt;&lt;/script&gt;
        &lt;script&gt;
            function runSuites() {
                JSpec
                .exec('qunit-tests.js')
                .run()
                .report()
            }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body class=&quot;jspec&quot; onLoad=&quot;runSuites();&quot;&gt;
        &lt;div id=&quot;jspec-top&quot;&gt;&lt;h2 id=&quot;jspec-title&quot;&gt;JSpec &lt;em&gt;&lt;script&gt;document.write(JSpec.version)&lt;/script&gt;&lt;/em&gt;&lt;/h2&gt;&lt;/div&gt;
        &lt;div id=&quot;jspec&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;jspec-bottom&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre></div></div>


<h2>Running the tests</h2>

<p>To run the tests just launch JSpec as normal. My prefered method is to run the
tests using rhino, to do this navigate to your project root directory in a 
terminal window and run:</p>


<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">jspec run <span style="color: #660033;">--rhino</span></pre></div></div>


<p>And you should now see your QUnit tests running in JSpec:</p>


<div class="wp_syntax"><div class="code"><pre class="plain" style="font-family:monospace;"> Passes: 5 Failures: 0
&nbsp;
 Examples
  True is ok..
&nbsp;
 Examples with lifecycle
  Test has started...</pre></div></div>


<h2>Limitations</h2>

<p>This adapter has many of the same limitations and my 
<a href="http://monket.net/blog/2009/06/new-qunit-to-js-test-driver-adapter/">QUnit to JS Test Driver adapter</a>.</p>

<p>The tests must run synchronously (which means no use of the qunit <code>stop</code> and 
<code>start</code> methods).</p>

<p>If you need to test timeouts, intervals, or other asynchronous sections of code
, you can use the<a href="http://github.com/visionmedia/js-mock-timers/tree/master">mock timers that come with JSpec</a>.</p>

<p>QUnit DOM support is not included. Consider avoiding interacting directly with
the browser within your unit tests. But if you do need to, you’ll need to create
and remove the DOM objects yourself with each test, or the setup and teardown 
methods.</p>

<p>And lastly, tests are broken out of any closures before they run. This means
they lose access to any closure variables. For example, the follow test would 
work in QUnit, but not in JSpec. When running in JSpec access to the<code>setup</code>
variable is lost.</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> setup <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// do setup...</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
  test<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'name'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    setup<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://monket.net/blog/2009/09/qunit-to-jspec-adapter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

