104 lines
4.8 KiB
HTML
104 lines
4.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>AutoForm Comprehensive Diagnostic</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"@web/state": "../../state/src/index.js",
|
||
|
|
"@web/base": "../../base/src/index.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script type="module">
|
||
|
|
import { Component, NewState, RefreshState } from '@web/state';
|
||
|
|
import '@web/base';
|
||
|
|
window.RefreshState = RefreshState;
|
||
|
|
window.NewState = NewState;
|
||
|
|
|
||
|
|
window.DiagnosticState = {
|
||
|
|
data: NewState({
|
||
|
|
text: 'initial',
|
||
|
|
tags: ['A', 'B'],
|
||
|
|
area: 'long text',
|
||
|
|
sel: 'v1'
|
||
|
|
})
|
||
|
|
};
|
||
|
|
|
||
|
|
const log = (msg, color = 'black') => {
|
||
|
|
const pre = document.getElementById('log');
|
||
|
|
const div = document.createElement('div');
|
||
|
|
div.style.color = color;
|
||
|
|
div.textContent = msg;
|
||
|
|
pre.appendChild(div);
|
||
|
|
console.log(msg);
|
||
|
|
};
|
||
|
|
|
||
|
|
window.runFullDiagnostic = async () => {
|
||
|
|
document.getElementById('log').innerHTML = '';
|
||
|
|
const form = document.getElementById('diagForm');
|
||
|
|
if (!form.state) form.state = NewState({ schema: [] });
|
||
|
|
|
||
|
|
const assert = (condition, msg) => {
|
||
|
|
if (condition) log('✅ ' + msg, 'green');
|
||
|
|
else log('❌ ' + msg, 'red');
|
||
|
|
};
|
||
|
|
|
||
|
|
log('--- STEP 1: Text Input ---');
|
||
|
|
form.state.schema = [{ id: 'text', name: 'text', label: '', type: 'text' }];
|
||
|
|
form.data = DiagnosticState.data;
|
||
|
|
RefreshState(form);
|
||
|
|
await new Promise(r => setTimeout(r, 100));
|
||
|
|
assert(form.querySelector('input[type="text"]') !== null, 'Text input rendered');
|
||
|
|
assert(form.querySelector('input[type="text"]').value === 'initial', 'Text value correct');
|
||
|
|
|
||
|
|
log('--- STEP 2: Switch to TextArea ---');
|
||
|
|
form.state.schema = [{ id: 'area', name: 'area', label: '', type: 'textarea' }];
|
||
|
|
RefreshState(form);
|
||
|
|
await new Promise(r => setTimeout(r, 100));
|
||
|
|
assert(form.querySelector('textarea') !== null, 'TextArea rendered');
|
||
|
|
assert(form.querySelector('input[type="text"]') === null || form.querySelector('input[type="text"]').offsetParent === null, 'Text input hidden/removed');
|
||
|
|
assert(form.querySelector('textarea').value === 'long text', 'TextArea value correct');
|
||
|
|
|
||
|
|
log('--- STEP 3: Switch to TagsInput ---');
|
||
|
|
form.state.schema = [{ id: 'tags', name: 'tags', label: '', type: 'TagsInput' }];
|
||
|
|
RefreshState(form);
|
||
|
|
await new Promise(r => setTimeout(r, 100));
|
||
|
|
assert(form.querySelector('TagsInput') !== null, 'TagsInput rendered');
|
||
|
|
assert(form.querySelector('textarea') === null || form.querySelector('textarea').offsetParent === null, 'TextArea hidden/removed');
|
||
|
|
const tagButtons = form.querySelectorAll('TagsInput button');
|
||
|
|
assert(tagButtons.length === 2, 'Tags count correct: ' + tagButtons.length);
|
||
|
|
assert(tagButtons[0].textContent === 'A', 'Tag A rendered');
|
||
|
|
|
||
|
|
log('--- STEP 4: Test Data Persistence ---');
|
||
|
|
const input = form.querySelector('TagsInput input');
|
||
|
|
input.value = 'C';
|
||
|
|
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
|
||
|
|
await new Promise(r => setTimeout(r, 100));
|
||
|
|
assert(DiagnosticState.data.tags.includes('C'), 'Data saved to proxy: ' + DiagnosticState.data.tags);
|
||
|
|
|
||
|
|
log('--- STEP 5: Switch back to Text & Verify ---');
|
||
|
|
form.state.schema = [{ id: 'text', name: 'text', label: '', type: 'text' }];
|
||
|
|
RefreshState(form);
|
||
|
|
await new Promise(r => setTimeout(r, 100));
|
||
|
|
const textInput = form.querySelector('input[type="text"]');
|
||
|
|
textInput.value = 'modified';
|
||
|
|
textInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||
|
|
assert(DiagnosticState.data.text === 'modified', 'Text data saved: ' + DiagnosticState.data.text);
|
||
|
|
|
||
|
|
log('--- DIAGNOSTIC COMPLETE ---');
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body class="p-4">
|
||
|
|
<h3>AutoForm Comprehensive Diagnostic</h3>
|
||
|
|
<div style="width: 400px; border: 2px solid blue; min-height: 100px; padding: 10px;" class="bg-light">
|
||
|
|
<AutoForm id="diagForm" inline></AutoForm>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary mt-3" onclick="runFullDiagnostic()">RUN COMPREHENSIVE DIAGNOSTIC</button>
|
||
|
|
<div id="log" class="mt-4 p-3 border bg-dark text-light" style="font-family: monospace; white-space: pre-wrap; height: 300px; overflow-y: auto;"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|