Collapse scenarios in HTML reports

Issue #18

jgiven-core/src/main/java/com/tngtech/jgiven/report/html/HtmlWriter.java

@@ -1,6 +1,6 @@
 package com.tngtech.jgiven.report.html;
 
-import static java.lang.String.*;
+import static java.lang.String.format;
 
 import java.io.ByteArrayOutputStream;
 import java.io.File;
@@ -30,7 +30,7 @@ public class HtmlWriter extends ReportModelVisitor {
 
     public HtmlWriter( PrintWriter writer ) {
         this.writer = writer;
-        this.utils = new HtmlWriterUtils( writer );
+        utils = new HtmlWriterUtils( writer );
     }
 
     public void writeHtmlHeader( String title ) {
@@ -43,6 +43,7 @@ public void writeHtmlFooter() {
         writer.println( "<div id='page-footer'></div>" );
         writer.println( "</div> <!-- page -->" );
         writeJGivenFooter();
+        writer.println( "<script src='report.js'></script>" );
         writer.println( "</body></html>" );
     }
 

jgiven-core/src/main/java/com/tngtech/jgiven/report/html/ScenarioHtmlWriter.java

@@ -30,9 +30,11 @@ public void visit( ScenarioModel scenarioModel ) {
         this.scenarioModel = scenarioModel;
         writer.println( "<div class='scenario'>" );
 
-        writer.println( format( "<h3>%s</h3>", WordUtil.capitalize( scenarioModel.description ) ) );
+        String id = scenarioModel.className + ":" + scenarioModel.description;
+        writer.println( format( "<h3 onclick='toggleScenario(\"%s\")'>%s</h3>",
+            id, WordUtil.capitalize( scenarioModel.description ) ) );
         writeTagLine( scenarioModel );
-        writer.println( "<div class='scenario-content'>" );
+        writer.println( "<div class='scenario-content' id='" + id + "'>" );
     }
 
     private void writeTagLine( ScenarioModel scenarioModel ) {
@@ -57,8 +59,8 @@ public void visitEnd( ScenarioModel scenarioModel ) {
         writer.println( "</div> <!-- scenario-content -->" );
 
         writer
-            .println( format( "<div class='scenario-footer'><a href='%s.html'>%s</a></div>", scenarioModel.className,
-                scenarioModel.className ) );
+        .println( format( "<div class='scenario-footer'><a href='%s.html'>%s</a></div>", scenarioModel.className,
+            scenarioModel.className ) );
         writer.println( "</div>" );
     }
 

jgiven-core/src/main/java/com/tngtech/jgiven/report/html/StaticHtmlReportGenerator.java

@@ -46,6 +46,7 @@ public void generate( File toDir, File sourceDir ) throws IOException {
         copyFileToTargetDir( "style.css" );
         copyFileToTargetDir( "default.css" );
         copyFileToTargetDir( "print.css" );
+        copyFileToTargetDir( "report.js" );
     }
 
     protected void copyFileToTargetDir( String fileName ) throws IOException {
@@ -122,9 +123,8 @@ private void writeIndexFile( HtmlTocWriter tocWriter ) {
     }
 
     private void writeTagFiles( HtmlTocWriter tocWriter ) {
-        if( tagMap.isEmpty() ) {
+        if( tagMap.isEmpty() )
             return;
-        }
 
         for( Tag tag : tagMap.keySet() ) {
             writeTagFile( tag, tagMap.get( tag ), tocWriter );

jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/default.css

@@ -38,8 +38,7 @@ body {
 
 
 a {
-  color: #000066;
-  font-size: 14px;
+  text-decoration: none;
 }
 
 a:hover {
@@ -107,6 +106,8 @@ h2, h2 a {
 
 #toc ul a {
   text-decoration: none;
+  color: #000066;
+  font-size: 14px;
 }
 
 h1 {
@@ -243,14 +244,12 @@ h1 {
   padding-bottom: 0px;
   margin-bottom: -5px;
   background-color: white;
+  display: none;
 }
 
 .scenario h3 {
   vertical-align: middle;
   margin-top: 8px;
-  font-weight: bold;
-  font-size: 18px;
-  color: black;
   margin-top: 8px;
   margin-bottom: 0px;
   margin-left:0px;
@@ -264,6 +263,13 @@ h1 {
   float: left;
 }
 
+.scenario h3, .scenario h3 a {
+  font-weight: bold;
+  font-size: 18px;
+  color: black;
+  cursor: pointer;
+}
+
 .case {
   padding-left: 0px;
   padding-right: 0px;

jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/report.js

@@ -0,0 +1,9 @@
+function toggleScenario(id) {
+   var element = document.getElementById(id);
+   console.log(element.style.display);
+   if (element.style.display === 'block') {
+       element.style.display = 'none';
+   } else {
+       element.style.display = 'block';
+   }
+}

jgiven-core/src/test/java/com/tngtech/jgiven/report/html/HtmlWriterTest.java

@@ -24,9 +24,9 @@ public class HtmlWriterTest extends ScenarioTestBase<GivenTestStep, WhenTestStep
     @DataProvider
     public static Object[][] testData() {
         return new Object[][] {
-            { 5, 6, 30 },
-            { 2, 2, 4 },
-            { -5, 1, -5 },
+                { 5, 6, 30 },
+                { 2, 2, 4 },
+                { -5, 1, -5 },
         };
     }
 
@@ -43,7 +43,7 @@ public void HTML_report_is_correctly_generated_for_scenarios( int a, int b, int
         ReportModel model = getScenario().getModel();
         String string = HtmlWriter.toString( model.getLastScenarioModel() );
         assertThat( string.replace( '\n', ' ' ) ).matches( ".*"
-                + "<h3>Values can be multiplied</h3>.*"
+                + "<h3.*>Values can be multiplied</h3>.*"
                 + "<li><span class='introWord'>Given</span> <span class='argument '>" + a + "</span>.*and.*" + b + ".*</li>.*"
                 + "<li><span class='introWord'>When</span> both values are multiplied with each other.*</li>.*"
                 + "<li><span class='introWord'>Then</span> the result is.*<span class='argument '>" + expectedResult + "</span>.*</li>.*"
@@ -54,7 +54,7 @@ public void HTML_report_is_correctly_generated_for_scenarios( int a, int b, int
     @DataProvider
     public static Object[][] testArguments() {
         return new Object[][] {
-            { "a", "b" },
+                { "a", "b" },
         };
     }