HTML5 Report: use new cssClass and color attributes in the report

- also copy the custom CSS file to the target folder (fixes #70)
TNG · Apr 14, 2015 · 70ba7a8 · 70ba7a8
1 parent 3af798b
commit 70ba7a8
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 12 deletions.
diff --git a/jgiven-core/src/main/java/com/tngtech/jgiven/annotation/IsTag.java b/jgiven-core/src/main/java/com/tngtech/jgiven/annotation/IsTag.java
@@ -83,7 +83,7 @@
     /**
      * Sets a CSS class that should be used in HTML reports for this tag.
      * <p>
-     * The default css class is 'tag-<name>' where type is the name of the tag    
+     * The default CSS class is {@code 'tag-<name>'} where {@code <name>} is the type of the tag
      * <p>
      * Non-HTML reports ignore this attribute
      * 
@@ -94,10 +94,12 @@
     /**
      * A color that should be used in reports for this tag.
      * <p>
-     * It depends on the type of the report whether this value is interpreted.
+     * It depends on the type of the report whether and how this value is interpreted.
+     * HTML reports take this value as the background color for the tag.
      * <p>
-     * Example values are 'red', '#ff0000', 'rgba(100,0,0,0.5)'
+     * Example values for the HTML report are 'red', '#ff0000', 'rgba(100,0,0,0.5)'
      * <p>
+     * This attribute is for simple use cases.
      * For advanced styling options use the {@link #cssClass()} attribute instead.  
      * 
      * @since 0.7.2

diff --git a/jgiven-core/src/main/java/com/tngtech/jgiven/report/ReportGenerator.java b/jgiven-core/src/main/java/com/tngtech/jgiven/report/ReportGenerator.java
@@ -110,11 +110,15 @@ public void generate() throws Exception {
 
     private void generateStaticHtmlReport( CompleteReportModel reportModel ) throws IOException {
         new StaticHtmlReportGenerator().generate( reportModel, getTargetDirectory() );
+        copyCustomCssFile( getTargetDirectory() );
+    }
+
+    private void copyCustomCssFile( File targetDirectory ) throws IOException {
         if( getCustomCssFile() != null ) {
             if( !getCustomCssFile().canRead() ) {
                 log.info( "Cannot read customCssFile " + getCustomCssFile() + " skipping" );
             } else {
-                Files.copy( getCustomCssFile(), new File( getTargetDirectory(), "custom.css" ) );
+                Files.copy( getCustomCssFile(), new File( targetDirectory, "custom.css" ) );
             }
         }
     }
@@ -132,6 +136,7 @@ private void generateHtml5Report( CompleteReportModel reportModel ) throws IOExc
         }
 
         reportGenerator.generate( reportModel, getTargetDirectory() );
+        copyCustomCssFile( new File( getTargetDirectory(), "css" ) );
     }
 
     private static void printUsageAndExit() {

diff --git a/jgiven-html5-report/src/app/app.js b/jgiven-html5-report/src/app/app.js
@@ -455,7 +455,6 @@ jgivenReportApp.controller('JGivenReportCtrl', function ($scope, $rootScope, $ti
   function getTags() {
       var res = {};
       var key;
-      var scenarioList;
       var tagEntry;
       _.forEach(jgivenReport.scenarios, function(testCase) {
           _.forEach(testCase.scenarios, function(scenario) {
@@ -501,6 +500,23 @@ jgivenReportApp.controller('JGivenReportCtrl', function ($scope, $rootScope, $ti
       return res;
   };
 
+  $scope.getCssClassOfTag = function getCssClassOfTag( tag ) {
+     if (tag.cssClass) {
+        return tag.cssClass;
+     }
+     return 'tag-' + tag.name;
+  };
+
+  /**
+   * Returns the content of style attribute for the given tag
+   */
+  $scope.getStyleOfTag = function getStyleOfTag( tag ) {
+    if (tag.color) {
+      return 'background-color: '+tag.color;
+    }
+    return '';
+  };
+
   $scope.isHeaderCell = function( rowIndex, columnIndex, headerType ) {
     console.log(headerType);
     if (rowIndex === 0 && (headerType === 'HORIZONTAL' || headerType === 'BOTH')) {

diff --git a/jgiven-html5-report/src/app/index.html b/jgiven-html5-report/src/app/index.html
@@ -307,8 +307,8 @@ <h6>Cases</h6>
                   </div>
                 </div>
                 <div class="small-12 large-4 xlarge-6 column tag-column">
-                  <span  ng-repeat="tag in scenario.tags" class="tag">
-                    <a href="#tag/{{tag.name + '/' + tag.value | encodeUri}}" ><span class="radius label">{{tagToString(tag)}}</span></a>
+                  <span  ng-repeat="tag in scenario.tags" >
+                    <a href="#tag/{{tag.name + '/' + tag.value | encodeUri}}" ><span class="radius label tag {{getCssClassOfTag(tag)}}" style='{{getStyleOfTag(tag)}}'>{{tagToString(tag)}}</span></a>
                   </span>
                 </div>
               </div>

diff --git a/jgiven-tests/src/test/java/com/tngtech/jgiven/report/html5/WhenHtml5Report.java b/jgiven-tests/src/test/java/com/tngtech/jgiven/report/html5/WhenHtml5Report.java
@@ -37,11 +37,11 @@ public SELF the_All_Scenarios_page_is_opened() throws MalformedURLException {
     }
 
     public SELF the_tag_with_name_$_is_clicked( String tagName ) {
-        List<WebElement> tags = webDriver.findElements( By.className( "tag" ) );
-        for( WebElement element : tags ) {
-            WebElement a = element.findElement( By.linkText( tagName ) );
-            if( a != null ) {
-                a.click();
+        List<WebElement> links = webDriver.findElements( By.linkText( tagName ) );
+        for( WebElement link : links ) {
+            WebElement tag = link.findElement( By.className( "tag" ) );
+            if( tag != null ) {
+                link.click();
                 break;
             }
         }