|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Test Runner | MedMIS</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.test-card { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.test-card:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.status-running { |
|
|
background-color: #f59e0b20; |
|
|
color: #f59e0b; |
|
|
} |
|
|
.status-passed { |
|
|
background-color: #10b98120; |
|
|
color: #10b981; |
|
|
} |
|
|
.status-failed { |
|
|
background-color: #ef444420; |
|
|
color: #ef4444; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="mb-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<button onclick="history.back()" class="mr-4 p-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition"> |
|
|
<i data-feather="arrow-left" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold">Test Runner</h1> |
|
|
<p class="text-gray-300">Automated testing for MedMIS workflows</p> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="list" class="w-5 h-5 mr-2"></i> |
|
|
Test Scenarios |
|
|
</h2> |
|
|
<div class="space-y-3" id="testScenarios"> |
|
|
<div class="test-card bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium">Patient Flow</h3> |
|
|
<p class="text-sm text-gray-400">Registration → Queue → Study → Report</p> |
|
|
</div> |
|
|
<button class="run-test bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm" data-test="patientFlow"> |
|
|
Run |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="test-card bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium">SLA Compliance</h3> |
|
|
<p class="text-sm text-gray-400">Priority-based timing and scoring</p> |
|
|
</div> |
|
|
<button class="run-test bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm" data-test="slaCompliance"> |
|
|
Run |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="test-card bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium">Integration Flow</h3> |
|
|
<p class="text-sm text-gray-400">Service-to-service event routing</p> |
|
|
</div> |
|
|
<button class="run-test bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm" data-test="integrationFlow"> |
|
|
Run |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 mr-2"></i> |
|
|
Test Results |
|
|
</h2> |
|
|
<div id="testResults" class="space-y-3"> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">Last Run:</span> |
|
|
<span class="text-gray-400">Not run yet</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="font-medium">Status:</span> |
|
|
<span class="text-gray-400">Idle</span> |
|
|
</div> |
|
|
</div> |
|
|
<div id="testLogs" class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto text-sm font-mono"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="terminal" class="w-5 h-5 mr-2"></i> |
|
|
API Test Console |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-gray-300 text-sm mb-1">Method</label> |
|
|
<select id="apiMethod" class="w-full bg-gray-700 rounded-lg px-3 py-2"> |
|
|
<option>GET</option> |
|
|
<option>POST</option> |
|
|
<option>PUT</option> |
|
|
<option>DELETE</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="md:col-span-3"> |
|
|
<label class="block text-gray-300 text-sm mb-1">Endpoint</label> |
|
|
<div class="flex"> |
|
|
<span class="bg-gray-700 rounded-l-lg px-3 py-2">/api/</span> |
|
|
<input type="text" id="apiEndpoint" class="flex-1 bg-gray-700 rounded-r-lg px-3 py-2" placeholder="endpoint"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-300 text-sm mb-1">Request Body</label> |
|
|
<textarea id="apiBody" class="w-full bg-gray-700 rounded-lg px-3 py-2 h-32 font-mono text-sm" placeholder="JSON body"></textarea> |
|
|
</div> |
|
|
<button id="runApiTest" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition"> |
|
|
Execute API Test |
|
|
</button> |
|
|
<div id="apiResponse" class="mt-4 bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto text-sm font-mono hidden"> |
|
|
<div class="text-gray-400">Response will appear here...</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="database" class="w-5 h-5 mr-2"></i> |
|
|
Database Configuration |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h3 class="font-medium mb-2">Test Database</h3> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span>Current:</span> |
|
|
<span class="font-mono bg-gray-800 px-2 py-1 rounded">SQLite</span> |
|
|
</div> |
|
|
<button id="switchDb" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition mt-2"> |
|
|
Switch to PostgreSQL |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium mb-2">Sample Data</h3> |
|
|
<div class="space-y-2"> |
|
|
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition text-left flex items-center"> |
|
|
<i data-feather="user" class="w-4 h-4 mr-2"></i> |
|
|
Load Test Patients |
|
|
</button> |
|
|
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition text-left flex items-center"> |
|
|
<i data-feather="book" class="w-4 h-4 mr-2"></i> |
|
|
Load Test Studies |
|
|
</button> |
|
|
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition text-left flex items-center"> |
|
|
<i data-feather="file-text" class="w-4 h-4 mr-2"></i> |
|
|
Load Test Reports |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.run-test').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const testName = this.dataset.test; |
|
|
const testLogs = document.getElementById('testLogs'); |
|
|
testLogs.innerHTML = ''; |
|
|
|
|
|
|
|
|
const testResults = document.getElementById('testResults'); |
|
|
testResults.querySelector('.bg-gray-700 div:last-child span').textContent = 'Running'; |
|
|
testResults.querySelector('.bg-gray-700 div:last-child span').className = 'text-yellow-400'; |
|
|
|
|
|
logMessage(`Starting ${testName} test...`); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
switch(testName) { |
|
|
case 'patientFlow': |
|
|
simulatePatientFlowTest(); |
|
|
break; |
|
|
case 'slaCompliance': |
|
|
simulateSlaTest(); |
|
|
break; |
|
|
case 'integrationFlow': |
|
|
simulateIntegrationTest(); |
|
|
break; |
|
|
} |
|
|
}, 500); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function logMessage(message) { |
|
|
const testLogs = document.getElementById('testLogs'); |
|
|
const line = document.createElement('div'); |
|
|
line.textContent = `[${new Date().toLocaleTimeString()}] ${message}`; |
|
|
testLogs.appendChild(line); |
|
|
testLogs.scrollTop = testLogs.scrollHeight; |
|
|
} |
|
|
|
|
|
function simulatePatientFlowTest() { |
|
|
logMessage("1. Creating test patient..."); |
|
|
setTimeout(() => { |
|
|
logMessage("✓ Patient created (ID: PT-123456)"); |
|
|
|
|
|
logMessage("2. Adding to queue..."); |
|
|
setTimeout(() => { |
|
|
logMessage("✓ Added to queue (Q-789012)"); |
|
|
|
|
|
logMessage("3. Starting study..."); |
|
|
setTimeout(() => { |
|
|
logMessage("✓ Study created (ST-345678)"); |
|
|
|
|
|
logMessage("4. Generating report..."); |
|
|
setTimeout(() => { |
|
|
logMessage("✓ Report finalized (RP-901234)"); |
|
|
|
|
|
logMessage("5. Checking scores..."); |
|
|
setTimeout(() => { |
|
|
logMessage("✓ Scores updated (+20 radiologist, +100 referrer)"); |
|
|
|
|
|
|
|
|
const testResults = document.getElementById('testResults'); |
|
|
testResults.querySelector('.bg-gray-700 div:first-child span').textContent = new Date().toLocaleString(); |
|
|
testResults.querySelector('.bg-gray-700 div:last-child span').textContent = 'Passed'; |
|
|
testResults.querySelector('.bg-gray-700 div:last-child span').className = 'text-green-400'; |
|
|
|
|
|
logMessage("✅ Test completed successfully"); |
|
|
}, 800); |
|
|
}, 800); |
|
|
}, 800); |
|
|
}, 800); |
|
|
}, 800); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('runApiTest').addEventListener('click', function() { |
|
|
const method = document.getElementById('apiMethod').value; |
|
|
const endpoint = document.getElementById('apiEndpoint').value; |
|
|
const body = document.getElementById('apiBody').value; |
|
|
const responseDiv = document.getElementById('apiResponse'); |
|
|
|
|
|
responseDiv.classList.remove('hidden'); |
|
|
responseDiv.innerHTML = '<div class="text-gray-400">Testing endpoint...</div>'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
let response; |
|
|
try { |
|
|
const parsedBody = body ? JSON.parse(body) : {}; |
|
|
response = { |
|
|
status: 200, |
|
|
data: { |
|
|
method, |
|
|
endpoint, |
|
|
body: parsedBody, |
|
|
timestamp: new Date().toISOString(), |
|
|
traceId: 't-' + Math.random().toString(36).substr(2, 8) |
|
|
} |
|
|
}; |
|
|
|
|
|
responseDiv.innerHTML = `<div class="text-green-400 mb-2">Request successful (200)</div> |
|
|
<pre>${JSON.stringify(response, null, 2)}</pre>`; |
|
|
} catch (e) { |
|
|
responseDiv.innerHTML = `<div class="text-red-400 mb-2">Error: ${e.message}</div>`; |
|
|
} |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('switchDb').addEventListener('click', function() { |
|
|
const button = this; |
|
|
const currentDb = button.textContent.includes('PostgreSQL') ? 'PostgreSQL' : 'SQLite'; |
|
|
const newDb = currentDb === 'SQLite' ? 'PostgreSQL' : 'SQLite'; |
|
|
|
|
|
logMessage(`Switching database from ${currentDb} to ${newDb}...`); |
|
|
setTimeout(() => { |
|
|
button.textContent = `Switch to ${currentDb}`; |
|
|
button.parentElement.querySelector('span.font-mono').textContent = newDb; |
|
|
logMessage(`✓ Database switched to ${newDb}`); |
|
|
}, 1500); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
