juanatsap
269 lines
9.1 KiB
HTML
269 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hyperscript Functions Test</title>
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
.test-section {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
background: #f9f9f9;
|
|
}
|
|
.test-result {
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
}
|
|
.test-result.pass {
|
|
background: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
.test-result.fail {
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
button {
|
|
margin: 0.5rem 0.5rem 0.5rem 0;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid #007bff;
|
|
background: #007bff;
|
|
color: white;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background: #0056b3;
|
|
}
|
|
.cv-container { transition: all 0.3s; }
|
|
.cv-container.theme-clean { background: #fff; }
|
|
.cv-container.hide-icons .icon { display: none; }
|
|
.cv-paper { transition: all 0.3s; }
|
|
.cv-paper.cv-long { height: 500px; }
|
|
.cv-paper.cv-short { height: 300px; }
|
|
.pdf-download-button, .print-button, #zoom-wrapper {
|
|
transition: all 0.2s;
|
|
padding: 0.5rem;
|
|
margin: 0.5rem;
|
|
display: inline-block;
|
|
}
|
|
.pdf-hover-sync { box-shadow: 0 0 10px rgba(0,123,255,0.5); }
|
|
.print-hover-sync { box-shadow: 0 0 10px rgba(40,167,69,0.5); }
|
|
.highlight { box-shadow: 0 0 15px rgba(255,193,7,0.7); }
|
|
#test-results { margin-top: 2rem; }
|
|
h2 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 0.5rem; }
|
|
h3 { color: #555; }
|
|
</style>
|
|
</head>
|
|
<body _="on load call initScrollBehavior()">
|
|
|
|
<h1>🧪 Hyperscript Functions Test Suite</h1>
|
|
|
|
<div id="test-results"></div>
|
|
|
|
<!-- Test DOM Elements -->
|
|
<div class="cv-container">
|
|
<div class="cv-paper cv-short"></div>
|
|
<span class="icon">📄</span>
|
|
</div>
|
|
|
|
<input type="checkbox" id="cv-length-toggle">
|
|
<input type="checkbox" id="menu-cv-length-toggle">
|
|
<input type="checkbox" id="icons-toggle">
|
|
<input type="checkbox" id="menu-icons-toggle">
|
|
<input type="checkbox" id="theme-toggle">
|
|
<input type="checkbox" id="menu-theme-toggle">
|
|
|
|
<button class="pdf-download-button">PDF 1</button>
|
|
<button class="pdf-download-button">PDF 2</button>
|
|
<button class="print-button">Print 1</button>
|
|
<button class="print-button">Print 2</button>
|
|
|
|
<div id="zoom-wrapper">Zoom Control</div>
|
|
|
|
<script type="text/hyperscript" src="static/hyperscript/functions._hs"></script>
|
|
|
|
<script type="text/hyperscript">
|
|
on load
|
|
-- Test Suite
|
|
set results to []
|
|
|
|
-- Test 1: toggleCVLength(true)
|
|
call toggleCVLength(true)
|
|
wait 100ms
|
|
set paper to the first .cv-paper
|
|
set checkbox to the first #cv-length-toggle
|
|
if paper.classList.contains('cv-long') and checkbox.checked is true and localStorage.getItem('cv-length') is 'long'
|
|
call results.push('✓ toggleCVLength(true) - PASS')
|
|
else
|
|
call results.push('✗ toggleCVLength(true) - FAIL')
|
|
end
|
|
|
|
-- Test 2: toggleCVLength(false)
|
|
call toggleCVLength(false)
|
|
wait 100ms
|
|
if paper.classList.contains('cv-short') and checkbox.checked is false and localStorage.getItem('cv-length') is 'short'
|
|
call results.push('✓ toggleCVLength(false) - PASS')
|
|
else
|
|
call results.push('✗ toggleCVLength(false) - FAIL')
|
|
end
|
|
|
|
-- Test 3: toggleIcons(false)
|
|
call toggleIcons(false)
|
|
wait 100ms
|
|
set container to the first .cv-container
|
|
set iconsCheckbox to the first #icons-toggle
|
|
if container.classList.contains('hide-icons') and iconsCheckbox.checked is false and localStorage.getItem('cv-icons') is 'hide'
|
|
call results.push('✓ toggleIcons(false) - PASS')
|
|
else
|
|
call results.push('✗ toggleIcons(false) - FAIL')
|
|
end
|
|
|
|
-- Test 4: toggleIcons(true)
|
|
call toggleIcons(true)
|
|
wait 100ms
|
|
if not container.classList.contains('hide-icons') and iconsCheckbox.checked is true and localStorage.getItem('cv-icons') is 'show'
|
|
call results.push('✓ toggleIcons(true) - PASS')
|
|
else
|
|
call results.push('✗ toggleIcons(true) - FAIL')
|
|
end
|
|
|
|
-- Test 5: toggleTheme(true)
|
|
call toggleTheme(true)
|
|
wait 100ms
|
|
set themeCheckbox to the first #theme-toggle
|
|
if container.classList.contains('theme-clean') and themeCheckbox.checked is true and localStorage.getItem('cv-theme') is 'clean'
|
|
call results.push('✓ toggleTheme(true) - PASS')
|
|
else
|
|
call results.push('✗ toggleTheme(true) - FAIL')
|
|
end
|
|
|
|
-- Test 6: toggleTheme(false)
|
|
call toggleTheme(false)
|
|
wait 100ms
|
|
if not container.classList.contains('theme-clean') and themeCheckbox.checked is false and localStorage.getItem('cv-theme') is 'default'
|
|
call results.push('✓ toggleTheme(false) - PASS')
|
|
else
|
|
call results.push('✗ toggleTheme(false) - FAIL')
|
|
end
|
|
|
|
-- Test 7: syncPdfHover(true)
|
|
call syncPdfHover(true)
|
|
wait 100ms
|
|
set pdfButton to the first .pdf-download-button
|
|
if pdfButton.classList.contains('pdf-hover-sync')
|
|
call results.push('✓ syncPdfHover(true) - PASS')
|
|
else
|
|
call results.push('✗ syncPdfHover(true) - FAIL')
|
|
end
|
|
|
|
-- Test 8: syncPdfHover(false)
|
|
call syncPdfHover(false)
|
|
wait 100ms
|
|
if not pdfButton.classList.contains('pdf-hover-sync')
|
|
call results.push('✓ syncPdfHover(false) - PASS')
|
|
else
|
|
call results.push('✗ syncPdfHover(false) - FAIL')
|
|
end
|
|
|
|
-- Test 9: syncPrintHover(true)
|
|
call syncPrintHover(true)
|
|
wait 100ms
|
|
set printButton to the first .print-button
|
|
if printButton.classList.contains('print-hover-sync')
|
|
call results.push('✓ syncPrintHover(true) - PASS')
|
|
else
|
|
call results.push('✗ syncPrintHover(true) - FAIL')
|
|
end
|
|
|
|
-- Test 10: syncPrintHover(false)
|
|
call syncPrintHover(false)
|
|
wait 100ms
|
|
if not printButton.classList.contains('print-hover-sync')
|
|
call results.push('✓ syncPrintHover(false) - PASS')
|
|
else
|
|
call results.push('✗ syncPrintHover(false) - FAIL')
|
|
end
|
|
|
|
-- Test 11: highlightZoomControl(true)
|
|
call highlightZoomControl(true)
|
|
wait 100ms
|
|
set zoomWrapper to the first #zoom-wrapper
|
|
if zoomWrapper.classList.contains('highlight')
|
|
call results.push('✓ highlightZoomControl(true) - PASS')
|
|
else
|
|
call results.push('✗ highlightZoomControl(true) - FAIL')
|
|
end
|
|
|
|
-- Test 12: highlightZoomControl(false)
|
|
call highlightZoomControl(false)
|
|
wait 100ms
|
|
if not zoomWrapper.classList.contains('highlight')
|
|
call results.push('✓ highlightZoomControl(false) - PASS')
|
|
else
|
|
call results.push('✗ highlightZoomControl(false) - FAIL')
|
|
end
|
|
|
|
-- Display results
|
|
set resultsDiv to #test-results
|
|
set html to '<h2>Test Results</h2>'
|
|
|
|
set passCount to 0
|
|
set failCount to 0
|
|
|
|
for result in results
|
|
if result.includes('PASS')
|
|
set html to html + '<div class="test-result pass">' + result + '</div>'
|
|
set passCount to passCount + 1
|
|
else
|
|
set html to html + '<div class="test-result fail">' + result + '</div>'
|
|
set failCount to failCount + 1
|
|
end
|
|
end
|
|
|
|
set summary to '<div class="test-section"><h3>Summary: ' + passCount + ' passed, ' + failCount + ' failed out of 12 tests</h3></div>'
|
|
set resultsDiv's innerHTML to summary + html
|
|
end
|
|
</script>
|
|
|
|
<div class="test-section">
|
|
<h2>📋 Manual Test Controls</h2>
|
|
<p>Use these buttons to manually test each function:</p>
|
|
|
|
<h3>Toggle Functions:</h3>
|
|
<button _="on click call toggleCVLength(true)">Toggle CV Long</button>
|
|
<button _="on click call toggleCVLength(false)">Toggle CV Short</button>
|
|
<button _="on click call toggleIcons(true)">Show Icons</button>
|
|
<button _="on click call toggleIcons(false)">Hide Icons</button>
|
|
<button _="on click call toggleTheme(true)">Clean Theme</button>
|
|
<button _="on click call toggleTheme(false)">Default Theme</button>
|
|
|
|
<h3>Hover Sync Functions:</h3>
|
|
<button _="on click call syncPdfHover(true)">Sync PDF Hover ON</button>
|
|
<button _="on click call syncPdfHover(false)">Sync PDF Hover OFF</button>
|
|
<button _="on click call syncPrintHover(true)">Sync Print Hover ON</button>
|
|
<button _="on click call syncPrintHover(false)">Sync Print Hover OFF</button>
|
|
<button _="on click call highlightZoomControl(true)">Highlight Zoom ON</button>
|
|
<button _="on click call highlightZoomControl(false)">Highlight Zoom OFF</button>
|
|
|
|
<h3>Other Functions:</h3>
|
|
<button _="on click call printFriendly()">Test Print Friendly</button>
|
|
<button _="on click call handleScroll()">Test Handle Scroll</button>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|