@seanox/aspect-js
Version:
full stack JavaScript framework for SPAs incl. reactivity rendering, mvc / mvvm, models, expression language, datasource, virtual paths, unit test and some more
337 lines (303 loc) • 10.9 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
white-space: pre;
}
</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();
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();
}});
Test.create({test() {
const objectA = {}
const objectB = {}
objectA.objectB = objectB;
// Assertions
Assert.assertTrue(objectA.objectB === objectB);
const objectC = objectA.reactive();
// Assertions
Assert.assertTrue(objectC.objectB !== objectA.objectB);
Assert.assertTrue(objectC.objectB !== objectB);
Assert.assertTrue(objectA.objectB === objectB);
const objectD = ({}).reactive();
objectD.objectB = objectB;
objectD.objectB.text = "A";
// Assertions
Assert.assertTrue(objectD.objectB !== objectB);
Assert.assertTrue(objectD.objectB === objectC.objectB);
Assert.assertTrue(objectD.objectB.text === "A");
Assert.assertTrue(objectC.objectB.text === "A");
const objectE = {text: "A"};
const objectF = objectE.reactive();
objectF.text = "B";
// Assertions
Assert.assertTrue(objectE.text === "B");
Assert.assertTrue(objectF.text === "B");
objectE.text = "C";
// Assertions
Assert.assertTrue(objectE.text === "C");
Assert.assertTrue(objectF.text === "C");
}});
Test.create({test() {
const objectA = {};
const objectB = objectA.reactive();
objectB.value = "B";
// Assertions
Assert.assertTrue(typeof objectA.value === "string");
Assert.assertTrue(typeof objectB.value === "string");
Assert.assertTrue(objectA.value === objectB.value);
}});
Test.create({test() {
const objectA = ({}).reactive();
const objectB = objectA.reactive();
const objectC = Reactive(objectA);
// Assertions
Assert.assertTrue(objectA === objectB);
Assert.assertTrue(objectA === objectC);
Assert.assertTrue(objectB === objectC);
const objectD = ({objectA}).reactive();
// Assertion
Assert.assertTrue(objectD.objectA === objectA);
objectC.objectB = objectB;
// Assertion
Assert.assertTrue(objectC.objectB === objectB);
}});
const modelX = {
valueA: 10000,
valueB: {
valueC: 20000,
valueE: {
valueF: 30000,
valueH: null,
}
},
valueG: null,
arrayA: [{text: "A"},{text: "B"},{text: "C"}],
arrayB: [{text: "D"},{text: "E"},{text: "F"}]
};
const modelA = modelX.reactive();
modelA.a = "A";
modelX.a = "X";
modelX.valueX = {};
modelA.valueY = {};
window.setTimeout(() => {modelA.valueA++;}, 1000);
window.setTimeout(() => {modelA.valueA++;}, 1250);
window.setTimeout(() => {modelA.valueA++;}, 1500);
window.setTimeout(() => {modelA.valueB.valueC += 10;}, 2000);
window.setTimeout(() => {modelA.valueB.valueC += 10;}, 2250);
window.setTimeout(() => {modelA.valueB.valueC += 10;}, 2500);
window.setTimeout(() => {modelA.valueB.valueE.valueF += 100}, 3000);
window.setTimeout(() => {modelA.valueB.valueE.valueF += 100}, 3250);
window.setTimeout(() => {modelA.valueB.valueE.valueF += 100}, 3500);
window.setTimeout(() => {modelX.a = "B"}, 1000);
window.setTimeout(() => {modelA.a = "C"}, 3000);
window.setTimeout(() => {modelX.arrayA[2].text += "Xb"}, 1000);
window.setTimeout(() => {modelX.arrayB[2].text += "Xe"}, 1500);
window.setTimeout(() => {modelA.arrayA[2].text += "Ab"}, 2000);
window.setTimeout(() => {modelA.arrayB[2].text += "Ae"}, 2500);
</script>
<script type="text/test">
A: _10000_
C: _20000_
F: _30000_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}] vs. [{"text":"A"},{"text":"B"},{"text":"C"}]
a-arrayB vs. a-arrayB: F vs. F
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10001_
C: _20000_
F: _30000_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}] vs. [{"text":"A"},{"text":"B"},{"text":"C"}]
a-arrayB vs. a-arrayB: F vs. F
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10002_
C: _20000_
F: _30000_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}] vs. [{"text":"A"},{"text":"B"},{"text":"C"}]
a-arrayB vs. a-arrayB: F vs. F
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20000_
F: _30000_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}] vs. [{"text":"A"},{"text":"B"},{"text":"C"}]
a-arrayB vs. a-arrayB: F vs. F
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20010_
F: _30000_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}] vs. [{"text":"A"},{"text":"B"},{"text":"C"}]
a-arrayB vs. a-arrayB: F vs. F
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20010_
F: _30000_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"CXbAb"}] vs. [{"text":"A"},{"text":"B"},{"text":"CXbAb"}]
a-arrayB vs. a-arrayB: F vs. F
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20020_
F: _30000_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"CXbAb"}] vs. [{"text":"A"},{"text":"B"},{"text":"CXbAb"}]
a-arrayB vs. a-arrayB: F vs. F
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20030_
F: _30000_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"CXbAb"}] vs. [{"text":"A"},{"text":"B"},{"text":"CXbAb"}]
a-arrayB vs. a-arrayB: F vs. F
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20030_
F: _30000_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"CXbAb"}] vs. [{"text":"A"},{"text":"B"},{"text":"CXbAb"}]
a-arrayB vs. a-arrayB: FXeAe vs. FXeAe
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20030_
F: _30100_
x: _object_
Y: _object_
A-a: X
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"CXbAb"}] vs. [{"text":"A"},{"text":"B"},{"text":"CXbAb"}]
a-arrayB vs. a-arrayB: FXeAe vs. FXeAe
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20030_
F: _30100_
x: _object_
Y: _object_
A-a: C
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"CXbAb"}] vs. [{"text":"A"},{"text":"B"},{"text":"CXbAb"}]
a-arrayB vs. a-arrayB: FXeAe vs. FXeAe
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20030_
F: _30200_
x: _object_
Y: _object_
A-a: C
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"CXbAb"}] vs. [{"text":"A"},{"text":"B"},{"text":"CXbAb"}]
a-arrayB vs. a-arrayB: FXeAe vs. FXeAe
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
<script type="text/test">
A: _10003_
C: _20030_
F: _30300_
x: _object_
Y: _object_
A-a: C
X-a: X
a-arrayA vs. x-arrayA: [{"text":"A"},{"text":"B"},{"text":"CXbAb"}] vs. [{"text":"A"},{"text":"B"},{"text":"CXbAb"}]
a-arrayB vs. a-arrayB: FXeAe vs. FXeAe
x-arrayA: [{"text":"A"},{"text":"B"},{"text":"C"}]
x-arrayB: F
</script>
</head>
<body>
A: _{{modelA.valueA}}_
C: _{{modelA.valueB.valueC}}_
F: _{{modelA.valueB.valueE.valueF}}_
x: _{{typeof modelX.valueX}}_
Y: _{{typeof modelA.valueY}}_
A-a: {{modelA.a}}
X-a: {{modelX.a}}
a-arrayA vs. x-arrayA: {{JSON.stringify(modelA.arrayA) + " vs. " + JSON.stringify(modelX.arrayA)}}
a-arrayB vs. a-arrayB: {{modelA.arrayB[2].text + " vs. " + modelX.arrayB[2].text}}
<!--
To the original object gives without proxy no notifications so the
representation remains unchanged, but not the value!
-->
x-arrayA: {{JSON.stringify(modelX.arrayA)}}
x-arrayB: {{modelX.arrayB[2].text}}
</body>
</html>