tegwick
de49c76ff9
This commit preserves work from a refactoring session that attempted to: ACHIEVEMENTS: - Implemented Robustness Principle with dual-mode error handling - Created sophisticated error detection for edit mode failures - Added comprehensive safety utilities in control-base.js - Successfully recovered JavaScript components from git history - Fixed template variable substitution and initialization flow - Added detailed documentation (REFACTORING_SESSION_REPORT.md) PROBLEMS: - Violated GUARDRAILS.md by embedding JavaScript in Python strings - Mixed old and new component systems without proper migration - Content rendering issues - no visible content despite initialization - Became overly complex trying to solve multiple problems simultaneously LESSONS LEARNED: - Focus is critical - solve one problem at a time - Respect architectural constraints (keep JS separate from Python) - Component migration requires explicit planning - Incremental testing prevents complexity accumulation RECOMMENDATION: Reset to working commit and take focused, incremental approach that respects GUARDRAILS.md while achieving core edit mode functionality. See REFACTORING_SESSION_REPORT.md for detailed analysis. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
145 lines
5.2 KiB
HTML
145 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="generator" content="Markitect 1.0.0">
|
|
<title>Guardrail Principle Test - JavaScript Controls</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.test-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
h1, h2, h3 { color: #333; }
|
|
.test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-content">
|
|
<h1>Guardrail Principle Test Page</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Test Section 1</h2>
|
|
<p>This is a test paragraph to verify that the status control can properly count and analyze document content.</p>
|
|
<p>Another paragraph with some <strong>formatted text</strong> and <em>emphasis</em>.</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>Test Subsection with Table</h3>
|
|
<table border="1">
|
|
<tr>
|
|
<th>Column 1</th>
|
|
<th>Column 2</th>
|
|
<th>Column 3</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Row 1, Cell 1</td>
|
|
<td>Row 1, Cell 2</td>
|
|
<td>Row 1, Cell 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Row 2, Cell 1</td>
|
|
<td>Row 2, Cell 2</td>
|
|
<td>Row 2, Cell 3</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>Test with Images</h3>
|
|
<p>Testing image counting (placeholder images):</p>
|
|
<img src="placeholder1.jpg" alt="Placeholder 1" style="width:50px;height:50px;">
|
|
<img src="placeholder2.jpg" alt="Placeholder 2" style="width:50px;height:50px;">
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>Test with Lists</h3>
|
|
<ul>
|
|
<li>List item 1</li>
|
|
<li>List item 2 with <code>inline code</code></li>
|
|
<li>List item 3</li>
|
|
</ul>
|
|
|
|
<ol>
|
|
<li>Ordered item 1</li>
|
|
<li>Ordered item 2</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<blockquote>
|
|
This is a blockquote to test various content types that the status control should analyze.
|
|
</blockquote>
|
|
|
|
<pre><code>
|
|
// This is a code block
|
|
function testFunction() {
|
|
return "Testing code block counting";
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
|
|
<!-- Load the debug system first -->
|
|
<script src="markitect/static/js/core/debug-system.js"></script>
|
|
|
|
<!-- Load control base -->
|
|
<script src="markitect/static/js/controls/control-base.js"></script>
|
|
|
|
<!-- Load specific controls -->
|
|
<script src="markitect/static/js/controls/status-control.js"></script>
|
|
|
|
<!-- Load main initialization -->
|
|
<script src="markitect/static/js/main.js"></script>
|
|
|
|
<script>
|
|
// Test the guardrail principles after page loads
|
|
window.addEventListener('load', function() {
|
|
console.log('=== Guardrail Principle Test Results ===');
|
|
|
|
// Test 1: Verify safe initialization
|
|
setTimeout(function() {
|
|
console.log('1. Safe Initialization Test:');
|
|
console.log(' - Controls initialized:', !!window.statusControl);
|
|
console.log(' - Error handling active:', typeof MarkitectMain?.safeLog === 'function');
|
|
|
|
// Test 2: Test control functionality
|
|
if (window.statusControl) {
|
|
console.log('2. Status Control Test:');
|
|
try {
|
|
window.statusControl.toggle();
|
|
console.log(' - Control toggle: SUCCESS');
|
|
|
|
// Test stats calculation with invalid inputs
|
|
const stats = window.statusControl.calculateStats();
|
|
console.log(' - Stats calculation: SUCCESS');
|
|
console.log(' - Document stats:', stats.document);
|
|
} catch (error) {
|
|
console.log(' - Control test failed:', error.message);
|
|
}
|
|
} else {
|
|
console.log('2. Status Control Test: SKIPPED (control not available)');
|
|
}
|
|
|
|
// Test 3: Test error boundaries
|
|
console.log('3. Error Boundary Test:');
|
|
try {
|
|
// Intentionally trigger potential issues
|
|
const fakeElement = { textContent: null };
|
|
if (window.statusControl?.safeTextExtraction) {
|
|
const result = window.statusControl.safeTextExtraction(fakeElement);
|
|
console.log(' - Safe text extraction handled invalid input: SUCCESS');
|
|
}
|
|
} catch (error) {
|
|
console.log(' - Error boundary test failed:', error.message);
|
|
}
|
|
|
|
console.log('=== Test Complete ===');
|
|
}, 500);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |