cucumber-html-reporter
Version:
Generates Cucumber HTML reports in three different themes
370 lines (345 loc) • 24 kB
HTML
<% _.each(suite.features, function(feature, featureIndex) { %>
<% var uid = guid() %>
<% if (featureIndex === 0 || featureIndex % 2 === 0) { %>
<div class="row" xmlns="http://www.w3.org/1999/html">
<% } %>
<% if (feature.scenarios.failed) { %>
<div class="feature-failed">
<% } else { %>
<div class="feature-passed">
<% } %>
<div class="col-lg-<%= columnLayoutWidth %> col-md-<%= columnLayoutWidth %>">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<% if (feature.tags) { %>
<div class="tags"><% _.each(feature.tags, function(tag, featureIndex) { %> <span class="tag"><%= tag.name %></span>
<% }); %>
</div>
<% } %>
<a data-toggle="collapse" href="#collapseFeature<%= suite.name.sanitized %><%= uid %>">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b><%= feature.keyword %>:</b><%= feature.name %>
<span class="label-container">
<%
feature.time = 0
// Add up time from each scenario in the feature.
_.each(feature.elements, function(element, scenarioIndex) {
feature.time = feature.time + element.time
})
%>
<span><%= calculateDuration(feature.time) %></span>
<% if (feature.scenarios.passed) { %><span class="label label-success"
title="<%= feature.scenarios.passed %> Scenarios Passed"><%= feature.scenarios.passed %></span><% } %>
<% if (feature.scenarios.failed) { %><span class="label label-danger"
title="<%= feature.scenarios.failed %> Scenarios Failed"><%= feature.scenarios.failed %></span><% } %>
<% if (feature.scenarios.notdefined) { %><span class="label label-info"
title="<%= feature.scenarios.notdefined %> Scenarios Undefined"><%= feature.scenarios.notdefined %></span><% } %>
<% if (feature.scenarios.pending) { %><span class="label label-default"
title="<%= feature.scenarios.pending %> Scenarios Pending"><%= feature.scenarios.pending %></span><% } %>
<% if (feature.scenarios.skipped) { %><span class="label label-warning"
title="<%= feature.scenarios.skipped %> Scenarios Skipped"><%= feature.scenarios.skipped %></span><% } %>
<% if (feature.scenarios.ambiguous) { %><span class="label label-primary"
title="<%= feature.scenarios.ambiguous %> Ambiguous Scenarios"><%= feature.scenarios.ambiguous %></span><% } %>
</span>
</a>
</h4>
</div>
<div id="collapseFeature<%= suite.name.sanitized %><%= uid %>" class="panel-collapse collapse">
<div class="panel-body">
<% if (feature.description) { %>
<div class="description"><%= feature.description.replace(/\n/g, '<br/>') %></div>
<% } %>
<% _.each(feature.elements, function(element, scenarioIndex) { %>
<% var scenarioId = guid(); %>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<% var scenarioTagsOnly = _.difference(_.map(element.tags, 'name'), _.map(feature.tags, 'name')) %>
<% if (scenarioTagsOnly) { %>
<div class="tags"><% _.each(scenarioTagsOnly, function(tag) { %> <span class="tag"> <%= tag %></span>
<% }); %>
</div>
<% } %>
<a data-toggle="collapse" href="#collapseScenario<%= suite.name.sanitized %><%= scenarioId %>">
<div>
<div style="padding-right: <%= decideScenarioTitlePadding(element) %>">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b><%= element.keyword %>:</b><div class="ellipsis" data-text="<%= _.escape(element.name) %>"><%= element.name %></div>
</div>
<div>
<span class="label-container <% if (element.retried) { %>label-retries<% } %>">
<span><%= calculateDuration(element.time) %></span>
<% if (element.retried) { %><span class="label label-saffron"
title="Re-runs : <%= element.retried %>">Re-runs : <%= element.retried %></span><% } %>
<% if (element.passed) { %><span class="label label-success"
title="<%= element.passed %> Steps Passed"><%= element.passed %></span><% } %>
<% if (element.notdefined) { %><span class="label label-info"
title="<%= element.notdefined %> Steps Undefined"><%= element.notdefined %></span><% } %>
<% if (element.pending) { %><span class="label label-default"
title="<%= element.pending %> Steps Pending"><%= element.pending %></span><% } %>
<% if (element.skipped) { %><span class="label label-warning"
title="<%= element.skipped %> Steps Skipped"><%= element.skipped %></span><% } %>
<% if (element.failed) { %><span class="label label-danger"
title="<%= element.failed %> Steps Failed"><%= element.failed %></span><% } %>
<% if (element.ambiguous) { %><span class="label label-primary"
title="<%= element.ambiguous %> Ambiguous Steps"><%= element.ambiguous %></span><% } %>
</span>
</div>
</div>
<div><small><i><%= element.timestamp %></i></small></div>
</a>
</h4>
</div>
<div id="collapseScenario<%= suite.name.sanitized %><%= scenarioId %>"
class="panel-collapse collapse">
<div class="panel-body">
<div><%= element.notes %></div>
<% if (element.description) { %>
<div class="description" id="scenario-description"><%=
element.description.trim().replace(/\n/g, '<br/>') %>
</div>
<% } %>
<% _.each(element.steps, function(step, stepIndex) { %>
<% if(!step.hidden || step.image || step.text || (step.result && step.result.status === 'failed')) { %>
<p class="scenario-container">
<div class="row steps">
<% if(step.result) { %>
<% if(step.result.status === 'passed') { %>
<span class="label label-success" title="Success"><i
class="glyphicon glyphicon-ok"></i></span>
<% } else if(step.result.status === 'failed') { %>
<span class="label label-danger" title="Failed"><i
class="glyphicon glyphicon-remove"></i></span>
<% } else if(step.result.status === 'skipped') { %>
<span class="label label-warning" title="Skipped"><i
class="glyphicon glyphicon-minus"></i></span>
<% } else if(step.result.status === 'ambiguous') { %>
<span class="label label-primary" title="Ambiguous"><i
class="glyphicon glyphicon-question-sign"></i></span>
<% } else if(step.result.status === 'pending') { %>
<span class="label label-default" title="Pending"><i
class="glyphicon glyphicon-exclamation-sign"></i></span>
<% } else { %>
<span class="label label-info" title="Undefined"><i
class="glyphicon glyphicon-flash"></i></span>
<% } %>
<% } %>
<span class="text">
<span class="keyword highlight"><%= step.keyword %></span>
<span class="stepname"> <%- step.name %></span>
<% if (step.doc_string && step.doc_string.value) { %>
<span>
<%- step.doc_string.value %>
</span>
<% } %>
<% if (step.result) { %>
<span class="step-duration">
<%= calculateDuration(step.result.duration) %>
</span>
<% } %>
<% if(step.arguments) { %>
<% for( var i = 0; i < step.arguments.length; i++ ) { %>
<% if(step.arguments[i]["rows"]) { %>
<div class="scrollBar">
<table class="arguments">
<% var rows = step.arguments[i]["rows"]; %>
<tr>
<% var cells = rows[0]["cells"]; %>
<% for( var k = 0; k < cells.length; k++ ) { %>
<th>
<%= cells[k] %>
</th>
<% } %>
</tr>
<% for( var j = 1; j < rows.length; j++ ) { %>
<tr>
<% var cells = rows[j]["cells"]; %>
<% for( var k = 0; k < cells.length; k++ ) { %>
<td>
<%- cells[k] %>
</td>
<% } %>
</tr>
<% } %>
</table>
</div>
<% } %>
<% if(step.arguments[i]["content"]) { %>
<pre class=info><br><%= step.arguments[i]["content"].replace(/</g
, '(').replace(/>/g, ')') %></pre>
<% } %>
<% } %>
<% } %>
<!-- Adding data table data-->
<% if(step.rows) { %>
<% var headers = step.rows[0]["cells"] %>
<div class="scrollBar">
<table class="arguments">
<thead>
<tr>
<% for(var i = 0; i < headers.length; i++) { %>
<th><%= headers[i] %></th>
<% } %>
</tr>
</thead>
<tbody>
<% for(var i = 1; i < step.rows.length; i++) { %>
<% var cell = step.rows[i]["cells"]; %>
<tr>
<% for(var c = 0; c < cell.length; c++) { %>
<td>
<%= cell[c] %>
</td>
<% } %>
</tr>
<% } %>
</tbody>
</table>
</div>
<% } %>
</span>
<% if(step.result) { %>
<% if(step.result.status === 'undefined') { %>
<pre class=info>
<br>Then(/^<%= step.name.replace(/"[^"]*"/g, '"\(\[\^\"\]\*\)"') %>$/, function(<% for (var i=1; i<(step.name.split('"').length / 2); i++) { %>arg<%= i %>, <% } %>callback) {
// Write code here that turns the phrase above into concrete actions
callback(null, 'pending');
});
</pre>
<% } %>
<% if (step.result.error_message) { %>
<a href="#error<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>"
data-toggle="collapse" class="toggle">Show Error +</a>
<div id="error<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>"
class="collapse">
<pre class="info show-modal"
data-toggle="modal"
style="cursor: pointer"
data-target="#error-modal-<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>">
<br> <%= step.result.error_message.replace(/</g, '(').replace(/>/g, ')') %></pre>
</div>
<div class="modal fade" id="error-modal-<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>" tabindex="-1" role="dialog"
aria-labelledby="stacktraceModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="error-modal-title">
Error
</h4>
</div>
<div class="modal-body">
<h5>
<pre><br><%= step.result.error_message.replace(/</g, '(').replace(/>/g, ')') %></pre>
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<% } %>
<% if (step.text) { %>
<a href="#info<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>"
data-toggle="collapse" class="show-info toggle">Show Info +</a>
<div id="info<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>"
class="collapse"
data-toggle="modal"
style="cursor: pointer"
data-target="#info-modal-<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>">
<pre class="info show-modal"><%= step.text %></pre>
</div>
<div class="modal fade" id="info-modal-<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>" tabindex="-1" role="dialog"
aria-labelledby="stacktraceModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="info-modal-title">
Info
</h4>
</div>
<div class="modal-body">
<h5>
<pre><%= step.text %></pre>
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<% } %>
<% if (step.image) { %>
<a href="#ss<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>"
data-toggle="collapse" class="toggle">Screenshot +</a>
<div id="ss<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>"
class="screenshot collapse">
<pre class="info show-modal"
data-toggle="modal"
style="cursor: pointer"
data-target="#ss-modal-<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>">
<img class="screenshot" style="height:100%;width:100%;display:block;"
id="ss-image-<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>" src="<%= step.image %>"/>
</div>
<div class="screenshot collapse"
style="cursor: pointer"
data-toggle="modal"
data-target="#ss-modal-<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>">
</div>
<div class="modal fade" id="ss-modal-<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>" tabindex="-1" role="dialog"
aria-labelledby="stacktraceModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="ss-modal-title">
Screenshot
</h4>
</div>
<div class="modal-body">
<img class="screenshot" style="height:100%;width:100%;"
id="my-ss-images" src="<%= step.image %>"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
</div>
</p>
<% } %>
<% }); %>
</div>
</div>
</div>
<% }); %>
</div>
</div>
</div>
</div>
<% if ((featureIndex != 0 && ((featureIndex + 1) % 2 == 0)) || (featureIndex === (suite.features.length -1))) { %>
</div>
<% } %>
</div>
<% }); %>