@olton/latte
Version:
Simple test framework for JavaScript and TypeScript with DOM supports
557 lines (470 loc) • 14.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EasyTest Report</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
color: #333;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
header h1 {
margin: 0;
font-size: 24px;
}
header .timestamp {
color: #ccc;
font-size: 14px;
}
.summary {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.summary-label {
font-weight: 600;
font-size: 16px;
}
.success {
color: #28a745;
}
.failure {
color: #dc3545;
}
.metric {
font-weight: bold;
font-size: 18px;
}
.test-files {
margin-bottom: 20px;
}
.file-block {
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 15px;
}
.file-header {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.file-name {
font-weight: 600;
font-size: 18px;
}
.file-status {
padding: 5px 10px;
border-radius: 15px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.file-status.passed {
background-color: #d4edda;
color: #28a745;
}
.file-status.failed {
background-color: #f8d7da;
color: #dc3545;
}
.file-meta {
color: #666;
font-size: 14px;
margin-bottom: 15px;
}
.test-suite {
margin-bottom: 15px;
padding-left: 15px;
border-left: 3px solid #ddd;
}
.suite-name {
font-weight: 600;
font-size: 16px;
margin-bottom: 10px;
}
.test-case {
padding: 8px;
margin-bottom: 5px;
border-radius: 3px;
}
.test-case.passed {
background-color: #d4edda;
}
.test-case.failed {
background-color: #f8d7da;
}
.test-name {
font-size: 14px;
}
.error-details {
background-color: #f8f9fa;
padding: 10px;
margin-top: 5px;
border-left: 3px solid #dc3545;
font-family: monospace;
white-space: pre-wrap;
font-size: 12px;
}
.coverage-section {
margin-top: 30px;
}
.coverage-header {
font-size: 20px;
margin-bottom: 15px;
}
.coverage-file {
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 10px;
}
.coverage-details {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 15px;
}
.coverage-item {
display: flex;
flex-direction: column;
}
.coverage-label {
font-size: 12px;
color: #666;
}
.coverage-value {
font-weight: bold;
font-size: 16px;
}
.progress-bar {
height: 8px;
background-color: #e9ecef;
border-radius: 4px;
margin-top: 5px;
overflow: hidden;
width: 100%;
flex-shrink: 0;
}
.progress-value {
height: 100%;
background-color: #28a745;
}
.progress-value.low {
background-color: #dc3545;
}
.progress-value.medium {
background-color: #ffc107;
}
footer {
margin-top: 30px;
text-align: center;
color: #666;
font-size: 14px;
}
.charts {
display: flex;
gap: 20px;
margin: 20px 0;
}
.chart {
flex: 1;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 15px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<header>
<h1>EasyTest Report</h1>
<div class="timestamp">Generated on 12.03.2025, 02:40:48</div>
</header>
<section class="summary">
<h2>Summary</h2>
<div class="summary-row">
<span class="summary-label">Total Tests:</span>
<span class="metric">7</span>
</div>
<div class="summary-row">
<span class="summary-label">Passed:</span>
<span class="metric success">0</span>
</div>
<div class="summary-row">
<span class="summary-label">Failed:</span>
<span class="metric failure">7</span>
</div>
<div class="summary-row">
<span class="summary-label">Duration:</span>
<span class="metric">6 ms</span>
</div>
</section>
<div class="charts">
<div class="chart">
<h3>Test Results</h3>
<canvas id="testResultsChart"></canvas>
</div>
<div class="chart">
<h3>Code Coverage</h3>
<canvas id="coverageChart"></canvas>
</div>
</div>
<section class="test-files">
<h2>Test Files</h2>
<div class="file-block">
<div class="file-header">
<div class="file-name">__tests__\array.test.js</div>
<div class="file-status failed">Failed</div>
</div>
<div class="file-meta">
<span>Duration: 2.3832 ms</span> |
<span>Tests: 7</span> |
<span>Passed: 0</span> |
<span>Failed: 7</span>
</div>
<div class="test-suite">
<div class="suite-name">Array tests</div>
<div class="test-case failed">
<div class="test-name">toBeArray [] == []</div>
<div class="error-details">Test failed</div>
</div>
<div class="test-case failed">
<div class="test-name">toBeArraySorted [1, 2, 3]</div>
<div class="error-details">Test failed</div>
</div>
<div class="test-case failed">
<div class="test-name">toBeArrayNotSorted [4, 1, 2, 3]</div>
<div class="error-details">Test failed</div>
</div>
<div class="test-case failed">
<div class="test-name">toBeArrayUnique [1, 2, 3]</div>
<div class="error-details">Test failed</div>
</div>
<div class="test-case failed">
<div class="test-name">toBeArrayNotUnique [1, 2, 3, 3]</div>
<div class="error-details">Test failed</div>
</div>
<div class="test-case failed">
<div class="test-name">hasLength 3</div>
<div class="error-details">Test failed</div>
</div>
<div class="test-case failed">
<div class="test-name">contain 2</div>
<div class="error-details">Test failed</div>
</div>
</div>
</div>
</section>
<section class="coverage-section">
<h2 class="coverage-header">Code Coverage</h2>
<div class="coverage-file">
<div class="file-name">api.js</div>
<div class="coverage-details">
<div class="coverage-item">
<span class="coverage-label">Coverage</span>
<span class="coverage-value">71.43%</span>
</div>
<div class="coverage-item">
<span class="coverage-label">Lines</span>
<span class="coverage-value">60/84</span>
</div>
<div class="progress-bar">
<div class="progress-value medium" style="width: 71.43%"></div>
</div>
</div>
</div>
<div class="coverage-file">
<div class="file-name">hooks.js</div>
<div class="coverage-details">
<div class="coverage-item">
<span class="coverage-label">Coverage</span>
<span class="coverage-value">100.00%</span>
</div>
<div class="coverage-item">
<span class="coverage-label">Lines</span>
<span class="coverage-value">68/68</span>
</div>
<div class="progress-bar">
<div class="progress-value " style="width: 100%"></div>
</div>
</div>
</div>
<div class="coverage-file">
<div class="file-name">queue.js</div>
<div class="coverage-details">
<div class="coverage-item">
<span class="coverage-label">Coverage</span>
<span class="coverage-value">100.00%</span>
</div>
<div class="coverage-item">
<span class="coverage-label">Lines</span>
<span class="coverage-value">53/53</span>
</div>
<div class="progress-bar">
<div class="progress-value " style="width: 100%"></div>
</div>
</div>
</div>
<div class="coverage-file">
<div class="file-name">runner.js</div>
<div class="coverage-details">
<div class="coverage-item">
<span class="coverage-label">Coverage</span>
<span class="coverage-value">55.74%</span>
</div>
<div class="coverage-item">
<span class="coverage-label">Lines</span>
<span class="coverage-value">131/235</span>
</div>
<div class="progress-bar">
<div class="progress-value medium" style="width: 55.74%"></div>
</div>
</div>
</div>
<div class="coverage-file">
<div class="file-name">expect.js</div>
<div class="coverage-details">
<div class="coverage-item">
<span class="coverage-label">Coverage</span>
<span class="coverage-value">100.00%</span>
</div>
<div class="coverage-item">
<span class="coverage-label">Lines</span>
<span class="coverage-value">45/45</span>
</div>
<div class="progress-bar">
<div class="progress-value " style="width: 100%"></div>
</div>
</div>
</div>
<div class="coverage-file">
<div class="file-name">json.js</div>
<div class="coverage-details">
<div class="coverage-item">
<span class="coverage-label">Coverage</span>
<span class="coverage-value">53.33%</span>
</div>
<div class="coverage-item">
<span class="coverage-label">Lines</span>
<span class="coverage-value">8/15</span>
</div>
<div class="progress-bar">
<div class="progress-value medium" style="width: 53.33%"></div>
</div>
</div>
</div>
<div class="coverage-file">
<div class="file-name">index.js</div>
<div class="coverage-details">
<div class="coverage-item">
<span class="coverage-label">Coverage</span>
<span class="coverage-value">92.16%</span>
</div>
<div class="coverage-item">
<span class="coverage-label">Lines</span>
<span class="coverage-value">94/102</span>
</div>
<div class="progress-bar">
<div class="progress-value " style="width: 92.16%"></div>
</div>
</div>
</div>
</section>
<footer>
Generated by EasyTest | 2025-03-12T00:40:48.892Z
<div>
EasyTest created by <a href="https://pimenov.com.ua">Serhii Pimenov</a>
</div>
</footer>
</div>
<script>
// Настройка графика тестовых результатов
const testResultsCtx = document.getElementById('testResultsChart').getContext('2d');
new Chart(testResultsCtx, {
type: 'doughnut',
data: {
labels: ['Passed', 'Failed'],
datasets: [{
data: [0, 7],
backgroundColor: ['#28a745', '#dc3545'],
borderWidth: 0
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Настройка графика покрытия кода
const coverageCtx = document.getElementById('coverageChart').getContext('2d');
new Chart(coverageCtx, {
type: 'bar',
data: {
labels: ['api.js', 'hooks.js', 'queue.js', 'runner.js', 'expect.js', 'json.js', 'index.js'],
datasets: [{
label: 'Line Coverage (%)',
data: [71.43, 100.00, 100.00, 55.74, 100.00, 53.33, 92.16],
backgroundColor: '#4caf50',
borderWidth: 0
}]
},
options: {
responsive: true,
aspectRatio: 1,
scales: {
y: {
beginAtZero: true,
max: 100
}
},
plugins: {
legend: {
position: 'bottom'
}
}
}
});
</script>
</body>
</html>