@aladas-org/cryptocalc
Version:
Cryptocurrency wallet generator
397 lines (348 loc) • 9.87 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cryptocalc — Test Documentation</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;600;700&display=swap');
:root {
--bg: #0d1117;
--surface: #161b22;
--surface2: #1c2330;
--border: #30363d;
--accent: #58a6ff;
--accent2: #3fb950;
--accent3: #f78166;
--accent4: #d2a8ff;
--text: #e6edf3;
--text-muted: #8b949e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px;
line-height: 1.6;
padding: 48px 24px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
header {
margin-bottom: 48px;
border-bottom: 1px solid var(--border);
padding-bottom: 28px;
text-align: center;
}
.top-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
background: #1f3a5f;
color: var(--accent);
border: 1px solid #1f4080;
letter-spacing: .05em;
margin-bottom: 14px;
}
h1 {
font-size: 36px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
letter-spacing: -.02em;
}
h1 span { color: var(--accent); }
.subtitle {
color: var(--text-muted);
font-size: 16px;
margin-bottom: 30px;
}
/* Run instructions */
.run-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px 32px;
margin-bottom: 40px;
}
.run-box h2 {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
color: var(--text);
font-family: 'IBM Plex Mono', monospace;
display: flex;
align-items: center;
gap: 10px;
}
.run-box h2::before {
content: '▶';
color: var(--accent2);
font-size: 18px;
}
.cmd-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.cmd-item {
background: #0a0c10;
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 20px;
}
.cmd-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 8px;
}
.cmd-code {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
color: var(--accent2);
word-break: break-all;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.cmd-code.playwright {
color: var(--accent);
}
.copy-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
transition: all .15s;
flex-shrink: 0;
}
.copy-btn:hover {
border-color: var(--accent2);
color: var(--accent2);
}
.run-note {
color: var(--text-muted);
font-size: 13px;
margin-top: 16px;
padding-left: 20px;
border-left: 2px solid var(--border);
}
.run-note code {
color: var(--accent);
background: #1a1f2a;
padding: 2px 5px;
border-radius: 3px;
}
/* Cards */
.choice-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin: 40px 0 20px;
}
.choice-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 40px 30px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
transition: all .25s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.choice-card:hover {
border-color: var(--accent);
transform: translateY(-5px);
box-shadow: 0 10px 30px -10px rgba(88, 166, 255, 0.2);
}
.choice-card.jest:hover {
border-color: var(--accent2);
box-shadow: 0 10px 30px -10px rgba(63, 185, 80, 0.2);
}
.choice-card.playwright:hover {
border-color: var(--accent);
box-shadow: 0 10px 30px -10px rgba(88, 166, 255, 0.2);
}
.card-icon {
font-size: 64px;
line-height: 1;
margin-bottom: 10px;
}
.card-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
.card-title.jest { color: var(--accent2); }
.card-title.playwright { color: var(--accent); }
.card-desc {
color: var(--text-muted);
font-size: 15px;
line-height: 1.6;
margin-bottom: 20px;
max-width: 280px;
}
.stats {
display: flex;
gap: 15px;
margin-top: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 14px;
}
.stat {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 20px;
padding: 5px 15px;
}
.jest .stat { color: var(--accent2); }
.playwright .stat { color: var(--accent); }
.path-note {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
color: var(--text-muted);
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--border);
width: 100%;
}
.path-note code {
background: #1a1f2a;
padding: 2px 6px;
border-radius: 4px;
color: var(--accent4);
}
footer {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-muted);
font-family: 'IBM Plex Mono', monospace;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="top-badge">⬡ CRYPTOCALC</div>
<h1>Test <span>Documentation</span></h1>
<p class="subtitle">Complete test documentation — Unit Tests (Jest) & End-to-End Tests (Playwright)</p>
</header>
<!-- RUN INSTRUCTIONS - TOP -->
<div class="run-box">
<h2>Running the Tests</h2>
<div class="cmd-grid">
<div class="cmd-item">
<div class="cmd-label">All tests</div>
<div class="cmd-code">
<code>_run_Tests.bat</code>
<button class="copy-btn" onclick="copyCommand('_run_Tests.bat')">📋 Copy</button>
</div>
</div>
<div class="cmd-item">
<div class="cmd-label">Jest (unit tests)</div>
<div class="cmd-code">
<code>npm test</code>
<button class="copy-btn" onclick="copyCommand('npm test')">📋 Copy</button>
</div>
</div>
<div class="cmd-item">
<div class="cmd-label">Playwright (E2E)</div>
<div class="cmd-code playwright">
<code>npx playwright test tests/playwright/e2e/</code>
<button class="copy-btn" onclick="copyCommand('npx playwright test tests/playwright/e2e/ --config=tests/playwright/playwright.config.js')">📋 Copy</button>
</div>
</div>
<div class="cmd-item">
<div class="cmd-label">Playwright report</div>
<div class="cmd-code playwright">
<code>npx playwright show-report tests/playwright/playwright-report</code>
<button class="copy-btn" onclick="copyCommand('npx playwright show-report tests/playwright/playwright-report')">📋 Copy</button>
</div>
</div>
</div>
<div class="run-note">
<strong>📌 Note:</strong> E2E tests require the Electron application to be built or available in development mode.
The <code>_run_Tests.bat</code> script automatically handles the environment setup.
</div>
</div>
<!-- TEST DOCUMENTATION CARDS -->
<div class="choice-grid">
<!-- JEST CARD -->
<a class="choice-card jest" href="../jest/_doc/index.html">
<div class="card-icon">📋</div>
<div class="card-title jest">Jest</div>
<div class="card-desc">Unit tests for crypto functions, wallet generation, utilities and validation</div>
<div class="stats">
<span class="stat">16 files</span>
<span class="stat">588 tests</span>
</div>
<div class="path-note">
<code>../jest/_doc/index.html</code>
</div>
</a>
<!-- PLAYWRIGHT CARD -->
<a class="choice-card playwright" href="../playwright/_doc/index.html">
<div class="card-icon">🎭</div>
<div class="card-title playwright">Playwright</div>
<div class="card-desc">End-to-end tests for HD wallet workflows: generate, save, open, edit</div>
<div class="stats">
<span class="stat">2 files</span>
<span class="stat">6 scenarios</span>
</div>
<div class="path-note">
<code>../playwright/_doc/index.html</code>
</div>
</a>
</div>
<footer>
<span>Cryptocalc — Echopraxium with the collaboration of Claude AI</span>
<span>Generated 2026-03-11</span>
</footer>
</div>
<script>
function copyCommand(cmd) {
navigator.clipboard.writeText(cmd).then(() => {
const btn = event.target;
const originalText = btn.textContent;
btn.textContent = '✓ Copied!';
setTimeout(() => {
btn.textContent = originalText;
}, 1500);
});
}
</script>
</body>
</html>