@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
205 lines (195 loc) • 11.9 kB
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
}
body div {
margin: 1em;
}
input[type="text"] {
width: 2em;
}
input[type="button"] {
width: 3em;
}
</style>
<script src="aspect-js.js"></script>
<script type="text/javascript">
Test.activate();
const publish = () => {
const content = '<input type="text" id="textArray:0" events="input">'
+ '<input type="text" id="textArray:1" events="input">'
+ '<input type="text" id="textArray:2" events="input">'
+ '<input type="text" id="textArray" events="input">'
+ '<input type="text" id="text:a" events="input">'
+ '<input type="text" id="text:b" events="input">'
+ '<input type="text" id="text:c" events="input">'
+ '<input type="text" id="text" events="input">'
+ '<input type="text" id="textNothing:a" events="input">'
+ '<input type="text" id="textNothing:b" events="input">'
+ '<input type="text" id="textNothing:c" events="input">'
+ '<input type="text" id="textNothing" events="input">'
+ '<input type="text" id="object:a" events="input">'
+ '<input type="text" id="object:b" events="input">'
+ '<input type="text" id="object:c" events="input">'
+ '<input type="text" id="objectArray:0" events="input">'
+ '<input type="text" id="objectArray:1" events="input">'
+ '<input type="text" id="objectArray:2" events="input">'
+ '<input type="text" id="objectArray" events="input">'
+ '<input type="text" id="objectNothing:a" events="input">'
+ '<input type="text" id="objectNothing:b" events="input">'
+ '<input type="text" id="objectNothing:c" events="input">'
+ '<input type="text" id="objectNothing" events="input">'
+ '<br>'
+ '<input type="button" id="buttonArray:0" events="click" value="A1">'
+ '<input type="button" id="buttonArray:1" events="click" value="A2">'
+ '<input type="button" id="buttonArray:2" events="click" value="A3">'
+ '<input type="button" id="buttonArray" events="click" value="B">'
+ '<input type="button" id="button:0" events="click" value="C1">'
+ '<input type="button" id="button:1" events="click" value="C2">'
+ '<input type="button" id="button:2" events="click" value="C3">'
+ '<input type="button" id="buttonNothing:0" events="click" value="D1">'
+ '<input type="button" id="buttonNothing:1" events="click" value="D2">'
+ '<input type="button" id="buttonNothing:2" events="click" value="D3">'
+ '<input type="button" id="buttonNothing" events="click" value="E">';
const div = document.createElement("div");
div.innerHTML = content;
return div;
};
const clickStack = [];
const modelA = {
textArray: ["", ""],
text: "",
objectArray: [{value: ""},{value: ""}],
object: {a: {value: ""}, b: ""},
buttonArray: [
{onClick(event) {
clickStack.push("a" + event.target.value);
}},
{onClick(event) {
clickStack.push("b" + event.target.value);
}}
],
button: {
onClick(event) {
clickStack.push("c" + event.target.value);
}
}
};
const modelB = {
textArray: ["", ""],
text: "",
objectArray: [{value: ""},{value: ""}],
object: {a: {value: ""}, b: ""},
buttonArray: [
{onClick(event) {
clickStack.push("d" + event.target.value);
}},
{onClick(event) {
clickStack.push("e" + event.target.value);
}}
],
button: {
onClick(event) {
clickStack.push("f" + event.target.value);
}
}
};
const modelC = {
textArray: ["", ""],
text: "",
objectArray: [{value: ""},{value: ""}],
object: {a: {value: ""}, b: ""},
buttonArray: [
{onClick(event) {
clickStack.push("g" + event.target.value);
}},
{onClick(event) {
clickStack.push("h" + event.target.value);
}}
],
button: {
onClick(event) {
clickStack.push("i" + event.target.value);
}
}
};
let timeout = null;
Composite.listen(Composite.EVENT_RENDER_END, () => {
if (timeout)
window.clearInterval(timeout);
timeout = window.setTimeout(() => {
("ABC".split(/(?=\w)/)).forEach((context) => {
let index = 0;
document.querySelector("#model" + context + " #textArray\\:0").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #textArray\\:1").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #textArray\\:2").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #textArray").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #objectArray\\:0").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #objectArray\\:1").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #objectArray\\:2").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #objectArray").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #text\\:a").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #text\\:b").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #text\\:c").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #text").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #object\\:a").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #object\\:b").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #object\\:c").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #textNothing\\:a").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #textNothing\\:b").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #textNothing\\:c").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #textNothing").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #objectNothing\\:a").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #objectNothing\\:b").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #objectNothing\\:c").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #objectNothing").typeValue(context + String.fromCharCode(65 + index++), true);
document.querySelector("#model" + context + " #buttonArray\\:0").click();
document.querySelector("#model" + context + " #buttonArray\\:1").click();
document.querySelector("#model" + context + " #buttonArray\\:2").click();
document.querySelector("#model" + context + " #buttonArray").click();
document.querySelector("#model" + context + " #button\\:0").click();
document.querySelector("#model" + context + " #button\\:1").click();
document.querySelector("#model" + context + " #button\\:2").click();
document.querySelector("#model" + context + " #buttonNothing\\:0").click();
document.querySelector("#model" + context + " #buttonNothing\\:1").click();
document.querySelector("#model" + context + " #buttonNothing\\:2").click();
document.querySelector("#model" + context + " #buttonNothing").click();
});
Test.start();
}, 250);
});
Test.create({test() {
const pattern = '{"textArray":["AA","AB"],"text":"AL","objectArray":[{"value":"AE"},{"value":"AF"}],"object":{"a":{"value":"AM"},"b":"AN"},"buttonArray":[{},{}],"button":{}}';
Assert.assertEquals(pattern, modelA.toPlainString());
}});
Test.create({test() {
const pattern = '{"textArray":["BA","BB"],"text":"BL","objectArray":[{"value":"BE"},{"value":"BF"}],"object":{"a":{"value":"BM"},"b":"BN"},"buttonArray":[{},{}],"button":{}}';
Assert.assertEquals(pattern, modelB.toPlainString());
}});
Test.create({test() {
const pattern = '{"textArray":["CA","CB"],"text":"CL","objectArray":[{"value":"CE"},{"value":"CF"}],"object":{"a":{"value":"CM"},"b":"CN"},"buttonArray":[{},{}],"button":{}}';
Assert.assertEquals(pattern, modelC.toPlainString());
}});
Test.create({test() {
const pattern = 'aA1 bA2 dA1 eA2 gA1 hA2';
Assert.assertEquals(pattern, clickStack.join(" "));
}});
</script>
</head>
<body>
<section id="{{'model' + 'A'}}" composite
import="{{publish()}}">
</section>
<section id="modelB" composite
import="{{publish()}}">
</section>
<section id="modelC" composite
import="{{publish()}}">
</section>
</body>
</html>