fast-md5-web
Version:
A TypeScript project with tsup bundler for Rust WASM MD5 calculation
98 lines (83 loc) • 4.75 kB
HTML
<html>
<head>
<title>Visual MD5 Test</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.test-result { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
.match { background-color: #d4edda; }
.mismatch { background-color: #f8d7da; }
.loading { color: #666; }
.error { color: red; }
</style>
</head>
<body>
<h1>Visual MD5 Test Results</h1>
<div id="results">Loading...</div>
<script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js"></script>
<script type="module">
import init, { Md5Calculator } from './wasm_md5.js';
const resultsDiv = document.getElementById('results');
function addResult(testName, wasmResult, sparkResult, expected) {
const div = document.createElement('div');
div.className = 'test-result';
const match = wasmResult === sparkResult && wasmResult === expected;
div.classList.add(match ? 'match' : 'mismatch');
div.innerHTML = `
<h3>${testName}</h3>
<p><strong>WASM Result:</strong> ${wasmResult}</p>
<p><strong>Spark Result:</strong> ${sparkResult}</p>
<p><strong>Expected:</strong> ${expected}</p>
<p><strong>Status:</strong> ${match ? '✅ PASS' : '❌ FAIL'}</p>
<p><strong>WASM vs Expected:</strong> ${wasmResult === expected ? '✅' : '❌'}</p>
<p><strong>Spark vs Expected:</strong> ${sparkResult === expected ? '✅' : '❌'}</p>
<p><strong>WASM vs Spark:</strong> ${wasmResult === sparkResult ? '✅' : '❌'}</p>
`;
resultsDiv.appendChild(div);
}
async function runTests() {
try {
resultsDiv.innerHTML = '<div class="loading">Initializing WASM...</div>';
await init();
const calculator = new Md5Calculator();
resultsDiv.innerHTML = '<div class="loading">Running tests...</div>';
// Test 1: Empty data
const emptyData = new Uint8Array(0);
const wasmEmpty = calculator.calculate_md5_async(emptyData, 32);
const sparkEmpty = SparkMD5.ArrayBuffer.hash(emptyData.buffer);
addResult('Empty Data', wasmEmpty, sparkEmpty, 'd41d8cd98f00b204e9800998ecf8427e');
// Test 2: "hello" string
const helloData = new TextEncoder().encode('hello');
const wasmHello = calculator.calculate_md5_async(helloData, 32);
const sparkHello = SparkMD5.ArrayBuffer.hash(helloData.buffer);
addResult('String "hello"', wasmHello, sparkHello, '5d41402abc4b2a76b9719d911017c592');
// Test 3: Single byte 'A'
const aData = new Uint8Array([65]); // 'A'
const wasmA = calculator.calculate_md5_async(aData, 32);
const sparkA = SparkMD5.ArrayBuffer.hash(aData.buffer);
addResult('Single Byte \'A\'', wasmA, sparkA, '7fc56270e7a70fa81a5935b72eacbe29');
// Test 4: "hello world" string
const helloWorldData = new TextEncoder().encode('hello world');
const wasmHelloWorld = calculator.calculate_md5_async(helloWorldData, 32);
const sparkHelloWorld = SparkMD5.ArrayBuffer.hash(helloWorldData.buffer);
addResult('String "hello world"', wasmHelloWorld, sparkHelloWorld, '5eb63bbbe01eeed093cb22bb8f5acdc3');
// Test 5: Data inspection
const inspectionDiv = document.createElement('div');
inspectionDiv.className = 'test-result';
inspectionDiv.innerHTML = `
<h3>Data Inspection</h3>
<p><strong>Empty data length:</strong> ${emptyData.length}</p>
<p><strong>Hello data bytes:</strong> [${Array.from(helloData).join(', ')}]</p>
<p><strong>A data bytes:</strong> [${Array.from(aData).join(', ')}]</p>
<p><strong>Hello world data bytes:</strong> [${Array.from(helloWorldData).join(', ')}]</p>
`;
resultsDiv.appendChild(inspectionDiv);
} catch (error) {
resultsDiv.innerHTML = `<div class="error">Test failed: ${error.message}</div>`;
console.error('Test failed:', error);
}
}
runTests();
</script>
</body>
</html>