costco-grocery-list/backend/public/test-ui.js

86 lines
2.7 KiB
JavaScript

function toggleTest(testId) {
const content = document.getElementById(`${testId}-content`);
const toggle = document.getElementById(`${testId}-toggle`);
if (content.classList.contains('expanded')) {
content.classList.remove('expanded');
toggle.classList.remove('expanded');
} else {
content.classList.add('expanded');
toggle.classList.add('expanded');
}
}
function expandAllTests() {
document.querySelectorAll('.test-content').forEach(content => {
content.classList.add('expanded');
});
document.querySelectorAll('.toggle-icon').forEach(icon => {
icon.classList.add('expanded');
});
}
function collapseAllTests() {
document.querySelectorAll('.test-content').forEach(content => {
content.classList.remove('expanded');
});
document.querySelectorAll('.toggle-icon').forEach(icon => {
icon.classList.remove('expanded');
});
}
function clearResults() {
renderTests();
document.getElementById('summary').style.display = 'none';
resetState();
}
function renderTests() {
const container = document.getElementById('testResults');
container.innerHTML = '';
tests.forEach((category, catIdx) => {
const categoryDiv = document.createElement('div');
categoryDiv.className = 'test-category';
const categoryHeader = document.createElement('h2');
categoryHeader.textContent = category.category;
categoryDiv.appendChild(categoryHeader);
category.tests.forEach((test, testIdx) => {
const testDiv = document.createElement('div');
testDiv.className = 'test-case';
testDiv.id = `test-${catIdx}-${testIdx}`;
const endpoint = typeof test.endpoint === 'function' ? test.endpoint() : test.endpoint;
testDiv.innerHTML = `
<div class="test-header" onclick="toggleTest('${testDiv.id}')">
<div class="test-name">
<span class="toggle-icon" id="${testDiv.id}-toggle">▶</span>
${test.name}
</div>
<div class="test-status pending">PENDING</div>
</div>
<div class="test-content" id="${testDiv.id}-content">
<div class="test-details">
<strong>${test.method}</strong> ${endpoint}
${test.expectFail ? ' <span style="color: #dc3545; font-weight: 600;">(Expected to fail)</span>' : ''}
${test.auth ? ' <span style="color: #0066cc; font-weight: 600;">🔒 Requires Auth</span>' : ''}
</div>
<div class="test-result" style="display: none;"></div>
</div>
`;
categoryDiv.appendChild(testDiv);
});
container.appendChild(categoryDiv);
});
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function () {
renderTests();
});