@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
335 lines (318 loc) • 9.26 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
white-space: pre;
}
body div {
margin: 1em;
}
</style>
<script src="aspect-js.js"></script>
<script src="scripts/capture.js"></script>
<script type="text/javascript">
Test.activate();
Namespace.create("Model", {
onA: false,
toggleA() {
this.onA = !this.onA;
return this.onA;
},
onB: false,
toggleB() {
this.onB = !this.onB;
return this.onB;
},
onC: false,
toggleC() {
this.onC = !this.onC;
return this.onC;
},
onD: false,
toggleD() {
this.onD = !this.onD;
return this.onD;
},
onE: false,
toggleE() {
this.onE = !this.onE;
return this.onE;
},
listE: ["a", "b", "c"]
});
const testS = (text, index) => {
const span = document.createElement("span");
span.textContent = text + ":" + index;
return span;
};
const capture = new Capture();
Composite.listen(Composite.EVENT_RENDER_END, (event, element) => {
if (element instanceof Node
&& element.nodeType === Node.TEXT_NODE)
return;
capture.snap();
if (capture.snapshots().length < capture.patterns().length)
Composite.asynchron(Composite.render, document.body);
if (capture.snapshots().length === capture.patterns().length)
Test.start();
if (capture.snapshots().length > capture.size())
Assert.assertEquals("expected {1} steps but was {2}", 5, capture.patterns().length);
});
Namespace.create("x1", 0);
Namespace.create("x2", 0);
var x3 = 0;
var x4 = 0;
window["z1"] = "a";
var z2 = "b";
const z3 = "c";
let z4 = "d";
Test.create({test() {
capture.validate();
}});
Test.create({test() {
const error = String(console.output.error);
Assert.assertTrue(error.includes("Invalid condition: {{null"));
Assert.assertTrue(error.includes("Invalid condition: null}}"));
Assert.assertTrue(error.includes("Invalid condition: {{null}}{{null}}"));
Assert.assertTrue(error.includes("Invalid condition: true"));
}});
</script>
<script type="text/test">
A1AA
B1B
C1C
D1D
E1E
F1Error: Invalid expressionF
F2Error: Invalid expressionF
F3Error: Invalid expressionF
F4Error: Invalid condition: trueF
OnA: false
A2AA
B2B
C2CC
OnA: true
O1: 1x1++; output1.textContent = x1;
O2: 1x2++; output2.textContent = x2;
O3: 1 falsex3++; output3.textContent = x3;
O4: 1 falsex4++; output4.textContent = x4;
E::E
SA:1:1:A:SA
SB:1:1:B:SB
OnA: true
OnB: false
A3-1
A3-2
A3-3
A3-4
OnA: false
OnB: true
z1: a_
z2: b_
z3: c
z4: d
H
Error: expected expression, got end of script in Model.onE(
</script>
<script type="text/test">
A1AA
B1B
C1C
D1D
E1E
F1Error: Invalid expressionF
F2Error: Invalid expressionF
F3Error: Invalid expressionF
F4Error: Invalid condition: trueF
OnA: false
A2AA
B2B
C2CC
OnA: true
O1: 1x1++; output1.textContent = x1;
O2: 2x2++; output2.textContent = x2;
O3: 1 true
O4: 1 true
E:abc:E
SA:2:1:A:SA
SB:2:2:B:SB
OnA: true
OnB: true
OnA: true
OnB: false
z1: a__
z2: b__
z3: c
z4: d
Error: expected expression, got end of script in Model.onE(
</script>
<script type="text/test">
A1AA
B1B
C1C
D1D
E1E
F1Error: Invalid expressionF
F2Error: Invalid expressionF
F3Error: Invalid expressionF
F4Error: Invalid condition: trueF
OnA: true
A2A
B2BB
C2C
OnA: false
O1: 1x1++; output1.textContent = x1;
O2: 3x2++; output2.textContent = x2;
O3: 1 falsex3++; output3.textContent = x3;
O4: 2 falsex4++; output4.textContent = x4;
E::E
SA:3:1:A:SA
SB:3:3:B:SB
OnA: false
OnB: false
A3-1
A3-2
A3-3
A3-4
A3-5
OnA: true
OnB: true
z1: a___
z2: b___
z3: c
z4: d
H
Error: expected expression, got end of script in Model.onE(
</script>
<script type="text/test">
A1AA
B1B
C1C
D1D
E1E
F1Error: Invalid expressionF
F2Error: Invalid expressionF
F3Error: Invalid expressionF
F4Error: Invalid condition: trueF
OnA: true
A2A
B2BB
C2C
OnA: false
O1: 1x1++; output1.textContent = x1;
O2: 4x2++; output2.textContent = x2;
O3: 1 true
O4: 2 true
E:abc:E
SA:4:1:A:SA
SB:4:4:B:SB
OnA: false
OnB: true
OnA: false
OnB: false
z1: a____
z2: b____
z3: c
z4: d
Error: expected expression, got end of script in Model.onE(
</script>
<script type="text/test">
A1AA
B1B
C1C
D1D
E1E
F1Error: Invalid expressionF
F2Error: Invalid expressionF
F3Error: Invalid expressionF
F4Error: Invalid condition: trueF
OnA: false
A2AA
B2B
C2CC
OnA: true
O1: 1x1++; output1.textContent = x1;
O2: 5x2++; output2.textContent = x2;
O3: 1 falsex3++; output3.textContent = x3;
O4: 3 falsex4++; output4.textContent = x4;
E::E
SA:5:1:A:SA
SB:5:5:B:SB
OnA: true
OnB: false
A3-1
A3-2
A3-3
A3-4
OnA: false
OnB: true
z1: a_____
z2: b_____
z3: c
z4: d
H
Error: expected expression, got end of script in Model.onE(
</script>
</head>
<body>
A1<span condition="{{true}}">A</span>A
B1<span condition="{{false}}">B</span>B
C1<span condition="{{1}}">C</span>C
D1<span condition="{{0}}">D</span>D
E1<span condition="{{null}}">E</span>E
F1<span condition="{{null">X</span>F
F2<span condition="null}}">X</span>F
F3<span condition="{{null}}{{null}}">X</span>F
F4<span condition="true">X</span>F
OnA: {{Model.onA}}
A2<span condition="{{Model.toggleA()}}">A</span>A
B2<span condition="{{Model.toggleA()}}">B</span>B
C2<span condition="{{Model.toggleA()}}">C</span>C
OnA: {{Model.onA}}
O1: <span id="output1"></span><script type="text/javascript">x1++; output1.textContent = x1;</script>
O2: <span id="output2"></span><script type="composite/javascript">x2++; output2.textContent = x2;</script>
O3: <span id="output3"></span> {{Model.onC}}<script type="text/javascript"
condition="{{Model.toggleC()}}">x3++; output3.textContent = x3;</script>
O4: <span id="output4"></span> {{Model.onD}}<script type="composite/javascript"
condition="{{Model.toggleD()}}">x4++; output4.textContent = x4;</script>
E:<span iterate="{{list:Model.listE}}"
condition="{{not Model.toggleE()}}"><span>{{list.item}}</span></span>:E
{{s1:((?s1) || 0) +1}}
SA:{{s1}}:<span id="outputSA" condition="{{true}}" import="{{testS(s1,'A')}}">---</span>:SA
<!-- Expectation: testS(s1) is imported once, since the import is only executed once. -->
SB:{{s1}}:<span id="outputSB" condition="{{true}}" output="{{testS(s1,'B')}}">---</span>:SB
<!-- Expectation: testS(s1) is output multiple, since the output is executed several times. -->
OnA: {{Model.onA}}
OnB: {{Model.onB}}
<span condition="{{Model.toggleB()}}">A3-1
<span condition="{{true}}">A3-2
<span condition="{{true}}">A3-3
<span condition="{{true}}">A3-4
<span condition="{{Model.toggleA()}}">A3-5
</span>
</span>
</span>
</span>
</span>
OnA: {{Model.onA}}
OnB: {{Model.onB}}
{{z1:z1+'_'}}
z1: {{z1}}
{{z2:z2+'_'}}
z2: {{z2}}
{{z3:z3+'_'}}
z3: {{z3}}
{{z4:z4+'_'}}
z4: {{z4}}
<!--
after removing from the DOM, the markup must also be reloaded when
inserting again
-->
<div id="moduleH" composite condition="{{Model.onE}}"></div>
<div condition="{{Model.onE(}}"></div>
</body>
</html>