closes #287

Author: anshooarora

config/spark-config.json

@@ -4,6 +4,7 @@
   "protocol": "HTTPS",
   "timelineEnabled": false,
   "offlineMode": true,
+  "thumbnailForBase64": false,
   "documentTitle": "ExtentReports",
   "reportName": "ExtentReports",
   "timeStampFormat": "MMM dd, yyyy HH:mm:ss a",

config/spark-config.xml

@@ -20,6 +20,10 @@
 
     <!-- offline report -->
     <enableOfflineMode>false</enableOfflineMode>
+    
+    <!-- use thumbnails for base64 images -->
+    <!-- this may slowdown viewing tests -->
+    <thumbnailForBase64>false</thumbnailForBase64>
 
     <!-- title of the document -->
     <documentTitle>Extent Framework</documentTitle>

src/main/java/com/aventstack/extentreports/reporter/configuration/ExtentSparkReporterConfig.java

@@ -10,6 +10,7 @@
 import lombok.Builder;
 import lombok.Getter;
 import lombok.Setter;
+import lombok.experimental.Accessors;
 import lombok.experimental.SuperBuilder;
 
 /**
@@ -29,6 +30,8 @@ public class ExtentSparkReporterConfig extends InteractiveReporterConfig {
 
     @Builder.Default
     private Boolean offlineMode = false;
+    @Accessors(fluent = true) @Builder.Default
+    private Boolean thumbnailForBase64 = false;
     @Builder.Default
     private String resourceCDN = "github";
 

src/main/resources/com/aventstack/extentreports/offline/spark/css/spark-style.css

@@ -31,7 +31,12 @@
 <#macro mediaSingle m>
   <#if m??>
     <div class="row mb-3"><div class="col-md-3">
-    <#if m.base64??><a href="${m.base64}" data-featherlight="image"><span class="badge badge-gradient-primary">base64 img</span></a>
+    <#if m.base64??>
+      <#if config.thumbnailForBase64()?? && config.thumbnailForBase64()>
+        <a href="${m.base64}" class="base64-img" data-featherlight="image"><img src=""></a>
+      <#else>
+        <a href="${m.base64}" data-featherlight="image"><span class="badge badge-gradient-primary">base64 img</span></a>
+      </#if>
     <#elseif m.resolvedPath??><img data-featherlight='${m.resolvedPath}' src="${m.resolvedPath}">
     <#elseif m.path??><img data-featherlight='${m.path}' src="${m.path}">
     </#if>

src/main/resources/com/aventstack/extentreports/offline/spark/js/spark-script.js

@@ -1,22 +1,22 @@
 <#include "log.ftl">
 <#macro recurse_nodes test>
 <#if test.hasChildren()>
-  <div class="accordion">
+  <div class="accordion" role="tablist">
     <#list test.children as node>
       <div class="card">
         <div class="card-header">
           <div class="card-title">
-            <div class="node" id="${node.getId()}">${node.name}</div>
-            <div class="node-status float-right"><span class="badge ${node.status.toLower()}-bg log ">${node.status}</span></div>
-            <div class="node-time">
-              <span class='badge badge-default'>${node.timeTaken()?number_to_time?string("mm:ss:SSS")}</span>
+            <div class="node-meta">
+              <#if TestService.testHasScreenCapture(node, true)><span class='badge badge-default mr-1'><i class="fa fa-paperclip"></i></span></#if>
+              <span class='badge badge-default mr-1'>${node.timeTaken()?number_to_time?string("mm:ss:SSS")}</span>
+              <span class="badge ${node.status.toLower()}-bg log p-1">${node.status}</span>
             </div>
+            <a class="node <#if !node.hasChildren() && node.status.toLower()!='fail'>collapsed</#if>" id="${node.getId()}">
+              <span>${node.name}</span> 
+            </a>
             <div class="node-attr">
                 <#if node.hasAttributes()><@attributes test=node /></#if>
             </div>
-            <#if TestService.testHasScreenCapture(node, true)>
-              <div class="status-avatar float-right"><i class="fa fa-paperclip"></i></div>
-            </#if>
           </div>
         </div>
         <#if node.hasLog()>

src/main/resources/com/aventstack/extentreports/templates/commons/commons-macros.ftl

@@ -2,8 +2,8 @@
 <#assign 
   resourceCDN=config.resourceCDN
   cdnURI="cdn.jsdelivr.net/gh/extent-framework/extent-github-cdn@" 
-  csscommit="c952cc003431b643d7a73337421ff42b75bac784"
-  jscommit="14e9bb345ef7e2ed3a102f271d84e9f0267c88e7" 
+  csscommit="da49378e7c517e3ef85493e4c6d1280a9a61dbb3"
+  jscommit="da49378e7c517e3ef85493e4c6d1280a9a61dbb3" 
   iconcommit="b00a2d0486596e73dd7326beacf352c639623a0e">
 <#if resourceCDN=="extentreports">
   <#assign 

src/main/resources/com/aventstack/extentreports/templates/spark/macros/recurse_nodes.ftl

@@ -70,6 +70,8 @@
                   <span class='badge badge-danger'>${test.endTime?string("MM.dd.yyyy HH:mm:ss")}</span>
                   <span class='badge badge-default'>${test.timeTakenPretty()}</span>
                   &middot; <span class='uri-anchor badge badge-default'>#test-id=${test.getId()}</span>
+                  <span class='badge badge-default pointer float-right ml-1 et'><i class="fa fa-chevron-down"></i></span>
+                  <span class='badge badge-default pointer float-right ct'><i class="fa fa-chevron-up"></i></span>
                 </div>
                 <#if test.hasAttributes()>
                 <div class="m-t-15"><@attributes test=test /></div>

src/main/resources/com/aventstack/extentreports/templates/spark/partials/head.ftl

@@ -10,9 +10,11 @@
 import com.aventstack.extentreports.reporter.configuration.Theme;
 
 public class SparkReporterConfigTest {
+    private static final String FILE_PATH = "target/spark.html";
+
     @Test
     public void configTest() {
-        ExtentSparkReporter spark = new ExtentSparkReporter("target/spark.html");
+        ExtentSparkReporter spark = new ExtentSparkReporter(FILE_PATH);
         spark.config(
                 ExtentSparkReporterConfig.builder()
                         .theme(Theme.DARK)
@@ -24,7 +26,7 @@ public void configTest() {
 
     @Test
     public void loadJSONConfigFileTest() throws IOException {
-        ExtentSparkReporter spark = new ExtentSparkReporter("target/spark.html");
+        ExtentSparkReporter spark = new ExtentSparkReporter(FILE_PATH);
         spark.loadJSONConfig(new File("src/test/resources/config/spark-config.json"));
         Assert.assertEquals(spark.getConf().getTheme(), Theme.STANDARD);
         Assert.assertEquals(spark.getConf().getDocumentTitle(), "Test1");
@@ -34,7 +36,7 @@ public void loadJSONConfigFileTest() throws IOException {
     @Test
     public void loadJSONConfigStringTest() throws IOException {
         String json = "{ 'theme': 'DARK', 'documentTitle': 'Extent', 'encoding': 'utf-8' }";
-        ExtentSparkReporter spark = new ExtentSparkReporter("target/spark.html");
+        ExtentSparkReporter spark = new ExtentSparkReporter(FILE_PATH);
         spark.loadJSONConfig(json);
         Assert.assertEquals(spark.getConf().getTheme(), Theme.DARK);
         Assert.assertEquals(spark.getConf().getDocumentTitle(), "Extent");
@@ -43,7 +45,7 @@ public void loadJSONConfigStringTest() throws IOException {
 
     @Test
     public void loadXMLConfigFileTest() throws IOException {
-        ExtentSparkReporter spark = new ExtentSparkReporter("target/spark.html");
+        ExtentSparkReporter spark = new ExtentSparkReporter(FILE_PATH);
         spark.loadXMLConfig(new File("src/test/resources/config/spark-config.xml"));
         Assert.assertEquals(spark.getConf().getReportName(), "Test2");
         Assert.assertEquals(spark.getConf().getDocumentTitle(), "Build 1");
@@ -52,7 +54,7 @@ public void loadXMLConfigFileTest() throws IOException {
 
     @Test
     public void loadXMLConfigPathTest() throws IOException {
-        ExtentSparkReporter spark = new ExtentSparkReporter("target/spark.html");
+        ExtentSparkReporter spark = new ExtentSparkReporter(FILE_PATH);
         spark.loadXMLConfig("src/test/resources/config/spark-config.xml");
         Assert.assertEquals(spark.getConf().getReportName(), "Test2");
         Assert.assertEquals(spark.getConf().getDocumentTitle(), "Build 1");