The HTML report looks beautiful.
This commit is contained in:
Michael Miller 2021-08-19 13:07:15 -06:00
parent efca1409c6
commit f5ec9ccff6
No known key found for this signature in database
GPG key ID: FB9F12F7C646A4AD
2 changed files with 218 additions and 17 deletions

View file

@ -5,8 +5,8 @@
</div> </div>
<%- if report.counts.fail > 0 -%> <%- if report.counts.fail > 0 -%>
<h2>Failures</h2> <h2>Failures (<%= report.counts.fail %>)</h2>
<ul id="failure-list"> <ol id="failure-list">
<%- report.failures.each do |example| -%> <%- report.failures.each do |example| -%>
<li class="example fail"> <li class="example fail">
<a href="#example-<%= example.object_id %>" title="Jump to result"> <a href="#example-<%= example.object_id %>" title="Jump to result">
@ -14,12 +14,12 @@
</a> </a>
</li> </li>
<%- end -%> <%- end -%>
</ul> </ol>
<%- end -%> <%- end -%>
<%- if report.counts.pending > 0 -%> <%- if report.counts.pending > 0 -%>
<h2>Pending</h2> <h2>Pending (<%= report.counts.pending %>)</h2>
<ul id="pending-list"> <ol id="pending-list">
<%- report.pending.each do |example| -%> <%- report.pending.each do |example| -%>
<li class="example pending"> <li class="example pending">
<a href="#example-<%= example.object_id %>" title="Jump to result"> <a href="#example-<%= example.object_id %>" title="Jump to result">
@ -27,24 +27,24 @@
</a> </a>
</li> </li>
<%- end -%> <%- end -%>
</ul> </ol>
<%- end -%> <%- end -%>
<h2>Examples</h2> <h2>Examples (<%= report.counts.total %>)</h2>
<ul id="example-list"> <ul id="example-list">
<%- report.examples.each do |example| -%> <%- report.examples.each do |example| -%>
<li class="example <%= example.result %>"> <li class="example <%= example.result %>">
<h3 id="#example-<%= example.object_id %>" class="full-name"><% escape(example) %></h3> <h3 id="#example-<%= example.object_id %>" class="full-name"><% escape(example) %></h3>
<span class="result <%= example.result %>"><%= example.result %></span> <span class="result <%= example.result %>"><%= example.result %></span>
<span class="elapsed" title="<% escape(example.result.elapsed) %>"><% escape(runtime(example.result.elapsed)) %></span> <span class="elapsed" title="<% escape(example.result.elapsed) %>">Took <% escape(runtime(example.result.elapsed)) %></span>
<% if location = example.location? %><span class="location"><% escape(location) %></span><% end %> <% if location = example.location? %><span class="location"><% escape(location) %></span><% end %>
<% if result = example.result.as?(PendingResult) %><span class="message"><% escape(result.reason) %></span> <% if result = example.result.as?(PendingResult) %><p class="message"><% escape(result.reason) %></p>
<%- elsif result = example.result.as?(ErrorResult) -%> <%- elsif result = example.result.as?(ErrorResult) -%>
<span class="error"> <p class="message error">
<em><% escape(result.error.class) %></em> <em class="type-name"><% escape(result.error.class) %></em>
<% escape(result.error.message) %> <% escape(result.error.message) %>
</span> </p>
<%- if backtrace = result.error.backtrace? -%> <%- if backtrace = result.error.backtrace? -%>
<div class="stacktrace"> <div class="stacktrace">
<%- backtrace.each do |line| -%> <%- backtrace.each do |line| -%>
@ -54,7 +54,7 @@
<%- end -%> <%- end -%>
<%- elsif result = example.result.as?(FailResult) -%> <%- elsif result = example.result.as?(FailResult) -%>
<span class="error"><% escape(result.error.message) %></span> <p class="message fail"><% escape(result.error.message) %></span>
<%- end -%> <%- end -%>
<%- if example.result.expectations.empty? -%> <%- if example.result.expectations.empty? -%>
@ -63,12 +63,12 @@
<h4>Expectations</h4> <h4>Expectations</h4>
<ol class="expectation-list"> <ol class="expectation-list">
<%- example.result.expectations.each do |expectation| -%> <%- example.result.expectations.each do |expectation| -%>
<li class="expectation <%= expectation.satisfied? ? "pass" : "fail" %>"> <li class="expectation <%= expectation.satisfied? ? "pass" : "fail" %>"<% if location = expectation.location? %> title="<% escape(location) %>"<% end %>>
<span<% if location = expectation.location? %> title="<% escape(location) %>"<% end %>><% escape(expectation.description) %></h5> <span><% escape(expectation.description) %></h5>
<%- if expectation.satisfied? -%> <%- if expectation.satisfied? -%>
<span class="result">pass</span> <span class="result pass">pass</span>
<%- else -%> <%- else -%>
<span class="result">fail</span> <span class="result fail">fail</span>
<p class="message"><% escape(expectation.failure_message) %></span> <p class="message"><% escape(expectation.failure_message) %></span>
<dl class="expectation-values"> <dl class="expectation-values">
<%- expectation.values.each do |key, value| -%> <%- expectation.values.each do |key, value| -%>

