cfspec and a bit of jquery
After Kevin Roche's presentation to Devon CFUG (thanks Kevin!) I've been using cfspec a lot to test my specification and I really like it. However when you run a suite of tests you can end up with a long page of results to scroll through, so I thought it would be nice to hide all the passes and just leave the fails by default. Then have a link which would show passes if I wanted to see them.
A few minutes of hacking the cfspec code and some jQuery I've got it working.
Here's what I did....
I created a new file called common.js in the cfspec/includes directory which has the following code in it.
$(document).ready(function() {
if ( $('div.fail').size() > 0 )
{
// there are failures so hide passes
$passes = $('div.pass');
$("<p>show passes<\/p>")
.insertBefore('div.header')
.click( function()
{
$passes.toggle();
if ($passes.filter(':hidden').size()==0)
{
$(this).text("Hide all " + $passes.size() + " passes");
}
else
{
$(this).text("Show all " + $passes.size() + " passes");
}
})
.click()
.css({cursor:'pointer',textDecoration:'underline'})
}
});
Next you need to open up cfspec/lib/SpecRunner.cfc in your editor of choice and find the getOutputAsHtml method. My changes are shown in bold:
<cffunction name="getOutputAsHtml">
<cfset var html = "">
<cfset var css = "">
<cfset var jquery = "">
<cfset var headerClass = "pass">
<cfset var failCount = _exampleCount - _passCount - _pendCount>
<cfset var summary = "#_exampleCount# example">
<cfset var timerSeconds = ((getTickCount() - _startTime) / 1000) & " seconds">
<cfif _exampleCount neq 1>
<cfset summary = summary & "s">
</cfif>
<cfif failCount>
<cfset headerClass = "fail">
<cfelseif _pendCount>
<cfset headerClass = "pend">
</cfif>
<cfset summary = summary & ", #failCount# failure">
<cfif failCount neq 1>
<cfset summary = summary & "s">
</cfif>
<cfset summary = summary & ", #_pendCount# pending">
<cffile action="read" file="#expandPath('/cfspec/includes/style.css')#" variable="css">
<cffile action="read" file="#expandPath('/cfspec/includes/common.js')#" variable="jquery">
<cfset css = reReplace(css, "\s\s+", " ", "all")>
<cfset html = "<html><head><title>cfSpec</title>" &
"<style>#css#</style>" &
"<script type=""text/javascript"" src=""http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js""></script>" &
"<script type=""text/javascript"">#jquery#</script>" &
"</head><body>" &
"<div class='header #headerClass#'>" &
"<div class='summary'>#summary#</div>" &
"<div class='timer'>Finished in <strong>#timerSeconds#</strong></div>" &
"cfSpec Results</div>" & _output & "</body></html>">
<cfreturn html>
</cffunction>
That's it, much nicer to use.
- Posted in:
- jQuery
- ColdFusion
- cfspec
Comment by Ron Hopper – June 10, 2009
Thanks for your work on cfspec. Looking forward to future updates. I'm happy to contribute this code if you want it?
Comment by John Whish – June 11, 2009
Comment by Ron Hopper – June 11, 2009
I've actually updated the script to only hide the passes if there are failures, which I think works better.
Comment by John Whish – June 11, 2009
cfSpec v0.3 is up on RIAForge and now includes this (or similar) jQuery code to auto-collapse the passing examples when there are failures.
Thanks for the contribution!
Comment by Ron Hopper – July 16, 2009
Comment by John Whish – July 17, 2009