Added some interactivity to XSLT stylesheet using javascript.
authorMarkus Kauppila <markus.kauppila@gmail.com>
Wed, 29 Jun 2011 20:34:59 +0300
changeset 5725 077778dd80bd
parent 5724 efb267579adc
child 5726 6e82c70f9c83
Added some interactivity to XSLT stylesheet using javascript.
test/test-automation/style.xsl
--- a/test/test-automation/style.xsl	Wed Jun 29 19:05:56 2011 +0300
+++ b/test/test-automation/style.xsl	Wed Jun 29 20:34:59 2011 +0300
@@ -7,16 +7,123 @@
 <html>
 <head>
 <title>Test report</title>
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"/>
+
+<script type="text/javascript">
+
+$(document).ready(function() {
+	$("span.show-tests").click(function() {
+		var content = $(this).html();
+		var id = $(this).attr('uid');
+	
+		var searchString = "div.tests[uid="+id+"]";
+	
+		if(content == '[Hide tests]') {
+			$(searchString).hide("fast");
+			$(this).text('[Show tests]');
+		} else {
+			$(searchString).show("fast");
+			$(this).text('[Hide tests]');
+		}
+	});
+
+	$("span.show-asserts").click(function() {
+		var content = $(this).html();
+		var id = $(this).attr('uid');
+		
+		console.log("assert uid" + id);
+		
+		var searchString = "div.asserts[uid="+id+"]";
+		
+		if(content == '[Hide Assert Summary]') {
+			console.log("hide now");
+		
+			$(searchString).hide("fast");
+			$(this).text('[Show Assert Summary]');
+		} else {
+			console.log("show now");
+		
+			$(searchString).show("fast");
+			$(this).text('[Hide Assert Summary]');
+		}
+	});
+	
+	$("span.show-all-tests").click(function() {
+		var content = $(this).html();
+ 		
+		var searchString = "div.tests";
+		
+		if(content == '[Hide All Tests]') {
+			console.log("hide now");
+		
+			$(searchString).hide("fast");
+			$(this).text('[Show All Tests]');
+			
+			/* handle the individual '[show tests]' switcher */
+			$("span.show-tests[uid]").text('[Show tests]');
+			
+			
+		} else {
+			console.log("show now");
+		
+			$(searchString).show("fast");
+			$(this).text('[Hide All Tests]');
+			
+			/* handle the individual '[show tests]' switcher */
+			$("span.show-tests[uid]").text('[Hide tests]');
+		}
+	});
+	
+	$("span.show-everything").click(function() {
+		var content = $(this).html();
+ 		
+		var searchString = "div.tests";
+		
+		if(content == '[Hide Everything]') {
+			console.log("hide now");
+		
+			$("div.tests").hide("fast");
+			$("div.asserts").hide("fast");
+			$(this).text('[Show Everything]');
+			
+			/* handle the individual switchers */
+			$("span.show-tests[uid]").text('[Show tests]');
+			$("span.show-asserts[uid]").text('[Show Assert Summary]');
+		} else {
+			console.log("show now");
+		
+			$("div.tests").show("fast");
+			$("div.asserts").show("fast");
+			$(this).text('[Hide Everything]');
+			
+			/* handle the individual switchers */
+			$("span.show-tests[uid]").text('[Hide tests]');
+			$("span.show-asserts[uid]").text('[Hide Assert Summary]');
+			
+		}
+	});
+
+	/* Initially everything is hidden */
+	$("div.tests").hide();
+	$("div.asserts").hide();
+});
+
+</script>
 <style>
 
-div {
+div, h1 {
   padding: 3px 10px 2px 10px;
 }
 
+h3 {
+  padding: 0 0 0 0;
+}
+
 .document {
   font-family: Arial;
   font-size: 11pt;
-  background-color: #EEEEEE;
+  background-color: #EDEDED;
 }
 	
 .description {
@@ -27,18 +134,23 @@
   font-weight: bold;
 }
 	
-.aligner {
-  width: 100px;
-  float: left;
+.switch {
+  font-style: italic;
+  color: rgb(10, 10, 200);
+  font-size: 10pt;
+  cursor: pointer;
+}	
+	
+.passedTest {
+ background-color: green;
+}
+
+.failedTest {
+ background-color: red;
 }
 	
 .statistics {
 }
-
-.ident {
-  position: relative;
-  left: 100px;
-}	
 	
 </style>
 
@@ -56,31 +168,39 @@
 	<br/>
     <span class="title">Statistics:</span><br/>
     <div class="statistics">
-      <span class="aligner">Suites: </span> <xsl:value-of select="testlog/numSuites"/> <br/>
-      <span class="aligner">Tests in total: </span> <xsl:value-of select="testlog/numTests"/> <br/>
+      <span>Suites: </span> <xsl:value-of select="testlog/numSuites"/> <br/>
+      <span>Tests in total: </span> <xsl:value-of select="testlog/numTests"/> <br/>
       <div>
-        <span class="aligner">Passed tests: </span><xsl:value-of select="testlog/numPassedTests"/> <br/>
-        <span class="aligner">Failed tests: </span><xsl:value-of select="testlog/numFailedTests"/> <br/>
+        <span>Passed tests: </span><xsl:value-of select="testlog/numPassedTests"/> <br/>
+        <span>Failed tests: </span><xsl:value-of select="testlog/numFailedTests"/> <br/>
       </div>
     </div>
   </div>
 
-  <h3>Test results:</h3>
+  <div>
+	<h3>Test results:</h3>
+    <span class="switch show-all-tests">[Show All Tests] </span>| 
+    <span class="switch show-everything">[Show Everything]</span>
+  </div>
+
   <xsl:for-each select="testlog/suite">
     <div id="suite">
     Suite: <xsl:value-of select="name"/> (<xsl:value-of select="startTime"/>)
-	<div id="suiteInfo">
+	<div class="suiteInfo">
 		Tests: passed <xsl:value-of select="testsPassed"/>, failed <xsl:value-of select="testsFailed"/>, skipped <xsl:value-of select="testsSkipped"/>.<br/>
 		Total runtime: <xsl:value-of select="totalRuntime"/> seconds. <br/>
-		Show/hide tests.
-		<div id="tests">
+		<span class="show-tests switch" uid="{generate-id(test)}">[Show tests]</span>
+		<div class="tests" uid="{generate-id(test)}">
 		    <xsl:for-each select="test">
 			<div>
 		      Name:  <xsl:value-of select="name"/> (<xsl:value-of select="startTime"/>  - <xsl:value-of select="endTime"/>  ) <br/>
-		      Total runtime: <xsl:value-of select="totalRuntime"/>  <br/>
+		      Description: <span class="description"> <xsl:value-of select="description"/> </span><br/> 
+		
+	          Total runtime: <xsl:value-of select="totalRuntime"/> seconds  <br/>
 		      Result: <xsl:value-of select="result"/>  <br/>
-		      Show/hide assert info <br/>
-			  <div id="asserts">
+		      
+		      <span class="switch show-asserts" uid="{generate-id(assertSummary)}">[Show Assert Summary]</span><br/>
+			  <div class="asserts" uid="{generate-id(assertSummary)}">
 		      <xsl:for-each select="assert"> 
 			   <div id="assert">
 		        Assert name: <xsl:value-of select="name"/> <br/>