@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
149 lines (138 loc) • 6.47 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
}
div {
display: inline;
}
div:before {
content:attr(id);
}
</style>
<script src="aspect-js.js"></script>
<script type="text/javascript">
// IMPORTANT -- The tests routing_active_on.html and
// routing_active_off.html should always be synchronized!
Test.activate();
// By default, the Routing is inactive. It is only activated by the
// attribute route in the body tag. Thus composites are not views and
// are not hidden. This is helpful for micro frontends without view
// flow.
Test.create({test() {
const content = _snapshots.join("\r\n");
Assert.assertSameTo("script[type='text/test']", content);
Assert.assertEquals(1, _counter);
}});
let _counter = 0;
const model = {
get counter() {
return ++_counter;
}
}
const _snapshots = [];
const _testRoute = (path) => {
_snapshots.push(document.body.innerHTML.match(/(id=\S+)/g));
Routing.route(path);
};
window.setTimeout(() => Routing.route("#"), 0);
window.setTimeout(() => _testRoute("#a"), 100);
window.setTimeout(() => _testRoute("#a#a1"), 200);
window.setTimeout(() => _testRoute("#a#a1#a2"), 300);
window.setTimeout(() => _testRoute("#a2"), 400);
window.setTimeout(() => _testRoute("#a2#a3"), 500);
window.setTimeout(() => _testRoute("#a2#a3#4"), 600);
window.setTimeout(() => _testRoute("#a2"), 700);
window.setTimeout(() => _testRoute("#a2#a4"), 800);
window.setTimeout(() => {
_snapshots.push(document.body.innerHTML.match(/(id=\S+)/g));
document.body.innerText = _snapshots.join("\r\n");
Test.start();
}, 1000);
</script>
<script type="text/test">
id="a",id="a1",id="a2",id="a3",id="a4",id="a5",id="a6",id="a7",id="a8",id="a9",id="a0",id="b",id="b1",id="b2",id="b3",id="b4",id="b5",id="b6",id="b7",id="b8",id="b9",id="b0",id="c",id="c1",id="c2",id="c3",id="c4",id="c5",id="c6",id="c7",id="c8",id="c9",id="c0"
id="a",id="a1",id="a2",id="a3",id="a4",id="a5",id="a6",id="a7",id="a8",id="a9",id="a0",id="b",id="b1",id="b2",id="b3",id="b4",id="b5",id="b6",id="b7",id="b8",id="b9",id="b0",id="c",id="c1",id="c2",id="c3",id="c4",id="c5",id="c6",id="c7",id="c8",id="c9",id="c0"
id="a",id="a1",id="a2",id="a3",id="a4",id="a5",id="a6",id="a7",id="a8",id="a9",id="a0",id="b",id="b1",id="b2",id="b3",id="b4",id="b5",id="b6",id="b7",id="b8",id="b9",id="b0",id="c",id="c1",id="c2",id="c3",id="c4",id="c5",id="c6",id="c7",id="c8",id="c9",id="c0"
id="a",id="a1",id="a2",id="a3",id="a4",id="a5",id="a6",id="a7",id="a8",id="a9",id="a0",id="b",id="b1",id="b2",id="b3",id="b4",id="b5",id="b6",id="b7",id="b8",id="b9",id="b0",id="c",id="c1",id="c2",id="c3",id="c4",id="c5",id="c6",id="c7",id="c8",id="c9",id="c0"
id="a",id="a1",id="a2",id="a3",id="a4",id="a5",id="a6",id="a7",id="a8",id="a9",id="a0",id="b",id="b1",id="b2",id="b3",id="b4",id="b5",id="b6",id="b7",id="b8",id="b9",id="b0",id="c",id="c1",id="c2",id="c3",id="c4",id="c5",id="c6",id="c7",id="c8",id="c9",id="c0"
id="a",id="a1",id="a2",id="a3",id="a4",id="a5",id="a6",id="a7",id="a8",id="a9",id="a0",id="b",id="b1",id="b2",id="b3",id="b4",id="b5",id="b6",id="b7",id="b8",id="b9",id="b0",id="c",id="c1",id="c2",id="c3",id="c4",id="c5",id="c6",id="c7",id="c8",id="c9",id="c0"
id="a",id="a1",id="a2",id="a3",id="a4",id="a5",id="a6",id="a7",id="a8",id="a9",id="a0",id="b",id="b1",id="b2",id="b3",id="b4",id="b5",id="b6",id="b7",id="b8",id="b9",id="b0",id="c",id="c1",id="c2",id="c3",id="c4",id="c5",id="c6",id="c7",id="c8",id="c9",id="c0"
id="a",id="a1",id="a2",id="a3",id="a4",id="a5",id="a6",id="a7",id="a8",id="a9",id="a0",id="b",id="b1",id="b2",id="b3",id="b4",id="b5",id="b6",id="b7",id="b8",id="b9",id="b0",id="c",id="c1",id="c2",id="c3",id="c4",id="c5",id="c6",id="c7",id="c8",id="c9",id="c0"
id="a",id="a1",id="a2",id="a3",id="a4",id="a5",id="a6",id="a7",id="a8",id="a9",id="a0",id="b",id="b1",id="b2",id="b3",id="b4",id="b5",id="b6",id="b7",id="b8",id="b9",id="b0",id="c",id="c1",id="c2",id="c3",id="c4",id="c5",id="c6",id="c7",id="c8",id="c9",id="c0"
</script>
</head>
<body>
{{model.counter}}
<div id="a" composite>
<div id="a1" composite>
<div id="a2" composite route>
<div id="a3" composite>
<div id="a4" composite route>
<div id="a5" composite>
</div>
</div>
</div>
</div>
</div>
<div id="a6" composite route>
<div id="a7" composite>
<div id="a8" composite route>
<div id="a9" composite>
<div id="a0" composite route>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="b" composite route>
<div id="b1" composite>
<div id="b2" composite route>
<div id="b3" composite>
<div id="b4" composite route>
<div id="b5" composite>
</div>
</div>
</div>
</div>
</div>
<div id="b6" composite route>
<div id="b7" composite route>
<div id="b8" composite>
<div id="b9" composite route>
<div id="b0" composite>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="c" composite>
<div id="c1" composite>
<div id="c2" composite route>
<div id="c3" composite>
<div id="c4" composite route>
<div id="c5" composite>
</div>
</div>
</div>
</div>
</div>
<div id="c6" composite route>
<div id="c7" composite route>
<div id="c8" composite>
<div id="c9" composite route>
<div id="c0" composite>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>