17 lines
3.8 KiB
HTML
17 lines
3.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>components.Dialog tests</title><script src="../../ui.js" components="Dialog"></script>
|
|
</head>
|
|
<body class="vh-100 overflow-hidden bg-body-tertiary"><div class="container-fluid h-100 py-3 d-flex flex-column">
|
|
<header class="d-flex align-items-center gap-2 mb-3 flex-shrink-0"><h1 class="h4 mb-0">components.Dialog</h1><span id="status" class="badge text-bg-secondary">未测试</span><button id="runAll" class="btn btn-primary btn-sm ms-auto" type="button">测试全部</button><span id="coverage" class="small text-body-secondary"></span></header><main class="flex-fill overflow-auto"></main><pre id="result" class="h-25 overflow-auto border rounded bg-body p-2 mt-3 mb-0 flex-shrink-0 small"></pre>
|
|
</div><script>
|
|
const cases = ['Dialog.show', 'Dialog.alert', 'Dialog.confirm', 'title', 'message', 'buttons', 'type']; const errors = []; const originalError = console.error; console.error = (...args) => { errors.push(args.map(String).join(' ')); originalError(...args) }; addEventListener('error', event => errors.push(String(event.message || event.error || event))); addEventListener('unhandledrejection', event => errors.push(String(event.reason || event))); const tick = () => new Promise(resolve => setTimeout(resolve, 500)); const assert = (r, feature, ok, message) => { r.assertions++; if (ok) r.passed++; else { r.failed++; r.failures.push({ feature, message }) } }
|
|
window.runTest = async () => { errors.length = 0; const r = { name: 'components.Dialog', status: 'running', assertions: 0, passed: 0, failed: 0, failures: [], consoleErrors: [], coverage: { tested: [], total: cases, percent: 0 } }
|
|
const shown = Dialog.show({ title: 'Delete', message: 'Remove user?', buttons: ['No', 'Yes'], type: 'danger' }); await tick(); let dialog = document.querySelector('Dialog'); assert(r, 'title', dialog.querySelector('.modal-header')?.textContent === 'Delete', 'title renders dialog title'); assert(r, 'message', dialog.querySelector('.modal-body')?.textContent.includes('Remove user?'), 'message renders dialog body text'); assert(r, 'buttons', [...dialog.querySelectorAll('.modal-footer button')].map(button => button.textContent).join(',') === 'No,Yes', 'buttons render supplied labels'); assert(r, 'type', dialog.querySelector('.modal-content')?.classList.contains('border-danger'), 'type applies the Bootstrap contextual type'); dialog.querySelectorAll('.modal-footer button')[1].click(); assert(r, 'Dialog.show', await shown === 2, 'show resolves with the selected 1-based button index')
|
|
const alert = Dialog.alert('Saved'); await tick(); dialog = document.querySelector('Dialog'); dialog.querySelector('.modal-footer button').click(); assert(r, 'Dialog.alert', await alert === 1, 'alert shows its message and resolves after closing')
|
|
const confirmYes = Dialog.confirm('Delete?'); await tick(); document.querySelector('Dialog').querySelectorAll('.modal-footer button')[1].click(); const confirmNo = Dialog.confirm('Keep?'); await tick(); document.querySelector('Dialog').querySelectorAll('.modal-footer button')[0].click(); assert(r, 'Dialog.confirm', await confirmYes === true && await confirmNo === false, 'confirm resolves to boolean for Confirm and Cancel')
|
|
r.coverage.tested = [...cases]; r.coverage.percent = 100; r.consoleErrors = [...errors]; r.status = r.failed || r.consoleErrors.length ? 'failed' : 'passed'; document.querySelector('#status').className = 'badge text-bg-' + (r.status === 'passed' ? 'success' : 'danger'); document.querySelector('#status').textContent = r.status === 'passed' ? '通过' : '失败'; document.querySelector('#coverage').textContent = '覆盖 100%'; document.querySelector('#result').textContent = JSON.stringify(r, null, 2); return r }; document.querySelector('#runAll').onclick = window.runTest
|
|
</script></body></html>
|