Skip to content

Instantly share code, notes, and snippets.

@lwiechec

lwiechec/index.html

Created January 29, 2021 15:23
Show Gist options
  • Save lwiechec/9de2365163caedc89085929a851ee252 to your computer and use it in GitHub Desktop.
Save lwiechec/9de2365163caedc89085929a851ee252 to your computer and use it in GitHub Desktop.
Download ZIP
foo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cucumber Feature Report</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<style type="text/css">
.panel-heading {
padding: 0;
}
@media (min-width: 768px) {
.pull-right-lg {
float: left;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.pull-right-lg {
float: right;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.pull-right-lg {
float: right;
}
}
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
.left {
float: left;
}
.metadata {
overflow: auto;
letter-spacing: 0.2px;
border-color: white;
line-height: 1.6;
color: #4d4d4d;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
padding-bottom: 3px;
}
.panel-heading a {
padding: 10px 15px;
display: block;
position: relative;
text-decoration: none;
}
.panel-heading i.glyphicon-chevron-down {
display: none;
}
.panel-heading i.glyphicon-chevron-right {
display: inline-block;
}
.panel-heading.open i.glyphicon-chevron-down {
display: inline-block;
}
.panel-heading.open i.glyphicon-chevron-right {
display: none;
}
.generated-on {
text-align: right;
padding-bottom: 10px;
}
.panel-title b {
padding-right: 10px;
}
.panel-heading .label-container {
position: absolute;
top: 8px;
right: 8px;
}
.panel-heading .label-container label {
margin-left: 5px;
padding: 5px;
}
.navbar .label-container {
position: absolute;
right: 10px;
top: 14px;
}
.navbar {
margin-bottom: 10px;
}
.navbar .label {
font-size: 20px;
}
.navbar .project-name {
position: absolute;
top: 10px;
left: 50%;
margin-left: -100px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.tags {
margin-left: 18px;
margin-right: 20px;
padding-top: 5px;
margin-bottom: -4px;
}
.tag {
font-size: 13px;
color: #696969;
letter-spacing: 0.3px;
font-weight: bold;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
.chart {
padding-bottom: 15px;
}
div.chart div div svg rect {
fill: #f5f5f5;
}
.arguments {
margin-left: 30px;
margin-top: 1em;
margin-bottom: 15px;
}
#directory {
background-color: #f0f0f0;
}
.screenshot {
padding: 2% 0 2% 0;
}
.description {
background-color: white;
border-color: white;
line-height: 1.6;
color: #6f6f6f;
font-weight: 400;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0.1em 0.5em 1.2em 1.5em
}
#scenario-description {
padding-bottom: 1em;
padding-left: 0.2em;
}
.scrollBar {
overflow-x: scroll;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #f5f5f5;
color: black;
}
.info {
background-color: #fbfbfb;
}
pre {
display: block;
padding: 10px;
margin-top: 1em;
margin-right: 3em;
font-size: 13px;
line-height: 1.42857143;
word-break: break-all;
word-wrap: break-word;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
.step-duration {
float: right;
color: #BDBDBD;
}
.footer-div {
text-align: right;
vertical-align: middle;
height: 3.5%;
width: 100%;
}
.footer-container {
margin-right: 10px;
margin-top: 5px;
width: 18%;
z-index: 10;
position: absolute;
right: 0;
bottom: 10px;
text-align: center;
background-color: transparent;
}
.show-modal:hover {
background-color: #f0f0f0;
}
.footer-link {
font-size: 13px;
float: right;
}
.footer-link:hover {
color: darkgray;
}
.steps {
padding-left: 10px;
padding-right: 10px;
margin-bottom: -4px;
}
.all-features {
padding-top: 0.6em;
}
.keyword {
color: #616161;
}
.feature-passed {
display: block;
}
.feature-failed{
display: block;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Cucumberjs Report</a>
<div class="project-name visible-md visible-lg">kct-rest-testing</div>
<div class="label-container">
<span class="label label-success" onclick="toggle('.feature-passed')" title=scenarios>Passed: 1</span>
<span class="label label-danger" onclick="toggle('.feature-failed')" title=scenarios>Failed: 0</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="generated-on">Fri Jan 29 2021 14:17:29 GMT+0100 (Central European Standard Time)</div>
<div class="row">
<div class="chart col-lg-6 col-md-6" id="piechart_features"></div>
<div class="chart col-lg-6 col-md-6" id="piechart_scenarios"></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#logOutput">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Metadata</b>
</a>
</h4>
</div>
<div id="logOutput" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=pull-left>
<strong> App Version: </strong>0.3.2
</div>
</div>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=pull-right-lg>
<strong> Test Environment: </strong>STAGING
</div>
</div>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=pull-left>
<strong> Platform: </strong>Linux
</div>
</div>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=pull-right-lg>
<strong> Parallel: </strong>Scenarios
</div>
</div>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=pull-left>
<strong> Executed: </strong>Remote
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" xmlns="http://www.w3.org/1999/html">
<div class="feature-passed">
<div class="col-lg-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="tags">
</div>
<a data-toggle="collapse" href="#collapseFeaturekct_rest_testingb8a3b25d-9b8d-4438-88d2-e6dc9c990c9e">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Feature:</b>let's test KTC!
<span class="label-container">
<span class="label label-success"
title="1 Scenarios Passed">1</span>
</span>
</a>
</h4>
</div>
<div id="collapseFeaturekct_rest_testingb8a3b25d-9b8d-4438-88d2-e6dc9c990c9e" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="tags">
</div>
<a data-toggle="collapse" href="#collapseScenariokct_rest_testingcb885ab1-aaa3-4350-ac8a-813521b63a6b">
<div>
<div style="padding-right: 30px">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Scenario:</b>can connect to KCT API
</div>
<div>
<span class="label-container">
<span class="label label-success"
title="3 Steps Passed">3</span>
</span>
</div>
</div>
<div><small><i></i></small></div>
</a>
</h4>
</div>
<div id="collapseScenariokct_rest_testingcb885ab1-aaa3-4350-ac8a-813521b63a6b"
class="panel-collapse collapse">
<div class="panel-body">
<div></div>
<div class="description" id="scenario-description">Checks if it is possible to log in to the KCT using user/password
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i
class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
<span> KCT endpoint is &quot;https://kct.nsf/collation&quot;</span>
<span class="step-duration">
1ms
</span>
<!-- Adding data table data-->
</span>
</div>
</p>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i
class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">And </span>
<span> I can log in to KCT with user &quot;Administrator&quot; and password &quot;Parola1a&quot;</span>
<span class="step-duration">
356ms
</span>
<!-- Adding data table data-->
</span>
<a href="#info0_01"
data-toggle="collapse" class="show-info toggle">Show Info +</a>
<div id="info0_01"
class="collapse"
data-toggle="modal"
style="cursor: pointer"
data-target="#info-modal-0_01">
<pre class="info show-modal">KCT token: eyJhbGciOi(chopped)</pre>
</div>
<div class="modal fade" id="info-modal-0_01" 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">&times;</span>
</button>
<h4 class="modal-title" id="info-modal-title">
Info
</h4>
</div>
<div class="modal-body">
<h5>
<pre>KCT token: eyJhbGciOi(chopped)</pre>
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</div>
</p>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i
class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
<span> I can successfully log out from KCT</span>
<span class="step-duration">
338ms
</span>
<!-- Adding data table data-->
</span>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-fixed-bottom row-fluid footer-div ">
<div class="navbar-inner">
<div class="footer-container">
<a target="_blank" href="https://www.npmjs.com/package/cucumber-html-reporter">
<div class="text-muted footer-link">
generated by @cucumber-html-reporter
</div>
</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(function() {drawChart({
"title" : "Features",
"failed" : 0,
"passed" : 1,
"notdefined" : 0,
"pending" : 0,
"skipped" : 0,
"ambiguous" : 0
})
});
google.setOnLoadCallback(function() {drawChart({
"title" : "Scenarios",
"failed" : 0,
"passed" : 1,
"notdefined" : 0,
"pending" : 0,
"skipped" : 0,
"ambiguous" : 0
})
});
</script>
<script>
$(document).ready(function() {
$('.collapse').on('hide.bs.collapse', function(e) {
e.stopPropagation();
$(this).prev().removeClass('open');
}).on('show.bs.collapse', function(e) {
e.stopPropagation();
$(this).prev().addClass('open');
});
var $generated = $('.generated-on');
$generated.text('Generated ' + moment($generated.text()).fromNow());
});
function toggle(className) {
var x = $(className);
if ( x.css('display') === "none") {
x.css('display', 'block');
} else {
x.css('display', 'none');
}
}
function drawChart(chartData) {
var data = google.visualization.arrayToDataTable([
['Task', 'Cucumber Results'],
['Passed', chartData.passed],
['Failed', chartData.failed],
['Pending', chartData.pending],
['Undefined', chartData.notdefined],
['Ambiguous', chartData.ambiguous],
['Skipped', chartData.skipped]
]);
var total = chartData.passed + chartData.failed + (chartData.pending || 0) + (chartData.notdefined || 0) + (chartData.ambiguous || 0) + (chartData.skipped || 0);
var title;
if (total === 1) {
title = total + ' ' + chartData.title.slice(0, -1)
} else {
title = total + ' ' + chartData.title;
}
var options = {
width: '100%',
height: 240,
title: title,
is3D: true,
colors: ['#5cb85c', '#d9534f', '#999', '#5bc0de', '#428bca', '#f0ad4e'],
fontSize: '13',
fontName: '"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif',
slices: {
1: {offset: 0.4},
2: {offset: 0.4},
3: {offset: 0.4},
4: {offset: 0.4},
5: {offset: 0.4},
6: {offset: 0.4}
},
titleTextStyle: {
fontSize: '13',
color: '#5e5e5e'
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_' + chartData.title.toLowerCase()));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var featureStatus = data.getValue(selectedItem.row, 0);
if (featureStatus === 'Passed'){
var x = $('.feature-passed');
}else{
var x = $('.feature-failed');
}
if (x && x.css('display') === "none") {
x.css('display', 'block');
} else {
x.css('display', 'none');
}
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
$('a.toggle').on('click', function(e) {
e.preventDefault();
if (!$(this).hasClass('collapse')) {
if ($(this).text() === 'Screenshot -') {
// $(this).text('Screenshot +');
$(this).next('a.screenshot').find('img').hide();
} else if($(this).text() === 'Screenshot +') {
// $(this).text('Screenshot -');
$(this).next('a.screenshot').find('img').show();
}
}
if ($(this).text().includes(' -')) {
$(this).text($(this).text().replace(' -', ' +'));
} else {
$(this).text($(this).text().replace(' +', ' -'));
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment