templates/report.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Report - <%= @title %></title>
<link href="resources/bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/bootstrap-4.0.0-dist/themes/bootstrap-theme-yeti.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="resources/jquery-3.3.1.min.js"></script>
<script src="resources/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
<script src="resources/Chart.min.js"></script>
<style>
* {
font-size: 14px;
}
.spacer {
margin-left: 10px;
}
<%= Rouge::Themes::Github.render(:scope => '.highlight') %>
</style>
</head>
<body>
<div class="container">
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="overview.html">Overview</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Group Summary</div>
<div class="panel-body">
<span class="pull-right"><%= @examples.size %> Examples</span>
<canvas id="report_chart" width="300" height="300"></canvas>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Example</th>
<th>Duration</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<% @examples.each_with_index do |example, i| %>
<tr>
<td id="example_<%= i+1 %>"><%= i+1 %></td>
<td width="100%">
<div>
<div class="panel <%= example.result_type('panel-') %>">
<div class="panel-heading">
<h3 class="panel-title pull-left"> <%= example.example_title %></h3>
<% if example.screen_grab? %>
<a href="#example_<%= i+1 %>" class="btn btn-xs btn-default spacer pull-right" onclick="toggler('screen_grab_<%= i+1 %>');">Screen Grabs</a>
<% end %>
<% if example.video_record? %>
<a href="#example_<%= i+1 %>" class="btn btn-xs btn-default spacer pull-right" onclick="toggler('video_record_<%= i+1 %>');">Video Records</a>
<% end %>
<div class="clearfix"></div>
</div>
<% if example.comment? %>
<div class="panel-body"><%= example.comment %></div>
<% end %>
<% if example.spec? or example.screen_grab? or example.video_record? %>
<!-- SPEC BLOCK -->
<% if example.spec? %>
<div class="panel-body"><pre><%= example.spec %></pre></div>
<% end %>
<!-- SCREEN GRAB BLOCK -->
<% if example.screen_grab? %>
<div id="screen_grab_<%= i+1 %>" class="panel-body" style="display:none">
<% example.screen_grab.each do |image| %>
<div class="col-md-4">
<div class="thumbnail">
<a href=<%= image[:path] %> target="_blank">
<img src=<%= image[:path] %> alt="Screen Grab" style="width:50%,height:50%">
<div class="caption">
<p><%= image[:caption] %></p>
</div>
</a>
</div>
</div>
<% end %>
</div>
<% end %>
<!-- VIDEO RECORD BLOCK -->
<% if example.video_record? %>
<div id="video_record_<%= i+1 %>" class="panel-body" style="display:none">
<div class="col-md-4">
<video controls width="250">
<source src=<%= example.video_record %> type="video/mp4">
Your browser does not support HTML 5 video.
</video>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
<div>
<% if example.exception? %>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title"><%= example.exception.problem %></h3>
</div>
<div class="panel-body"><pre class="highlight"><code><%= example.exception.explanation %></code></pre>
<% unless example.exception.backtrace_message.empty? %>
<dl>
<dt>Backtrace:</dt>
<dd>
<h5>
<ol>
<% example.exception.backtrace_message.each do |message| %>
<li><%= message %></li>
<% end %>
</ol>
</h5>
</dd>
</dl>
<% end %>
</div>
</div>
<pre class="highlight"><code><%= example.exception.highlighted_source %></code></pre>
<% end %>
</div>
</td>
<td><%= example.duration %></td>
<td><span class="label <%= example.result_type %>"><%= example.status %></span></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function toggler(divId) {
$("#" + divId).slideToggle();
};
var pieCtx = document.getElementById("report_chart");
var pieChart = new Chart(pieCtx, {
type: 'doughnut',
data: {
labels: ["Passed", "Failed", "Pending"],
datasets: [{
label: 'Examples',
data: [<%= @passed %>, <%= @failed %>, <%= @pending %>],
backgroundColor: [
'#3c9a5f',
'#ea2f10',
'#e99002'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
});
</script>
</body>
</html>