assets/report.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Results | xcpretty</title>
<style type="text/css">
body { font-family:Avenir Next, Helvetica Neue, sans-serif; color: #4A4A4A; background-color: #F0F3FB; margin:0;}
h1 { font-weight: normal; font-size: 24px; margin: 10px 0 0 0;}
h3 { font-weight: normal; margin: 2px; font-size: 1.1em;}
header { position: fixed;width: 100%;background: rgba(249, 254, 255, 0.9);margin: 0;padding: 10px;}
header:before, header:after { content:""; display:table;}
header:after { clear:both;}
a:link { color: #A1D761;}
footer { clear: both;position: relative;z-index: 10;height: 40px;margin-top: -10px; margin-left:30px; font-size:12px;}
table { width:100%; border-collapse: collapse;}
tr td:first-child { width:7%}
.left { float: left; margin-left:30px;}
.right { float: right; margin-right: 40px; margin-top: 0; margin-bottom:0;}
.test-suite { margin: 0 0 30px 0;}
.test-suite > .heading { font-family:Menlo, Monaco, monospace; font-weight: bold; border-color: #A1D761; background-color: #B8E986; border-width: 1px;}
.test-suite.failing > .heading { border-color: #C84F5E; background-color: #E58591;}
.test-suite > .heading > .title { margin-top: 4px; margin-left: 10px;}
.tests { overflow: scroll;margin: 0 30px 0 60px;}
.test, .test-suite > .heading { height: 30px; overflow: hidden; margin: 0 30px;}
.test, .test-suite > .heading { border-width: 1px; border-collapse: collapse; border-style: solid; }
.test { margin-left: 30px; border-top:none;}
.test.failing { border-color: #C84F5E; background-color: #F4DDE0;}
.test.passing { border-color: #A1D761;}
.test.failing { background-color: #E7A1AA;}
.test.passing { background-color: #CAF59F;}
.test.failing.odd { background-color: #EEC7CC;}
.test.passing.odd { background-color: #E5FBCF;}
.details.failing { background-color: #F4DDE0; border: 1px solid #C84F5E;}
.details.passing { background-color: #E5F4DC; border: 1px solid #A1D761;}
.test .test-detail:last-child { padding-bottom: 8px;}
.test .title { float: left; font-size: 0.9em; margin-top: 8px; font-family: Menlo, Monaco, monospace;}
.test .time { float: left;margin: 4px 10px 0 20px;}
.test-detail { font-family:Menlo, Monaco, monospace; font-size: 0.9em; margin: 5px 0 5px 0px;}
.screenshots { height: auto; overflow: hidden; padding: 4px 4px 0 4px; background-color: #B8E986; border: #A1D761; border-width: 0 1px; border-style: solid; }
.screenshots.failing { border-color: #C84F5E; background-color: #E58591; }
.screenshot { max-height: 60px; float: left; transition: max-height 0.2s; margin: 0 4px 4px 0 }
.screenshot.selected { max-height: 568px; }
#test-suites { display: inline-block; width: 100%;margin-top:100px;}
#segment-bar { margin-top: 10px;margin-left: 14px;float:right;}
#segment-bar a:first-child { border-radius: 9px 0 0 9px; border-right: none;}
#segment-bar a:last-child { border-radius: 0 9px 9px 0; border-left: none;}
#segment-bar > a { color: #565656; border: 2px solid #7B7B7B; width: 80px; font-weight: bold; display:inline-block;text-align:center; font-weight: normal;}
#segment-bar > a.selected { background-color: #979797; color: #F0F3FB;}
#counters { float: left;margin: 10px;text-align: right;}
#counters h2 { font-size: 16px; font-family: Avenir, sans-serif; font-weight: lighter; display:inline;}
#counters .number { font-size: 20px;}
#fail-count { color: #D0021B; margin-left:10px;}
@media (max-width: 640px) {
h1, #counters, #segment-bar { margin: 5px auto; text-align:center;}
header, #segment-bar { width: 100%; position: relative; background:none;}
.left, .right { float:none; margin:0;}
#test-suites { margin-top: 0;}
#counters { float:none;}
}
</style>
<script type="text/javascript">
var hide = function(element) { element.style.display = 'none';}
var show = function(element) { element.style.display = '';}
var isHidden = function(element) { return element.style.display == 'none';}
var isSelected = function(element) { return element.classList.contains("selected");}
var deselect = function(element) { return element.classList.remove("selected");}
var select = function(element) { return element.classList.add("selected");}
var toggle = function(element) { isHidden(element) ? show(element) : hide(element);};
var toggleTests = function(heading) { toggle(heading.parentNode.children[1]);};
var toggleDetails = function(detailClass) {
var details = document.querySelectorAll('.' + detailClass);
for (var i = details.length - 1; i >= 0; i--) { toggle(details[i]);};
};
var hideAll = function(collection) {
for (var i = collection.length - 1; i >= 0; i--) { hide(collection[i]); };
}
var showAll = function(collection) {
for (var i = collection.length - 1; i >= 0; i--) { show(collection[i]); };
}
var selectSegment = function(segment) {
if (isSelected(segment)) return;
var segments = document.querySelectorAll('#segment-bar > a');
for (var i = segments.length - 1; i >= 0; i--) { deselect(segments[i]);};
select(segment);
if (segment.id == "all-segment") {
showAll(document.querySelectorAll('.test-suite'));
showAll(document.querySelectorAll('.test'));
} else if (segment.id == "failing-segment") {
hideAll(document.querySelectorAll('.test.passing'));
showAll(document.querySelectorAll('.test.failing'));
hideAll(document.querySelectorAll('.test-suite.passing'));
showAll(document.querySelectorAll('.test-suite.failing'));
} else if (segment.id == "passing-segment") {
hideAll(document.querySelectorAll('.test.failing'));
showAll(document.querySelectorAll('.test.passing'));
hideAll(document.querySelectorAll('.test-suite.failing'));
showAll(document.querySelectorAll('.test-suite.passing'));
}
}
var toggleScreenshot = function(suiteName, index) {
var screenshot = document.getElementById("screenshot-" + suiteName + "-" + index);
isSelected(screenshot) ? deselect(screenshot) : select(screenshot);
}
</script>
</head>
<body>
<header>
<section class="left">
<h1>Test Results</h1>
</section>
<section class="right">
<section id="counters">
<h2 id="test-count"><span class="number"><%= test_count %></span> tests</h2>
<% if fail_count > 0 %>
<h2 id="fail-count"><span class="number"><%= fail_count %></span> failures</h2>
<% end %>
</section>
<section id="segment-bar">
<a id="all-segment" onclick="selectSegment(this);" class="selected">All</a><a id="failing-segment" onclick="selectSegment(this);">Failing</a><a id="passing-segment" onclick="selectSegment(this);">Passing</a>
</section>
</section>
</header>
<section id="test-suites">
<% test_suites.each do |name, info| %>
<% next unless info[:tests].size > 0 %>
<section class="test-suite <%= info[:failing] ? 'failing' : 'passing'%>" id="<%= name %>">
<section class="heading" onclick="toggleTests(this);">
<h3 class="title"><%= name %></h3>
</section>
<section class="tests">
<table>
<% info[:tests].each_with_index do |test, index| %>
<% detail_class = test[:name].gsub(/\s/,'') %>
<tr class="test <%= test[:failing] ? 'failing' : 'passing'%> <%= index % 2 != 0 ? 'odd' :''%>" onclick="toggleDetails('<%= detail_class %>');">
<td>
<% if test[:time] %>
<h3 class="time"><%= test[:time] %>s</h3>
<% end %>
</td>
<td><h3 class="title"><%= test[:name] %></h3></td>
</tr>
<% if test[:reason] || test[:snippet] || !test[:screenshots].empty? %>
<tr class="details <%= test[:failing] ? 'failing' : 'passing'%> <%= detail_class %>">
<td></td>
<td>
<% if test[:reason] %>
<section class="test-detail reason"><%= test[:reason] %></section>
<% end %>
<% if test[:snippet] %>
<section class="test-detail snippet"><%= test[:snippet] %></section>
<section class="test-detail"><%= test[:file] %></section>
<% end %>
<% if !test[:screenshots].empty? %>
<section class="test-detail">
<% test[:screenshots].each_with_index do |screenshot, idx| %>
<a href="javascript:toggleScreenshot('<%=test[:name] %>', <%=index %>)">
<img class="screenshot" id="screenshot-<%=test[:name] %>-<%=index %>" src="<%=screenshot %>" />
</a>
<% end %>
</section>
<% end %>
</td>
</tr>
<% end %>
<% end %>
</table>
</section>
</section>
<% end %>
</section>
<footer>Report generated with <a href="https://github.com/supermarin/xcpretty">xcpretty</a></footer>
</body>
</html>