131 lines
4.9 KiB
HTML
131 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Framework Test</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.test-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
|
|
.success { color: green; }
|
|
.error { color: red; }
|
|
button { margin: 5px; padding: 10px; }
|
|
input { margin: 5px; padding: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>SPORE UI Framework Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Framework Initialization Test</h2>
|
|
<div id="framework-status">Checking...</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Event Bus Test</h2>
|
|
<button id="publish-btn">Publish Test Event</button>
|
|
<div id="event-log"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>View Model Test</h2>
|
|
<input type="text" id="name-input" placeholder="Enter name">
|
|
<button id="update-btn">Update Name</button>
|
|
<div id="name-display">Name: (not set)</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Component Test</h2>
|
|
<div id="test-component">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
<button id="refresh-btn">Refresh Component</button>
|
|
</div>
|
|
|
|
<script src="framework.js"></script>
|
|
<script>
|
|
// Test framework initialization
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('Testing framework...');
|
|
|
|
// Test 1: Framework initialization
|
|
if (window.app && window.app.eventBus) {
|
|
document.getElementById('framework-status').innerHTML =
|
|
'<span class="success">✅ Framework initialized successfully</span>';
|
|
} else {
|
|
document.getElementById('framework-status').innerHTML =
|
|
'<span class="error">❌ Framework failed to initialize</span>';
|
|
}
|
|
|
|
// Test 2: Event Bus
|
|
const eventLog = document.getElementById('event-log');
|
|
const unsubscribe = window.app.eventBus.subscribe('test-event', (data) => {
|
|
eventLog.innerHTML += `<div>📡 Event received: ${JSON.stringify(data)}</div>`;
|
|
});
|
|
|
|
document.getElementById('publish-btn').addEventListener('click', () => {
|
|
window.app.eventBus.publish('test-event', {
|
|
message: 'Hello from test!',
|
|
timestamp: new Date().toISOString()
|
|
});
|
|
});
|
|
|
|
// Test 3: View Model
|
|
const testVM = new ViewModel();
|
|
testVM.setEventBus(window.app.eventBus);
|
|
|
|
testVM.subscribe('name', (value) => {
|
|
document.getElementById('name-display').textContent = `Name: ${value || '(not set)'}`;
|
|
});
|
|
|
|
document.getElementById('update-btn').addEventListener('click', () => {
|
|
const name = document.getElementById('name-input').value;
|
|
testVM.set('name', name);
|
|
});
|
|
|
|
// Test 4: Component
|
|
class TestComponent extends Component {
|
|
constructor(container, viewModel, eventBus) {
|
|
super(container, viewModel, eventBus);
|
|
}
|
|
|
|
setupEventListeners() {
|
|
const refreshBtn = document.getElementById('refresh-btn');
|
|
if (refreshBtn) {
|
|
this.addEventListener(refreshBtn, 'click', this.handleRefresh.bind(this));
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const data = this.viewModel ? this.viewModel.get('data') : null;
|
|
if (data) {
|
|
this.setHTML('', `<div class="success">✅ Component data: ${data}</div>`);
|
|
} else {
|
|
this.setHTML('', `<div class="loading">Loading component data...</div>`);
|
|
}
|
|
}
|
|
|
|
handleRefresh() {
|
|
if (this.viewModel) {
|
|
this.viewModel.set('data', `Refreshed at ${new Date().toLocaleTimeString()}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
const testComponentVM = new ViewModel();
|
|
testComponentVM.setEventBus(window.app.eventBus);
|
|
testComponentVM.set('data', 'Initial component data');
|
|
|
|
const testComponent = new TestComponent(
|
|
document.getElementById('test-component'),
|
|
testComponentVM,
|
|
window.app.eventBus
|
|
);
|
|
|
|
testComponent.mount();
|
|
|
|
console.log('Framework test completed');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |