@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
131 lines (125 loc) • 4.58 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
}
</style>
<script src="aspect-js.js"></script>
<script type="text/javascript">
Test.activate();
let importAv = 1;
let importAx = 2;
let importBv = 3;
let importBx = 4;
let importCv = 5;
let importCx = 6;
Test.create({test() {
const content = OutputA.textContent.replace(/\s+/g, " ").trim();
Assert.assertEquals("A:A0", content);
}});
Test.create({test() {
const content = OutputB.textContent.replace(/\s+/g, " ").trim();
Assert.assertEquals("B:B4B5B6B7B8B9", content);
}});
Test.create({test() {
const content = OutputC.textContent.replace(/\s+/g, " ").trim();
Assert.assertEquals("C:C0C1C2", content);
}});
Test.create({test() {
const content = OutputD.textContent.replace(/\s+/g, " ").trim();
Assert.assertEquals("D:D0D2D4D6D8", content);
}});
Test.create({test() {
Assert.assertEquals(1, importAv);
Assert.assertEquals(2, importAx);
}});
Test.create({test() {
Assert.assertEquals(3, importBv);
Assert.assertEquals(4, importBx);
}});
Test.create({test() {
Assert.assertEquals(300, importCv);
Assert.assertEquals(16, importCx);
}});
Test.create({test() {
const content = document.querySelector("#OutputE ~ div").innerHTML.replace(/\s+/g, " ").trim();
Assert.assertEquals("importAv = 100; importAx++; <script type=\"text/javascript\"> importBv = 200; importBx++; <\/script> <script type=\"composite/javascript\"> importCv = 300; importCx++; <\/script>", content);
}});
Test.create({test() {
Assert.assertEquals(10, targets["BODY"]);
}});
Test.create({test() {
Assert.assertEquals(2, targets["SCRIPT"]);
}});
let count = 0;
let targets = {};
Composite.listen(Composite.EVENT_RENDER_END, (event, target) => {
if (targets[target.nodeName] === undefined)
targets[target.nodeName] = 0;
targets[target.nodeName]++;
//10 render calls are initiated directly.
//Two other events occur during the import of scripts (test case e)
//This is why the (re)rendering is done with care that it is only triggered by the BODY.
if (target.nodeName === "BODY") {
++count;
if (count <= 9)
Composite.render(document.body);
if (count === 10)
Test.start();
if (count > 10)
throw new Error("More render calls than expected");
}
});
const ModelA = {
isVisibleA() {
return count % 2 === 0;
},
isVisibleB() {
return count > 3;
},
isVisibleC() {
return count < 3;
},
isVisibleD() {
return count % 2 === 0;
}
};
</script>
</head>
<body>
<div id="OutputA">A:</div>
<div>
<!--
JavaScript is only executed initially because the renderer ignores script + style tags.
Expected result: A0
-->
<script type="text/javascript" condition={{ModelA.isVisibleA()}}>
OutputA.textContent += "A" + count;
</script>
</div>
<div id="OutputB">B:</div>
<div>
<script type="composite/javascript" condition={{ModelA.isVisibleB()}}>
OutputB.textContent += "B" + count;
</script>
</div>
<div id="OutputC">C:</div>
<div>
<script type="composite/javascript" condition={{ModelA.isVisibleC()}}>
OutputC.textContent += "C" + count;
</script>
</div>
<div id="OutputD">D:</div>
<div>
<script type="composite/javascript" condition={{ModelA.isVisibleD()}}>
OutputD.textContent += "D" + count;
</script>
</div>
<div id="OutputE">E:</div>
<div import="composite_render_script.import"></div>
</body>
</html>