@seanox/aspect-js
Version:
full stack JavaScript framework for SPAs incl. reactivity rendering, mvc / mvvm, models, expression language, datasource, routing, paths, unit test and some more
354 lines (324 loc) • 10.9 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
overflow: hidden;
}
body > table {
border-collapse: collapse;
height: 100%;
left: 0px;
overflow: hidden;
position: absolute;
top: 0px;
width: 100%;
}
body > table td {
border: 0px solid;
margin: 0px;
padding: 0px;
position: relative;
vertical-align: top;
width: 40%;
}
body > table td:first-child {
width: 20%;
}
body > table th {
background: #F0F0F0;
height: 3em;
}
body > table th + th,
body > table td + td {
border-left: 3px solid #FFFFFF;
}
body > table th {
border-bottom: 3px solid #FFFFFF;
}
body > table td > * {
overflow: auto;
}
body > table td iframe {
border: 0px solid;
height: 100%;
position: absolute;
top: 0px; left:0px;
width: 100%;
}
#progress {
height: 100%;
position: absolute;
top: 0em;
left: 0em;
width: 100%;
}
#progress > div {
border-left: 0.5em solid;
border-left-color: #C0C0C0;
cursor: pointer;
margin: 0em;
padding: 0.75em;
}
#progress > div.progress {
border-left-color: #00A0F0;
}
#progress > div.successful {
border-left-color: #70A040;
}
#progress > div.failed {
border-left-color: #FF0000;
}
#progress > div + div {
border-top: 1px dotted #909090;
margin-top: 1px;
}
#progress > div span ~ span {
color: #C0C0C0;
}
#progress > div.failed span ~ span {
color: #FF0000;
}
#output {
height: 100%;
position:absolute;
top: 0em;
left: 0em;
width: 100%;
}
#output pre {
border-left: 0.5em solid;
border-left-color: #C0C0C0;
margin: 0em;
padding: 0.75em;
}
#output pre + pre {
margin-top: 1px;
border-top: 1px dotted #909090;
}
#output pre.error {
border-left-color: #FF0000;
}
#output pre.info {
border-left-color: #00A0F0;
}
#output pre.warn {
border-left-color: #FFA000;
}
</style>
<script type="text/test-cases">
compatibility.html
composite_render_benchmark.html
expression_benchmark.html
scripting_parse_benchmark.html
composite_docking.html
composite_events_http.html
composite_events_error.html
composite_events_module.html
composite_events_render.html
composite_module.html
composite_module_namespace.html
composite_module_namespace_mount.html
composite_module_namespace_scopes.html
composite_mount_models.html
composite_mount_refresh.html
composite_mount_synchronization.html
composite_mount.html
composite_object_lookup.html
composite_render_attributes.html
composite_render_condition.html
composite_render_customize.html
composite_render_customize_interceptors.html
composite_render_customize_macros.html
composite_render_customize_selectors.html
composite_render_events.html
composite_render_hardening.html
composite_render_export.html
composite_render_import.html
composite_render_import_datasource.html
composite_render_interval.html
composite_render_iterate.html
composite_render_output.html
composite_render_output_datasource.html
composite_render_param.html
composite_render_recursive.html
composite_render_release.html
composite_render_script.html
composite_render_text.html
composite_render_validate.html
composite_render_validate_message.html
composite_render_value.html
datasource_collect.html
datasource_locales.html
expression_element.html
expression_lookup.html
expression_parse.html
expression_syntax.html
extension_namespace.html
extension_namespace_models.html
extension_string_decodeBase64.html
extension_string_encodeBase64.html
extension_string_hashcode.html
extension_string_unescape.html
extension_window_serial.html
messages_locales.html
messages_locales_module.html
reactive_attributes.html
reactive_attributes_custom.html
reactive_condition.html
reactive_import.html
reactive_input_events.html
reactive_iterate.html
reactive_module.html
reactive_objects.html
reactive_output.html
reactive_recursion.html
reactive_routing.html
reactive_text.html
routing_approve.html
routing_active_on.html
routing_active_off.html
routing_interceptors.html
routing_path_normalize.html
routing_route.html
scripting_syntax.html
</script>
<script src="aspect-js.js"></script>
<script type="text/javascript">
let queue;
let faults;
let lock;
window.addEventListener("load", () => {
queue = document.querySelector("script[type='text/test-cases']");
queue = queue.textContent.trim().split(/\s+/);
queue = queue.filter(entry => !entry.match(/^\*/));
const content = "<div id=\"%1\">%2<br><meter></meter> <span>-</span>/<span>-</span></div>";
queue.forEach((entry) => {
let text = content;
text = text.replace(/%1/g, entry.hashCode());
text = text.replace(/%2/g, entry);
document.querySelector("#progress").innerHTML += text;
});
lock = true;
const tests = document.querySelectorAll("#progress div[id]");
tests.forEach((test) => {
test.addEventListener("click", (event) => {
if (lock)
return;
const test = event.currentTarget.textContent.match(/^\S+/);
if (event.ctrlKey
|| event.shiftKey) {
let target = location.href.replace(/[^\/]+$/, test);
target = window.open(target, "_extern_test");
if (target)
target.focus();
return;
}
faults = false;
document.querySelector("#output").innerHTML = "";
loadTest(test);
});
});
loadTest(queue.shift());
});
const locateTest = function() {
return String(document.querySelector("iframe").getAttribute("src").match(/^[^\?]+/));
};
const loadTest = function(test) {
outputMessage("info", "Loading " + test);
document.querySelector("iframe").setAttribute("src", test || queue.shift() + "?" + Date.now());
};
const performTest = function(event, status) {
let test = locateTest();
test = document.querySelector("#" + test.hashCode());
test.scrollIntoView(false);
const meter = test.querySelector("meter");
meter.max = status.queue.size;
meter.value = status.queue.progress;
test.querySelector("span").textContent = status.queue.progress;
test.querySelector("span + span").textContent = status.queue.faults;
test.className = status.queue.faults ? "failed" : "successful";
if (status.queue.faults)
faults = true;
};
const outputMessage = function(event, message) {
const output = document.querySelector("#output");
const content = document.createElement("pre");
content.className = event;
content.textContent = String(message || "").trim();
if (content.textContent)
output.appendChild(content);
output.innerHTML = output.innerHTML.trim();
output.scrollTop = output.scrollHeight;
};
Test.activate();
Test.listen(Test.EVENT_START, (event, status) => {
outputMessage("info", "Start of " + locateTest()
+ "\r\n\t" + status.queue.size + " tests found");
});
Test.listen(Test.EVENT_PERFORM, (event, status) => {
performTest(event, status);
});
Test.listen(Test.EVENT_FINISH, (event, status) => {
performTest(event, status);
if (queue.length > 0) {
loadTest(queue.shift());
} else {
if (!!faults)
outputMessage("error", "Some of the tests failed.");
else outputMessage("info", "All tests were successful.");
}
lock = false;
window.focus();
document.body.focus();
let test = locateTest();
test = document.querySelector("#" + test.hashCode());
if (test && !test.className) {
test.scrollIntoView(false);
test.className = "progress";
}
});
Test.listen(Test.EVENT_INTERRUPT, (event, status) => {
outputMessage("warn", "Interrupt of " + locateTest());
performTest(event, status);
if (queue.length > 0)
loadTest(queue.shift());
});
console.listen((event, ...variants) => {
if (event === undefined
|| event === null)
return;
let message = variants.join(", ");
event = (event || "").trim();
if (event.match(/^error$/i))
if (!String(message).match(/^[a-z]+,[\w\s]+\d{4}\s\d{2}:\d{2}:\d{2}\s[a-z]+\s+Test/i))
event = "warn";
message = message.replace(/^[a-z]+,[\w\s]+\d{4}\s\d{2}:\d{2}:\d{2}\s[a-z]+\s+/i, "");
outputMessage(event, message);
});
</script>
</head>
<body>
<table>
<tr>
<th>Tests</th>
<th>Output</th>
<th>Frame</th>
</tr>
<tr>
<td>
<div id="progress"></div>
</td>
<td>
<div id="output"></div>
</td>
<td>
<iframe></iframe>
</td>
</tr>
</table>
</body>
</html>