display DataTables in the report

Author: danyc

lib/html_formatter.js

@@ -62,7 +62,8 @@ module.exports = (function () {
     return compiled({
       status: step.result ? step.result.status : '',
       errorDetails: step.result ? toHtmlEntities(step.result.error_message) : '',
-      name: step.keyword + step.name
+      name: step.keyword + step.name,
+      dataTable: step.rows ? step.rows : ''
     });
   }
 

templates/step_template.html

@@ -1,5 +1,20 @@
 <div class="step <%= status %>">
     <%= name %>
+    <% if (dataTable) { %>
+    <table class="table">
+        <% for(var row in dataTable) { %>
+        <tr>
+        <% for(var cell in dataTable[row].cells) { %>
+            <% if (Number(row) === 0) { %>
+                <th><%= dataTable[row].cells[cell] %></th>
+            <% } else { %>
+                <td><%= dataTable[row].cells[cell] %></td>
+            <% } %>
+        <% } %>
+        </tr>
+        <% } %>
+    </table>
+    <% } %>
     <% if (errorDetails) { %>
     <div class="error-details">
         <blockquote>

test/data/expected_report.html

@@ -60,14 +60,17 @@ <h2><i class="fa fa-magic"></i> Feature:</h2>
 </div><div class="step passed">
     Given I login as teacher
 
+    
 </div><div class="step passed">
     Then I log out
 
+    
 </div></div><div class="scenario-container"><div class="scenario failed">
     Scenario: Log in as a student
 </div><div class="step failed">
     Given I login as student
 
+    
     <div class="error-details">
         <blockquote>
             <pre>
@@ -127,17 +130,93 @@ <h2><i class="fa fa-magic"></i> Feature:</h2>
 </div><div class="step skipped">
     Then I log out
 
+    
 </div></div><div class="scenario-container"><div class="scenario passed">
     Scenario: Set and verify bookmark tool
 </div><div class="step passed">
     Given I login as teacher
 
+    
 </div><div class="step passed">
     When I set bookmark tool for student 1 on:
 
+    <table class="table">
+        
+        <tr>
+        
+            
+                <th>level</th>
+            
+        
+            
+                <th>unit</th>
+            
+        
+            
+                <th>lesson</th>
+            
+        
+        </tr>
+        
+        <tr>
+        
+            
+                <td>2</td>
+            
+        
+            
+                <td>5</td>
+            
+        
+            
+                <td>2</td>
+            
+        
+        </tr>
+        
+    </table>
+    
+    
 </div><div class="step passed">
     Then I should see bookmark set on:
 
+    <table class="table">
+        
+        <tr>
+        
+            
+                <th>level</th>
+            
+        
+            
+                <th>unit</th>
+            
+        
+            
+                <th>lesson</th>
+            
+        
+        </tr>
+        
+        <tr>
+        
+            
+                <td>2</td>
+            
+        
+            
+                <td>5</td>
+            
+        
+            
+                <td>2</td>
+            
+        
+        </tr>
+        
+    </table>
+    
+    
 </div></div>
 
     <div class="scenario-chart">