yaddi
Version:
YADDI:> A Yadda HTML report when using mocha.
69 lines (64 loc) • 2.67 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Yadda Reports</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="nav.css" media="screen">
<!-- Latest compiled and minified JavaScript -->
</head>
<body>
<div class="contento">
<h1>Yadda reports</h1>
<canvas id="yaddaChart" width="180" height="180"></canvas>
<div id="reportArea"></div>
</div>
<script src="Chart.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="navigation.js"></script>
<script src="mustache.js"></script>
<script>
$(document).ready(function () {
$.getJSON('yadda.json', function (data) {
var scenarioPartial = {
scenario: "<br/>{{#tags}}@{{.}} {{/tags}}<br/><p class='{{status}}'><b>Scenario:</b> {{name}}</p>" +
"{{#steps}} <span class='step_{{status}}'>{{name}}</span><br/> {{/steps}}"
};
$.get('yadda.mustache', function (template) {
var html = Mustache.to_html(template, data, scenarioPartial);
$('#reportArea').html(html);
});
var context = $('#yaddaChart').get(0).getContext("2d");
new Chart(context).Doughnut([
{
value: data.failedScenarios,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Failed"
},
{
value: data.passedScenarios,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Passed"
},
{
value: data.ignoredScenarios,
color: "#FDB45C",
highlight: "#FFC870",
label: "Ignored"
}
], {
animateScale: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
})
});
$('#features').navgoco({accordion: true});
});
</script>
</body>
</html>