@honeybook/jest-stare
Version:
jest html reporter (results processor) to view HTML jest results, save raw JSON, and invoke multiple reporters
137 lines (126 loc) • 6.53 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>jest-stare!</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/diff2html.min.css" rel="stylesheet" type="text/css">
<link href="css/jest-stare.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/holder.js"></script>
<script src="js/diff2html.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/view.js"></script>
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" id="navbar-title" href="#">jest-stare</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a id="coverage-link" class="nav-link disabled" href="#">Coverage</a>
</li>
<li class="nav-item">
<div class="onoff-switch mr-sm-2 ml-sm-2">
<input type="checkbox" name="off-switch" class="off-switch-checkbox" id="lab-passoff-switch" checked>
<label class="onoff-switch-label" for="lab-passoff-switch">
<span class="pass off-switch-inner"></span>
<span class="off-switch-switch"></span>
</label>
</div>
</li>
<li class="nav-item">
<div class="onoff-switch mr-sm-2 ml-sm-2">
<input type="checkbox" name="off-switch" class="off-switch-checkbox" id="lab-failoff-switch" checked>
<label class="onoff-switch-label" for="lab-failoff-switch">
<span class="fail off-switch-inner"></span>
<span class="off-switch-switch"></span>
</label>
</div>
</li>
<li class="nav-item">
<div class="onoff-switch mr-sm-2 ml-sm-2">
<input type="checkbox" name="off-switch" class="off-switch-checkbox" id="lab-pendingoff-switch" checked>
<label class="onoff-switch-label" for="lab-pendingoff-switch">
<span class="pending off-switch-inner"></span>
<span class="off-switch-switch"></span>
</label>
</div>
</li>
<li class="nav-item">
<div class="onoff-switch mr-sm-2 ml-sm-2">
<input type="checkbox" name="off-switch" class="off-switch-checkbox" id="lab-todooff-switch" checked>
<label class="onoff-switch-label" for="lab-todooff-switch">
<span class="todo off-switch-inner"></span>
<span class="off-switch-switch"></span>
</label>
</div>
</li>
</ul>
<!-- <form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" disabled>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" disabled>Search</button>
</form> -->
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<h1 class="mt-5"></h1>
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<canvas id="test-suites-canvas" width="100" height="100"></canvas>
<h2>Test Suites</h2>
<div class="list-group">
<p id="test-suites-results" class="list-group-item list-group-item-action">{{results.numPassedTestSuites}} passed, {{results.numTotalTestSuites}} total</p>
</div>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<canvas id="tests-canvas" width="100" height="100"></canvas>
<h2>Tests</h2>
<div class="list-group">
<p id="tests-results" class="list-group-item list-group-item-action">{{results.numPassedTests}} passed, {{results.numTotalTests}} total</p>
</div>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4" id="snapshots-group">
<canvas id="snapshots-canvas" width="100" height="100"></canvas>
<h2>Snapshots</h2>
<div class="list-group">
<p id="snapshots-results" class="list-group-item list-group-item-action">{{results.snapshot.matched}} passed, {{results.snapshot.total}} total</p>
</div>
</div>
<!-- /.col-lg-4 -->
</div>
<div id="loading-info" class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="width: 100%"></div>
</div>
<div class="d-none" id="test-summary">{{testSummary}}</div>
<div class="d-none" id="test-config">{{rawJestStareConfig}}</div>
<div id="accordion">
<div class="d-none" id="test-results">{{rawResults}}</div>
</div>
<div class="d-none" id="test-global-config">{{globalConfig}}</div>
</main>
<hr>
<footer class="footer">
<div class="container">
<span class="text-muted">jest-stare 2022</span>
</div>
</footer>
</body>
</html>