<?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>the tar pit &#187; jsspec</title>
	<atom:link href="http://blog.goneopen.com/tag/jsspec/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.goneopen.com</link>
	<description>Thrashing around in the stickiness of software</description>
	<lastBuildDate>Mon, 09 Jan 2012 23:35:25 +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>Sharepoint &amp; TDD: Getting started advice</title>
		<link>http://blog.goneopen.com/2011/07/sharepoint-tdd-getting-started/</link>
		<comments>http://blog.goneopen.com/2011/07/sharepoint-tdd-getting-started/#comments</comments>
		<pubDate>Thu, 30 Jun 2011 23:19:44 +0000</pubDate>
		<dc:creator>todd</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[CI]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jsspec]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[TDD]]></category>
		<category><![CDATA[test automation pyramid]]></category>

		<guid isPermaLink="false">http://blog.goneopen.com/2011/07/sharepoint-tdd-getting-started/</guid>
		<description><![CDATA[I have a couple of people asking lately about starting on SharePoint. They&#8217;ve asked about how to move forward with unit and integration testing and stability. No one wants to go down the mocking route (typemock, pex and moles) and quite rightly. So here&#8217;s my road map: The foundations: Hello World scripted and deployable without [...]]]></description>
			<content:encoded><![CDATA[<p>I have a couple of people asking lately about starting on SharePoint. They&#8217;ve asked about how to move forward with unit and integration testing and stability. No one wants to go down the mocking route (<code>typemock</code>, <code>pex and moles</code>) and quite rightly. So here&#8217;s my road map:</p>

<h2>The foundations: Hello World scripted and deployable without the <span class="caps">GUI</span></h2>


<ol>
<li>Get a Hello World SharePoint &#8220;app&#8221; &#8211; something that is packageable and deployable as a <code>WSP</code></li>
<li>Restructure the folders of the code away from the Microsoft project structure so that the root folder has <code>src/</code>, <code>tools/</code>, <code>lib/</code> and <code>scripts/</code> folders. All source and tests are in <code>src/</code> folder. This lays the foundation for a layered code base. The layout looks like this <a href="https://github.com/toddb/msbuild-deployment-sample">sample application</a></li>
<li>Make the compilation, packaging, installation (and configuration) all scripted. Learn to use <code>psake</code> for your build scripts and <code>powershell</code> more generally (particularly against the SharePoint 2010 <span class="caps">API</span>). The goal here is that devs can build and deploy through the command line. As such, so too can the build server. I have a suggestion <a href="http://blog.goneopen.com/2010/11/sharepoint-deployment-scripting-with-powershell/">here</a> that still stands but I need to blog on improvements. Most notably, not splitting out tasks but rather keeping them in the same <code>default.ps</code> (because <code>-docs</code> works best). Rather than get reuse at the <code>task</code> level do it as functions (or cmdlets). Also, I am now moving away from the mix with <code>msbuild</code> that I blogged <a href="http://blog.goneopen.com/2010/11/sharepoint-deployment-packaging/">here</a> and am moving them into powershell. There is no real advantage other than less files and reduced mix of techniques (and lib inclusions).</li>
<li>Create a build server and link this build and deployment to it. I have been using <span class="caps">TFS </span>and TeamCity. I recommend TeamCity but <span class="caps">TFS </span>will suffice. If you haven&#8217;t created Build Definitions in <span class="caps">TFS</span> Workflow allow days-to-weeks to learn it. In the end, but only in the end, it is simple. Becareful with <span class="caps">TFS, </span>the paradigm here is that build server does tasks that devs don&#8217;t. It looks a nice approach. I don&#8217;t recommend it and there is nothing here by design that makes this inevitable. In <span class="caps">TFS, </span>you are going to need to build two build definitions: <code>SharePointBuild.xaml</code> and <code>SharePointDeploy.xaml</code>. The build is a compile, package and test. The deploy simply deploys to an environment &#8211; Dev, Test, Pre-prod and Prod. The challenge here is to work out a method for deploying into environments. In the end, I wrote a simple self-host windows workflow (<code>xamlx</code>) that did the deploying. Again, I haven&#8217;t had time to blog the sample. Alternatively, you can use <code>psexec</code>. The key is that for a SharePoint deployment you must be running on the local box and the most configurations have a specific service account for perms. So I run a service for deployment that runs under that service account. </li>
</ol>



<p>Now that you can reliably and repeatably test and deploy, you are ready to write code!</p>

<h2>Walking Skeleton</h2>

<p>Next is to start writing code based on a <a href="http://blog.goneopen.com/2010/11/sharepoint-tdd-part-2-good-layering/">layered strategy</a>. What we have found is that we need to do two important things: (1) always keep our tests running on the build server and (2) attend to keeping the tests running quickly. This is difficult in SharePoint because a lot of code relates to integration and system tests (as defined by <a href="http://blog.goneopen.com/2010/08/test-automation-pyramid-review/">test automation pyramid</a>). We find that integration tests that require setup/teardown of a site/features get brittle and slow very quickly. In this case, reduce setup and teardown in the the system tests. However, I am also had a case where the integration test showed that a redesigned object (that facaded SharePoint) would give better testability for little extra work.</p>


<ol>
<li>Create 6 more projects based on a <span class="caps">DDD </span>structure (Domain, Infrastructure, Application, Tests.Unit, Tests.Integration &amp; Tests.System). Also rename your SharePoint project to <code>UI-[Your App]</code>, this avoids naming conflicts on a SharePoint installation. We want to create a <a href="http://alistair.cockburn.us/crystal/articles/hpaaa/hexagonalportsandadaptersarchitecture.htm">port-and-adapters</a> application around SharePoint. For example, we can wrap <a href="http://blog.goneopen.com/2011/05/sharepoint-tdd-part-7-repository-pattern-for-propertybag/">property bags</a> with repository pattern. This means that we create domain models (in Domain) and return them with repositories (in Infrastructure) and can test with integration tests.</li>
<li><strong>System tests:</strong> I have used <a href="http://storyq.codeplex.com/">StoryQ</a> with the team to write tests because it allows for a setup/teardown and then multiple test scenario. I could use <a href="http://www.specflow.org/">SpecFlow</a> or nBehave just as easily. </li>
<li><strong>Integration tests:</strong> these are written classical <span class="caps">TDD </span>style.</li>
<li><strong>Unit tests:</strong> these are written also classical <span class="caps">TDD</span>/BDD style</li>
<li><strong>Javascript tests</strong>: we write all javascript code using a jQuery plugin style (aka <a href="http://blog.rebeccamurphey.com/2009/10/15/using-objects-to-organize-your-code/">Object Literal</a>) &#8211; in this case, we use <a href="http://jania.pe.kr/aw/moin.cgi/JSSpec"><span class="caps">JSS</span>pec</a> (but I would now use <a href="http://pivotal.github.com/jasmine/">Jasmine</a>) &#8211; we put all tests in <code>Tests.Unit</code> but the actual javascript is still in the <code>UI-SharePoint</code> project. You will need two sorts of tests: <code>Example</code> for exploratory testing and <code>Specs</code> for the jasmine specs. I haven&#8217;t blogged about this and need to but is based on my work for writing <a href="http://plugins.jquery.com/project/jqueryplugingen">jQuery plugins with tests</a>.</li>
<li><strong>Deployment tests</strong>: these are tests that run once that application is deployed. You can go to an <span class="caps">ATOM </span>feed which returns the results of a series of tests that run against the current system. For example, we have the standard set with tells us the binary versions and which migrations (see below) have been applied. Others check whether a certain <code>wsp</code> has been deployed, different endpoints are listening, etc. I haven&#8217;t blogged this code and mean to &#8211; this has been great for testers to see if the current system is running as expected. We also get the build server to pass/fail a build based on these results.</li>
</ol>



<p>We don&#8217;t use <code>Pex and Moles</code>. We use exploratory testings to ensure that something actually works on the page</p>

<h2>Other bits you&#8217;ll need to sort out</h2>


<ul>
<li><strong>Migrations:</strong> if you have manual configurations for each environment then you&#8217;ll want to script/automate this. Otherwise, you aren&#8217;t going to be one-click deployments. Furthermore, you&#8217;ll need to assume that each environment is in a different state/version. We use <code>migratordotnet</code> with a SharePoint adapter that I wrote &#8211; it is <a href="https://github.com/toddb/migratordotnet">here for SharePoint 2010</a> &#8211; there is also a powershell runner in the source to adapt &#8211; you&#8217;ll need to download the source and compile. Migrations as an approach works extremely well for feature activation and publishing.</li>
<li><strong>Application Configuration:</strong> we use domain models for configuration and then instantiate via an infrastructure factory &#8211; certain configs require SharePoint knowledge</li>
<li><strong>Logging:</strong> you&#8217;ll need to sort of that Service Locator because in tests you&#8217;ll swap it out for Console.Logger</li>
<li><strong>WebParts:</strong> can&#8217;t be in a strongly typed binary (we found we needed another project!)</li>
<li><strong>Extension Methods to Wrap SharePoint <span class="caps">API</span></strong>: we also found that we wrapped a lot of SharePoint material with extension methods </li>
</ul>



<h2>Other advice: stay simple</h2>

<p>For SharePoint developers not used to object oriented programming, I would stay simple. In this case, I wouldn&#8217;t create code with abstractions that allowed you to unit test like <a href="http://blog.goneopen.com/2010/12/sharepoint-tdd-part-3-procedural-untestable-code/">this</a>. I found in the end the complexity and testability outweighed the simplicity and maintainability.</p>

<p>Microsoft itself has recommended the Repository Pattern to facade the SharePoint <span class="caps">API </span>(sorry I can&#8217;t for the life of me find the link). This has been effective. It is so effective we have found that we can facade most SharePoint calls in two ways:  a repository that returns/works with a domain concept or a <code>Configurator</code> (which has the single public method <code>Process()</code>).Anymore than that it was really working against the grain. All cool, very possible but not very desirable for a team which rotates people.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.goneopen.com/2011/07/sharepoint-tdd-getting-started/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>jQuery and testing &#8212; JSUnit, QUnit, JsSpec [Part 2]</title>
		<link>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-2/</link>
		<comments>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-2/#comments</comments>
		<pubDate>Sat, 15 Nov 2008 10:34:14 +0000</pubDate>
		<dc:creator>todd</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[BDD]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jsspec]]></category>
		<category><![CDATA[jsunit]]></category>
		<category><![CDATA[qunit]]></category>
		<category><![CDATA[TDD]]></category>
		<category><![CDATA[UnitTesting]]></category>

		<guid isPermaLink="false">http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-2/</guid>
		<description><![CDATA[Trying QUnit with jQuery In the JSUnit entry, one of the main problems was with the sequencing of calls. Let&#8217;s see how QUnit handles this. QUnit has a simple implementation to this problem: stop() and start() commands to synchronise sequences. The basic approach is that it calls a test function. With the stop() command, it [...]]]></description>
			<content:encoded><![CDATA[<h1>Trying QUnit with jQuery</h1>

<p>In the <a href="../jquery-and-testing-jsunit-qunit-jsspec-part-1/"><span class="caps">JSU</span>nit entry</a>, one of the main problems was with the sequencing of calls. Let&#8217;s see how QUnit handles this. QUnit has a simple implementation to this problem: <code>stop()</code> and <code>start()</code> commands to synchronise sequences. The basic approach is that it calls a test function. With the <code>stop()</code> command, it will not call the next test until you say <code>start()</code>. But it does complete the rest of the current test. </p>

<p>The code that I ended up with was just what I wanted compared to JsUnit. Previously, I had said that basically I wanted to call my function and then process the result that it was in fact what I wanted. Here is the main javascript code (it&#8217;s nice and concise).</p>

<p>One point about the code at this stage. The tests had to be inside the <code>success</code> function to be run. I wonder if this is going to create a code smell in the long run. Plus there is no setup/teardown cycles, again I wonder what that will mean in the long run. Perhaps not?</p>



<pre>module(&quot;XML to object&quot;);

test(&quot;Check the xml to object conversion without showing the tree&quot;, function() {
  
  expect( 5 )
  stop();
  
   $().storyq({
        url: 'data/results-01.xml', 
        load: '',
        success: function(feed) {
          ok( feed, &quot;is an object&quot; )
          ok( !$.isFunction(feed), &quot;is not a function&quot; )
          ok( feed.version, &quot;has a version: &quot; + feed.version )
          ok( feed.items, &quot;has items&quot;)
          same( feed, reference, &quot;is the same as the reference object in data/results-01.js&quot;)
          start();
        }
    });

});
</pre>



<p>Honestly, it is that easy. </p>

<p>Here&#8217;s a couple of features that took me half an hour to work out restated from above. (1) <code>stop()</code> and <code>start()</code> almost work as you expect &#8211; but I had to put some alerts in to check the order of execution. Basically, <strong>a <code>stop()</code> halts any new tests from executing but it keeps the current test executing</strong>. The effect of this is that the asynchronise call can be completed. <code>start()</code> then tells the tests to start running again. If you don&#8217;t have a <code>start()</code> then you will find that your test runner halts altogether. There is another option and that is to put a timer on the stop and then you don&#8217;t need a start. I prefer to keep the tests running as quickly as possible.</p>

<p>Just another note. I decided to do a <code>same()</code> comparison. I have saved and preloaded an object from a file for ease. This kept the test easy to read &#8211; my reference object here is quite long. You can see the insertion of this file in the entire code below <code>&lt;script type=&quot;text/javascript&quot; src=&quot;data/results-01.js&quot;/&gt;</code></p>



<pre>
&amp;lt;html&gt;
&amp;lt;head&gt;
  &amp;lt;title&gt;Unit tests for StoryQ Results viewer&amp;lt;/title&gt;
  &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;../../lib/qunit/testsuite.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;

  &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;../../lib/treeview/jquery.treeview.css&quot; /&gt;
  &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;../../src/css/storyq.treeview.css&quot; /&gt;
  &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;../../src/css/storyq.screen.css&quot; /&gt;

  &amp;lt;script src=&quot;../../lib/jquery/jquery.js&quot;&gt;&amp;lt;/script&gt;
  &amp;lt;script src=&quot;../../lib/jquery/jquery.cookie.js&quot; type=&quot;text/javascript&quot;&gt;&amp;lt;/script&gt;
  &amp;lt;script src=&quot;../../lib/treeview/jquery.treeview.js&quot; type=&quot;text/javascript&quot;&gt;&amp;lt;/script&gt;
  &amp;lt;script src=&quot;../../src/storyq.js&quot; type=&quot;text/javascript&quot;&gt;&amp;lt;/script&gt;
  &amp;lt;script src=&quot;../../src/storyq.treeview.js&quot; type=&quot;text/javascript&quot;&gt;&amp;lt;/script&gt;
  &amp;lt;script src=&quot;../../src/storyq.xml.js&quot; type=&quot;text/javascript&quot;&gt;&amp;lt;/script&gt;
  &amp;lt;script src=&quot;../../src/storyqitem.js&quot; type=&quot;text/javascript&quot;&gt;&amp;lt;/script&gt;
  &amp;lt;script src=&quot;../../src/storyqresults.js&quot; type=&quot;text/javascript&quot;&gt;&amp;lt;/script&gt; 

  &amp;lt;script type=&quot;text/javascript&quot; src=&quot;../../lib/qunit/testrunner.js&quot;&gt;&amp;lt;/script&gt; 
  &amp;lt;script type=&quot;text/javascript&quot; src=&quot;data/results-01.js&quot;&gt;&amp;lt;/script&gt;  
  
  &amp;lt;script type=&quot;text/javascript&quot;&gt;
    module(&quot;XML&quot;);

    test(&quot;Check the xml to object conversion without showing the tree&quot;, function() {

      expect( 5 )
      stop();

       $().storyq({
            url: 'data/results-01.xml', 
            load: '',
            success: function(feed) {
              ok( feed, &quot;is an object&quot; )
              ok( !$.isFunction(feed), &quot;is not a function&quot; )
              ok( feed.version, &quot;has a version: &quot; + feed.version )
              ok( feed.items, &quot;has items&quot;)
              same( feed, reference, &quot;is the same as the refefence object in data/results-01.js&quot;)
              start();
            }
        });

    });
  &amp;lt;/script&gt;
  
&amp;lt;/head&gt;
&amp;lt;body&gt;
  
 &amp;lt;h1&gt;QUnit tests&amp;lt;/h1&gt;
 &amp;lt;h2 id=&quot;banner&quot;&gt;&amp;lt;/h2&gt;
 &amp;lt;h2 id=&quot;userAgent&quot;&gt;&amp;lt;/h2&gt;
 &amp;lt;ol id=&quot;tests&quot;&gt;&amp;lt;/ol&gt;

 &amp;lt;div id=&quot;main&quot;&gt;&amp;lt;/div&gt;

&amp;lt;/div&gt;
&amp;lt;/div&gt;

&amp;lt;/body&gt;
&amp;lt;/html&gt;

</pre>



<p>The output results from QUnit are nice to look at and easy to read. I didn&#8217;t have a couple of errors that weren&#8217;t the easiest to debug given the output. Partly though because I was new to it, I was taking too big a step at times!</p>

<p>I&#8217;m happy with QUnit &#8211; and there are plenty of examples in the JQuery test suite. I can see that I would do <span class="caps">TDD </span>with this.</p>

<p>Being a <span class="caps">BDD </span>type of guy, I&#8217;m now off to see what <a href="../jquery-and-testing-jsunit-qunit-jsspec-part-3/" title="Part III">JsSpec</a> has to offer.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery and testing &#8211; JSUnit, QUnit, JsSpec [Part 1]</title>
		<link>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-1/</link>
		<comments>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-1/#comments</comments>
		<pubDate>Fri, 14 Nov 2008 17:32:11 +0000</pubDate>
		<dc:creator>todd</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[BDD]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jsspec]]></category>
		<category><![CDATA[jsunit]]></category>
		<category><![CDATA[qunit]]></category>
		<category><![CDATA[TDD]]></category>
		<category><![CDATA[test automation pyramid]]></category>
		<category><![CDATA[UnitTesting]]></category>

		<guid isPermaLink="false">http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-1/</guid>
		<description><![CDATA[Trying JsUnit with JQuery I have started first with JSUnit because it is tried and true (and to tell the truth I thought it would be fine and didn&#8217;t bother with a quick search for alternatives). For the impatient, I won&#8217;t be going with JSUnit and here are some reasons: the problem is that the [...]]]></description>
			<content:encoded><![CDATA[<h1>Trying JsUnit with JQuery</h1>

<p>I have started first with <span class="caps">JSU</span>nit because it is tried and true (and to tell the truth I thought it would be fine and didn&#8217;t bother with a quick search for alternatives).</p>

<p>For the impatient, I won&#8217;t be going with <span class="caps">JSU</span>nit and here are some reasons:</p>


<ul>
<li>the problem is that the integration of a setup (ie onload &#8211; pausing) to load the data doesn&#8217;t integrate well with jQuery. <span class="caps">JSU</span>nit has its own setup and document loader but I am still wondering how to do this transparently (ie I didn&#8217;t actually get the test to work &#8211; I wasn&#8217;t exhaustive but then again I don&#8217;t think that I should have needed to be to get this test going)</li>
<li>Firefox 3.0 on mac doesn&#8217;t integrate well (ie it doesn&#8217;t work), but safari does! Unfortunately, I am a little bound to firebug for development. </li>
<li><span class="caps">JSU</span>nit doesn&#8217;t report tests well either</li>
</ul>



<p>I went and had a look at how <span class="caps">JSU</span>nit does it. (Remember that this framework has been around a lot longer than jQuery.) Here is the extract from the code/test samples. The basic setup is to hook into an existing <code>testManager</code> that existing within a frame and then get the data from there. Furthermore, you need to manage your own flag that the process has been complete. <span class="caps">JSU</span>nit then looks through all functions that start with <code>test</code> in this case <code>testDocumentGetElementsByTagName</code> checks expected data. Here I assume that the tests are run in a particular frame (<code>buffer()</code>) that <code>testManager</code> gives us access to.</p>



<pre>var uri = 'tests/data/data.html';

function setUpPage() {
    setUpPageStatus = 'running';
    top.testManager.documentLoader.callback = setUpPageComplete;
    top.testManager.documentLoader.load(uri);
}

function setUpPageComplete() {
    if (setUpPageStatus == 'running')
        setUpPageStatus = 'complete';
}

function testDocumentGetElementsByTagName() {
    assertEquals(setUpPageStatus, 'complete');
    var buffer = top.testManager.documentLoader.buffer();
    var elms = buffer.document.getElementsByTagName('P');
    assert('getElementsByTagName(&quot;P&quot;) returned is null', elms != null);
    assert('getElementsByTagName(&quot;P&quot;) is empty', elms.length &gt; 0);
}</pre>



<p>Below is the rewritten code to exercise my code. Here&#8217;s a couple of the features:</p>


<ul>
<li>for setup, pass in the correct xml file via <code>uri</code> variable (obviously)</li>
<li>to test, I have written a test <code>testXML2Object</code>. <br />
 <br />
p. There is one major design problem with the code itself that didn&#8217;t allow me to use my own data loader. You will see the line <code>var feed = new StoryQResults(buffer);</code>. Where did that come from? It is nothing close to the code I said that I wanted to exercise. It is infact from <strong>within</strong> the code I want to exercise. The major issue I found here is that to load and test data I had to use the <code>testManager</code> rather than use my own  <code>().storyq()</code> call. </li>
</ul>



<p>The other problem was it wouldn&#8217;t return the result that I wanted either. I was expecting my <code>feed</code> variable to be an object of the results. Instead I was getting a reference to function <code>StoryQResults</code> &#8211; given now that it wasn&#8217;t running in Firefox and I didn&#8217;t have Firebug life was getting a little hard.<br />
 </p>


<pre>var uri = '../../xml/results-01.xml';

function setUpPage() {
    setUpPageStatus = 'running';
    top.testManager.documentLoader.callback = setUpPageComplete;
    top.testManager.documentLoader.load(uri);
}

function setUpPageComplete() {
    if (setUpPageStatus == 'running')
        setUpPageStatus = 'complete';
}

function testXML2Object() {
    assertEquals(setUpPageStatus, 'complete');
    var buffer = top.testManager.documentLoader.buffer();
    
    var feed = new StoryQResults(buffer);               

    assertEquals(feed.version, '0.1')
    assertEquals(&quot;Number of stories&quot;, $(feed).size(), 1)
    $.each(feed, function(){
      alert(this)               
    })

}</pre>



<p>Even though I know that I getting a <code>function</code> returned instead of an <code>object</code> I am still going to see if I can invoke my own loading function within <span class="caps">JSU</span>nit. Here&#8217;s what the code would look like below. I wouldn&#8217;t recommend running it &#8211; just take a look at it. The code to me is a mixtures of styles that start to bloat the code. On the one hand, <span class="caps">JSU</span>nit has this setup phase with explicit flags and no anonymous functions. On the other hand, because I am using JQuery conventions, I encapsulate alot of that logic. For example, <code>jQuery(function(){})</code> waits for the page to be loaded before executing <code>(&quot;#tree&quot;).story()</code>, Then I have the callback function inline. It looks good from the outside, but it doesn&#8217;t work. </p>

<p>The order of calls is: <code>loading</code>, <code>in test</code> and then <code>loaded</code>. Indicating that my <code>JQuery</code> function runs after the test has been run. The order should have been <code>loading</code>, <code>loaded</code> and then <code>in test</code>. In this sense, while <code>setUpPage</code> runs within its own setup/test/teardown cycle. But my JQuery call isn&#8217;t linked into this. JQuery waits is waiting on a document flag rather than a custom flag (within <code>testManager</code>). At this point, I do not wish to dig into these libraries to work them out to get it to all play nicely. It wasn&#8217;t designed to work this way. Let&#8217;s find one that was.</p>



<pre>var data = '';

function setUpPage() {
    setUpPageStatus = 'running';
    alert('loading')
    jQuery(function() {
      $(&quot;#tree&quot;).storyq({
          url: '../../xml/results-01.xml', 
          success: null, 
          load: function(feed) {
            data = feed;
            alert('loaded')
            setUpPageComplete()
            }
          });
    });
}

function setUpPageComplete() {
    if (setUpPageStatus == 'running')
        setUpPageStatus = 'complete';
}

function testXML2Object() {
    alert('in test')
    assertEquals(setUpPageStatus, 'complete');

    assertEquals(data.version, '0.1')
    assertEquals(&quot;Number of stories&quot;, $(feed).size(), 1)
}
</pre>



<p>I&#8217;m invoking the two-feet principle: I&#8217;m moving onto the next framework (after a quick search): <a href="../jquery-and-testing-jsunit-qunit-jsspec-part-2/">QUnit</a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery and testing &#8211; JSUnit, QUnit, JsSpec [Part 3]</title>
		<link>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-3/</link>
		<comments>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-3/#comments</comments>
		<pubDate>Fri, 14 Nov 2008 02:35:22 +0000</pubDate>
		<dc:creator>todd</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[BDD]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jsspec]]></category>
		<category><![CDATA[jsunit]]></category>
		<category><![CDATA[qunit]]></category>
		<category><![CDATA[TDD]]></category>
		<category><![CDATA[test automation pyramid]]></category>
		<category><![CDATA[UnitTesting]]></category>

		<guid isPermaLink="false">http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-3/</guid>
		<description><![CDATA[Trying JsSpec with jQuery This is part three of three. The previous two have been focussed around managing the problem of timing: JSUnit got too hard and QUnit is easy but you still have to manage timings yourself. With JsSpec there is no problem because it is all managed for you. Nice work! Here&#8217;s the [...]]]></description>
			<content:encoded><![CDATA[<h1>Trying JsSpec with jQuery</h1>

<p>This is part three of three. The previous two have been focussed around managing the problem of timing: <a href="../jquery-and-testing-jsunit-qunit-jsspec-part-1/" title="Part I"><span class="caps">JSU</span>nit</a> got too hard and <a href="../jquery-and-testing-jsunit-qunit-jsspec-part-2/" title="Part II">QUnit</a> is easy but you still have to manage timings yourself. With JsSpec there is no problem because it is all managed for you. Nice work! Here&#8217;s the code I had to write. </p>

<p>A couple of things to writing it. I had to dig into the code to find out the setup/teardown lifecycle keywords. There turns out to be setup/teardown per test (eg <code>before</code>) and per test suite (eg <code>before all</code>). I also had to dig around to find then comparators (eg <code>should_be</code>, <code>should_not_be_null</code>). I couldn&#8217;t find any documentation.</p>



<pre>
describe('I need to read the xml and convert into object', {
  'before all': function() {
    target = {};
    $().storyq({
        url: 'data/results-01.xml', 
        load: '',
        success: function(feed) {
          target = feed
      }
    })
   
  },
  
  'should return an object': function() {
    value_of(target).should_not_be_null()
  },
  
  'should not be a function': function() {
    value_of(typeof target).should_not_be(typeof Function )
  },
  
  'should have a version': function(){
    value_of(target.version).should_be('0.1')
  },
  
  'should have items': function(){
    value_of(target.items).should_not_be_empty()
  },
  
  'should have the same value as the reference object in data/results-01.js': function(){
    value_of(reference).should_not_be_undefined()
    value_of(target).should_be(reference)
  },
  
})
</pre>



<p>Ihe output looks nice too <img src='http://blog.goneopen.com/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' />  Here&#8217;s the overall code. Notice that I have also used the technique of a reference object in <code>results-01.js</code>:</p>



<pre>
&amp;lt;html&gt;
&amp;lt;head&gt;
&amp;lt;title&gt;JSSpec results&amp;lt;/title&gt;
&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../lib/jsspec/JSSpec.css&quot; /&gt;
&amp;lt;script type=&quot;text/javascript&quot; src=&quot;../lib/jsspec/JSSpec.js&quot;/&gt;

&amp;lt;script src=&quot;../lib/jquery/jquery.js&quot;/&gt;
&amp;lt;script src=&quot;../lib/jquery/jquery.cookie.js&quot; type=&quot;text/javascript&quot;/&gt;
&amp;lt;script src=&quot;../lib/treeview/jquery.treeview.js&quot; type=&quot;text/javascript&quot;/&gt;
&amp;lt;script src=&quot;../build/dist/jquery.storyq.js&quot; type=&quot;text/javascript&quot;/&gt;

&amp;lt;script type=&quot;text/javascript&quot; src=&quot;data/results-01.js&quot;/&gt;
&amp;lt;script type=&quot;text/javascript&quot; src=&quot;specs/treeview.js&quot;/&gt;  

&amp;lt;script type=&quot;text/javascript&quot;&gt;

  describe('I need to read the xml and convert into object', {
    'before all': function() {
      target = {};
      $().storyq({
          url: 'data/results-01.xml', 
          load: '',
          success: function(feed) {
            target = feed
        }
      })

    },

    'should return an object': function() {
      value_of(target).should_not_be_null()
    },

    'should not be a function': function() {
      value_of(typeof target).should_not_be(typeof Function )
    },

    'should have a version': function(){
      value_of(target.version).should_be('0.1')
    },

    'should have items': function(){
      value_of(target.items).should_not_be_empty()
    },

    'should have the same value as the reference object in data/results-01.js': function(){
      value_of(reference).should_not_be_undefined()
      value_of(target).should_be(reference)
    },

  })
&amp;lt;/script&gt;

&amp;lt;/head&gt;
    &amp;lt;body&gt;
      &amp;lt;div style=&quot;display:none;&quot;&gt;&amp;lt;p&gt;A&amp;lt;/p&gt;&amp;lt;p&gt;B&amp;lt;/p&gt;&amp;lt;/div&gt;
    &amp;lt;/body&gt;
&amp;lt;/html&gt;
</pre>



<p><span class="caps">JSS</span>pec isn&#8217;t written using JQuery. So there are a couple of issues that I can&#8217;t pin down. When I get errors it stops the tests completely. I suspect that this is because these tests are using callbacks and they don&#8217;t return an (JQuery) object. JQuery does alot of object chaining and JsSpec isn&#8217;t cut out for it (I think).</p>

<p>Well, that&#8217;s it.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-part-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery and testing &#8211; JSUnit, QUnit, JsSpec [Introduction]</title>
		<link>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-introduction/</link>
		<comments>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-introduction/#comments</comments>
		<pubDate>Wed, 12 Nov 2008 06:32:42 +0000</pubDate>
		<dc:creator>todd</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[BDD]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jsspec]]></category>
		<category><![CDATA[jsunit]]></category>
		<category><![CDATA[qunit]]></category>
		<category><![CDATA[TDD]]></category>
		<category><![CDATA[test automation pyramid]]></category>
		<category><![CDATA[UnitTesting]]></category>

		<guid isPermaLink="false">http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-introduction/</guid>
		<description><![CDATA[I had been writing a jQuery parser and then realised once I had spiked it that I hadn&#8217;t actually written any tests. So, these are some results from a spike in unit testing a jQuery plugin. Some background, the plugin is a results viewer from an xml feed from storyq. So, I have run some [...]]]></description>
			<content:encoded><![CDATA[<p>I had been writing a jQuery parser and then realised once I had spiked it that I hadn&#8217;t actually written any tests. So, these are some results from a spike in unit testing a jQuery plugin.</p>

<p>Some background, the plugin is a results viewer from an xml feed from storyq. So, I have run some tests and have results. Now I want to see them in html format. The plugin merely transforms the xml to be displayed using the treeview plugin. I wanted to avoid handing in a json feed formatted specifically for the treeview. I wanted all this to happen client side.</p>

<p>The tests have two aspects:</p>


<ul>
<li>xml loading and parsing into an object</li>
<li>rendering the object into a tree (at that point treeview takes over)<br />
 <br />
In short, I want to test the code underlying this call that returns the <code>feed</code> before populating an <code>&lt;ul id=&quot;tree&quot;&gt;</code> element:</li>
</ul>





<pre>$('#tree').storyq({
    url: 'tests/data/results-01.xml',   
    success: function(feed) {

      $(&quot;#tree&quot;).treeview(); //populate the tree
  
  }    
});
</pre>



<h2>Problem for any framework: sequencing</h2>

<p>Let&#8217;s take a look at what I want as test code. In this code, I want to populate <code>data</code> with the <code>feed</code> variable returned in the <code>success</code> callback. The test can then check for values. Take a look at the code below. When I run the code, I should (ideally) see the sequence of alerts: <code>loaded</code>, <code>start test</code>, <code>end test</code>. Of course, I don&#8217;t. I see start <code>start test</code>, <code>end test</code>, <code>loaded</code> as the sequence. That should be obvious that the callback success hasn&#8217;t been called as yet: javascript is run sequentially. Okay, nothing here is surprising. I laboured this point because any of the frameworks must deal with this problem.</p>



<pre>var data = {};

jQuery(function() {
  $().storyq({
      url: '../../xml/results-01.xml', 
      success: function(feed) {
        data = feed;
        alert('loaded')       
        }
      });
});

function testXML2Object() {
  alert('start test')
  assertEquals(data, {&quot;result&quot;}, &quot;Assume that result is a real/correct object&quot;);
  alert('end test')     
}
</pre>



<h2>Frameworks looked at</h2>

<p>I looked at three frameworks for xml loading and parsing:</p>


<ul>
<li><a href="../jquery-and-testing-jsunit-qunit-jsspec-part-1/"><span class="caps">JSU</span>nit &#8211; Part I</a></li>
<li><a href="../jquery-and-testing-jsunit-qunit-jsspec-part-2/">QUnit &#8211; Part II</a></li>
<li><a href="../jquery-and-testing-jsunit-qunit-jsspec-part-3/">JsSpec &#8211; Part <span class="caps">III</span></a></li>
</ul>



<h2>Conclusions</h2>


<ul>
<li>In short, QUnit and JsSpec are both as easy as the other. <span class="caps">JSU</span>nit seems now to be too heavy given what we now have.</li>
<li>QUnit is a <span class="caps">TDD </span>framework is used by jQuery itself. I suspect it might survive longer. There are no setup/teardown phases.</li>
<li>JsSpec is a <span class="caps">BDD </span>framework and doesn&#8217;t use jQuery at all but can easily be used with JQuery plugins. There are good setup/teardown phases for tests and suites.</li>
<li>Your choice between the two is likely to be your preference between <span class="caps">TDD </span>or <span class="caps">BDD.</span> It probably depends upon which boundaries you want to test and how you want to go about specifying.</li>
</ul>



<h2>What I didn&#8217;t do:</h2>


<ul>
<li>integration with a CI system</li>
<li>cross-browser testing</li>
<li>test with selenium or watir</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://blog.goneopen.com/2008/11/jquery-and-testing-jsunit-qunit-jsspec-introduction/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