View file

@ -7,6 +7,207 @@
<meta name="generator" content="Spectator"> <meta name="generator" content="Spectator">
<title>Test Results</title> <title>Test Results</title>
<style>
body {
font-family: "sans-serif";
background-color: #e2e2e2;
}
#summary, #failure-list, #pending-list, #example-list li.example {
background-color: #fafafa;
border: #aaaaaa solid 1px;
margin: 1em 0;
padding: 1em 0.5em;
}
#example-list {
list-style: none;
}
#summary.pass, #example-list li.example.pass {
border-left: #00aa00 solid 0.5em;
}
#summary.fail, #summary.error, #failure-list, #example-list li.example.fail, #example-list li.example.error {
border-left: #aa0000 solid 0.5em;
}
#summary.pending, #pending-list, #example-list li.example.pending {
border-left: #aaaa00 solid 0.5em;
}
.totals {
display: block;
}
.result {
float: right;
}
.result.pass {
color: #00aa00;
}
.result.fail, .result.error {
color: #aa0000;
}
.result.pending {
color: #aaaa00;
}
span {
margin: 0.25em 0;
}
.message {
font-weight: bold;
}
.muted {
color: #888888;
font-style: italic;
}
h3.full-name {
display: inline-block;
margin-top: 0;
}
h1 {
margin-top: 0;
}
h1, h2, h4 {
margin-bottom: 0.5em;
}
.example .elapsed, .example .location {
display: block;
padding-left: 1em;
}
#summary, #failure-list, #pending-list {
margin: 0 1em;
}
#example-list {
padding: 0 1em;
}
li.example {
border-top: #dddddd solid 1px;
margin: 0 0 0 2em;
}
li.example:hover {
background-color: #dddddd;
}
li.example:last-of-type {
border-bottom: #dddddd solid 1px;
}
li.example a {
display: block;
text-decoration: none;
color: #000000;
padding: 0.5em;
}
.expectation .result {
font-size: smaller;
}
li.expectation {
border-top: #dddddd solid 1px;
padding: 0.5em;
}
li.expectation:hover {
background-color: #dddddd;
}
li.expectation:last-of-type {
border-bottom: #dddddd solid 1px;
}
.message.fail, .message.error, .expectation.fail .message {
color: #aa0000;
}
.type-name {
font-family: "monospace";
}
.stacktrace {
padding: 1em;
margin: 1em;
background: #e2e2e2;
}
.stacktrace code {
display: block;
}
.stacktrace code:hover {
background-color: #fafafa;
}
.stacktrace code.muted:hover {
background-color: #e2e2e2;
}
dl.expectation-values {
border: #aaaaaa solid 1px;
background-color: #e2e2e2;
margin: 0.5em;
padding: 0.5em;
}
.expectation-values dt {
float: left;
clear: left;
width: 15%;
text-align: right;
font-weight: bold;
}
.expectation-values dt::after {
content: ":";
}
.expectation-values dd {
margin: 0 0 0 15%;
padding: 0 0 0.25em 0.5em;
}
.elapsed:before {
content: "\023F1";
padding-right: 0.5em;
}
.location:before {
content: "\01f4c4";
padding-right: 0.5em;
}
.totals.pass:before, .result.pass:before {
content: "\02714";
padding-right: 0.25em;
}
.totals.fail:before, .totals.error:before, .result.fail:before, .result.error:before {
content: "\0274c";
padding-right: 0.25em;
}
.totals.pending:before, .result.pending:before {
content: "\026a0";
padding-right: 0.25em;
}
</style>
</head> </head>
<body> <body>