@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
226 lines (219 loc) • 6.84 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
}
body div {
margin: 1em;
}
body * {
display: block;
}
</style>
<script src="aspect-js.js"></script>
<script src="scripts/capture.js"></script>
<script type="text/javascript">
Test.activate();
const capture = new Capture();
Composite.listen(Composite.EVENT_RENDER_END, () => {
capture.snap();
if (capture.size() === 1)
Composite.asynchron(() => {
document.querySelector("#button_1_C").click();
});
else if (capture.size() === 3)
Composite.asynchron(() => {
document.querySelector("#model_2_B\\:model_2_C\\:button_2_C\\@model_2_A").click();
});
else if (capture.size() === 5)
Composite.asynchron(() => {
document.querySelector("#button_2_C").click();
});
else if (capture.size() === 7)
Composite.asynchron(() => {
document.querySelector("#button_1_C\\@model_1_C").click();
});
const count = capture.patterns().length;
if (capture.size() === count)
Test.start();
if (capture.size() > count)
Assert.assertEquals("expected {1} steps but was {2}", count, capture.size());
});
Test.create({test() {
capture.validate();
}});
Namespace.create("model_1_A", ({
model_1_B: {
model_1_C: {
}
}
}).reactive());
Namespace.create("model_1_B", ({
}).reactive());
Namespace.create("model_1_C", ({
button_1_C: {
text: "1: must not change",
onClick() {
this.text += " 1";
}
}
}).reactive());
Namespace.create("model_2_A", ({
model_2_B: {
model_2_C: {
button_2_C: {
text: "2: must not change",
onClick() {
this.text += " 2";
}
}
}
}
}).reactive());
Namespace.create("model_2_B", ({
model_2_C: {
button_2_C: {
text: "2b: must not change",
onClick() {
this.text += "2b";
}
}
}
}).reactive());
Namespace.create("model_2_C", ({
button_2_C: {
text: "2c: must not change",
onClick() {
this.text += "2c";
}
}
}).reactive());
</script>
<script type="text/test">
1: button_1_C
1: button_2_C
2: button_2_C
2: button_1_C
button_1_C: 1: must not change
button_2_C: 2: must not change
2_B 2_C: 2b: must not change
2_C: 2c: must not change
</script>
<script type="text/test">
1: button_1_C
1: button_2_C
2: button_2_C
2: button_1_C
button_1_C: 1: must not change 1
button_2_C: 2: must not change
2_B 2_C: 2b: must not change
2_C: 2c: must not change
</script>
<script type="text/test">
1: button_1_C
1: button_2_C
2: button_2_C
2: button_1_C
button_1_C: 1: must not change 1
button_2_C: 2: must not change
2_B 2_C: 2b: must not change
2_C: 2c: must not change
</script>
<script type="text/test">
1: button_1_C
1: button_2_C
2: button_2_C
2: button_1_C
button_1_C: 1: must not change 1
button_2_C: 2: must not change 2
2_B 2_C: 2b: must not change
2_C: 2c: must not change
</script>
<script type="text/test">
1: button_1_C
1: button_2_C
2: button_2_C
2: button_1_C
button_1_C: 1: must not change 1
button_2_C: 2: must not change 2
2_B 2_C: 2b: must not change
2_C: 2c: must not change
</script>
<script type="text/test">
1: button_1_C
1: button_2_C
2: button_2_C
2: button_1_C
button_1_C: 1: must not change 1
button_2_C: 2: must not change 2 2
2_B 2_C: 2b: must not change
2_C: 2c: must not change
</script>
<script type="text/test">
1: button_1_C
1: button_2_C
2: button_2_C
2: button_1_C
button_1_C: 1: must not change 1
button_2_C: 2: must not change 2 2
2_B 2_C: 2b: must not change
2_C: 2c: must not change
</script>
<script type="text/test">
1: button_1_C
1: button_2_C
2: button_2_C
2: button_1_C
button_1_C: 1: must not change 1 1
button_2_C: 2: must not change 2 2
2_B 2_C: 2b: must not change
2_C: 2c: must not change
</script>
<script type="text/test">
1: button_1_C
1: button_2_C
2: button_2_C
2: button_1_C
button_1_C: 1: must not change 1 1
button_2_C: 2: must not change 2 2
2_B 2_C: 2b: must not change
2_C: 2c: must not change
</script>
</head>
<body>
<!-- nested composites/models -->
<div id="model_1_A" composite>
<div id="model_1_B" composite>
<div id="model_1_C" composite>
<button id="button_1_C" events="click" release>
1: button_1_C</button>
<!-- elements with a reference -->
<button id="model_2_B:model_2_C:button_2_C@model_2_A" events="click" release>
1: button_2_C</button>
</div>
</div>
</div>
<!-- composite with a nested model object -->
<div id="model_2_A" composite>
<div id="model_2_B">
<div id="model_2_C">
<button id="button_2_C" events="click" release>
2: button_2_C</button>
<!-- elements with a reference -->
<button id="button_1_C@model_1_C" events="click" release>
2: button_1_C</button>
</div>
</div>
</div>
<pre>
button_1_C: {{model_1_C.button_1_C.text}}
button_2_C: {{model_2_A.model_2_B.model_2_C.button_2_C.text}}
2_B 2_C: {{model_2_B.model_2_C.button_2_C.text}}
2_C: {{model_2_C.button_2_C.text}}
</pre>
</body>
</html>